/* 색상조합 디자인표 공용 스타일 — 색상조합디자인표-*.html 6종이 함께 쓴다.
   컨셉마다 파일을 따로 두되 화면 골격은 하나로 묶는다(고칠 일이 생기면 6곳이 아니라 여기 한 곳). */

/* 폰트는 jsdelivr CDN에서 받아오면 매번 외부 왕복이 걸려 네트워크가 계속 pending 상태가 됐다.
   그래서 가변폰트 woff2 한 개를 같은 서버(assets/fonts)에 두고 여기서 직접 등록한다 —
   외부 의존 없음. font-display:swap으로 폰트 받는 동안엔 기본 폰트로 먼저 보여주고 나중에 교체한다. */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;   /* 가변폰트 무게 범위 */
  font-style:normal;
  font-display:swap;
  src:url('fonts/PretendardVariable.woff2') format('woff2');
}
:root{
  --bg:#FAFAF8; --card:#FFFFFF; --ink:#111111; --sub:#6B6B6B; --line:#E7E7E7;
  --accent:#FF6B35;            /* QR페이 브랜드색 — brand-pay.css의 --color-primary와 같은 값 유지 */
  --soft:#FFF1EA;
  --prose:1080px;
}
/* 화면 테마 3상태 — 안 고르면 OS 설정(자동), 고르면 그 선택이 OS를 이긴다.
   localStorage 'nsTheme' 를 index·sitekit·beauty 와 공유해 사이트 테마가 통일된다.
   ※ 이건 "도구 화면 밝기"다 — 왼쪽 패널의 "카드 방식(밝은/중간/어두운)"은 미리보기 팔레트라 별개.
   요소별 다크색(modenote·배지·wcag·warn 등)도 아래에서 같은 값을 [data-theme="dark"] 로 한 번 더 적는다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#121417; --card:#1C1F24; --ink:#F0F1F3; --sub:#9AA1AC; --line:#33383F; --soft:#3A2A22; }
}
:root[data-theme="dark"]{ --bg:#121417; --card:#1C1F24; --ink:#F0F1F3; --sub:#9AA1AC; --line:#33383F; --soft:#3A2A22; }
/* 우측 상단 고정 토글 (이전/다음 화살표는 세로 중앙이라 안 겹친다) */
.theme-toggle{position:fixed; top:14px; right:16px; z-index:60; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--sub); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer;}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent);}
@media (max-width:560px){ .theme-toggle{top:10px; right:10px; padding:7px 11px;} }

/* 읽기 전용(고객 보여주기용) — 편집·상호작용 UI만 걷어내고 팔레트·미리보기·쓰임새만 남긴다.
   ?ro=1 로 들어오면 이 상태로 열린다(공유 가능). #roToggle 은 themeToggle 왼쪽에 둔다. */
.ro-toggle{right:118px;}
@media (max-width:560px){ .ro-toggle{right:92px;} }
body.ptv-ro .toolbar,
body.ptv-ro .card,
body.ptv-ro .rm-tabs,
body.ptv-ro .ep-handle,
body.ptv-ro #ep-side,
body.ptv-ro #editpanel,
body.ptv-ro #srcline,
body.ptv-ro #roToggle,
body.ptv-ro .pstat{ display:none !important; }
body.ptv-ro .pname{ cursor:default; }
body.ptv-ro .sw button{ cursor:default; }
.ro-exit{position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:61; display:none;
  font-family:inherit; font-size:13px; font-weight:800; border-radius:999px; padding:10px 18px; cursor:pointer;
  background:var(--accent); color:#111; border:none; box-shadow:0 6px 20px rgba(0,0,0,.28);}
body.ptv-ro .ro-exit{display:block;}

/* 공유 팝업 QR (#73) — 모바일로 이 화면 전송. QR 은 항상 흰 바탕/검은 모듈(스캔 안정). */
.sv-qrbox{margin-top:12px; display:flex; justify-content:center;}
.sv-qrwrap{display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  background:#fff; padding:14px; border-radius:12px; border:1px solid var(--line);}
.sv-qrwrap svg{display:block; width:190px; height:190px;}
.sv-qrcap{font-size:11.5px; color:#555; text-align:center; max-width:200px;}
.sv-b.on{border-color:var(--accent); color:var(--accent);}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink); word-break:keep-all;
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; padding-bottom:24px;
  transition:margin-left .32s cubic-bezier(.22,.9,.32,1), margin-right .32s cubic-bezier(.22,.9,.32,1);
}
/* 표제어편집(왼쪽 메뉴)을 펼치거나 접을 때 관리자 템플릿처럼 본문이 같이 밀려나게 한다 —
   화면 크기와 무관하게 항상 밀어서 콘텐츠가 패널에 덮이지 않게 한다.
   패널을 오른쪽에 붙였을 땐(ep-dock-right) 반대로 오른쪽을 밀어낸다. */
body.ep-panel-open{ margin-left:min(360px,88vw); }
body.ep-panel-open.ep-dock-right{ margin-left:0; margin-right:min(360px,88vw); }
@media (prefers-reduced-motion: reduce){ body{ transition:none; } }
p{ text-wrap:pretty; }
/* 이 두 줄은 도구 화면의 링크용이다. 셀렉터를 body 로 한정한 이유가 있다 —
   이 CSS 는 sitekit 미리보기의 shadow root 안으로도 통째로 실려 들어가는데(sitekit.js 의 paint),
   그때 `a{}` 로 두면 부품 안의 링크까지 잡아서 팔레트 강조색이 아니라 사이트 브랜드색(--accent)을
   입힌다. shadow 안에는 body 엘리먼트가 없으므로 `body a` 는 미리보기를 건드리지 않는다. */
body a{color:var(--accent); text-decoration:none;}
body a:hover{text-decoration:underline;}
code,.hex{font-family:Consolas,'D2Coding',monospace;}
.wrap{max-width:var(--prose); margin:0 auto; padding:0 24px;}

/* ---- 상단 ---- */
header.top{padding:36px 0 8px;}
/* 상호 줄은 가운데 정렬 + 첫 페이지(index)로 돌아가는 링크 */
/* 상호 줄 — 화면의 문패라 작으면 눈에 안 띈다. 크게·굵게 하고 색은 JS가 팔레트에 맞춰 바꾼다. */
header.top .eyebrow{display:block; text-align:center; font-size:18px; font-weight:800; color:var(--accent);
  letter-spacing:.02em; text-decoration:none; line-height:1.35;}
header.top a.eyebrow:hover{text-decoration:underline;}
@media (max-width:560px){ header.top .eyebrow{font-size:15px;} }
header.top h1{font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:10px;}
header.top p.sub{font-size:14px; color:var(--sub); margin-top:10px; max-width:66ch; line-height:1.75;}
header.top p.sub b{color:var(--ink);}

/* 다른 컨셉으로 건너가는 줄 */
.concepts{display:flex; gap:7px; flex-wrap:wrap; margin-top:18px;}
.concepts a, .concepts span{font-size:12px; font-weight:700; border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; color:var(--sub); background:var(--card);}
.concepts a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none;}
.concepts .here{background:var(--ink); color:var(--bg); border-color:var(--ink);}

/* 배색 원칙 · 역할 매핑 탭 — 두 카드를 세로로 나란히 두지 않고 하나로 묶어 전환한다 */
.rm-tabs{display:flex; gap:8px; margin:16px 0 -4px; align-items:center;}
.rm-tab{font-family:inherit; font-size:13px; font-weight:700; color:var(--sub); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer;}
.rm-tab:hover{border-color:var(--accent); color:var(--accent);}
.rm-tab.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
/* 설명 접기/펼치기 토글 — 오른쪽 끝. 펼쳐지면 화살표가 뒤집힌다. */
.rm-toggle{margin-left:auto; flex:none; font-family:inherit; color:var(--sub); background:var(--card);
  border:1px solid var(--line); border-radius:999px; width:40px; height:38px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13px;}
.rm-toggle:hover{border-color:var(--accent); color:var(--accent);}
.rm-arrow{display:inline-block; transition:transform .2s ease;}
.rm-tabs.rm-open .rm-arrow{transform:rotate(180deg);}
@media (prefers-reduced-motion: reduce){ .rm-arrow{transition:none;} }

.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin:16px 0;}
h2{font-size:19px; font-weight:800; letter-spacing:-.01em;}
h2 .n{color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.06em; display:block; margin-bottom:4px;}
.card p{font-size:13.5px; color:var(--sub); margin-top:10px; line-height:1.75;}
.card p b{color:var(--ink);}

.rules{margin-top:16px; display:flex; flex-direction:column;}
.rule{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line);}
.rule:first-child{border-top:0; padding-top:4px;}
.rule .rn{flex:none; width:26px; height:26px; border-radius:50%; background:var(--soft); color:var(--accent);
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.rule .rt{font-size:14.5px; font-weight:700;}
.rule .rd{font-size:13px; color:var(--sub); margin-top:4px; line-height:1.7;}

.tblwrap{overflow-x:auto; margin-top:16px;}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:13px;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-size:11.5px; font-weight:800; color:var(--sub); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;}
td .muted{color:var(--sub);}

.nowrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.nowchip{border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:12px; display:flex; align-items:center; gap:9px;}
.nowchip .dot{width:22px; height:22px; border-radius:6px; border:1px solid rgba(0,0,0,.12); flex:none;}
.nowchip b{display:block; font-size:12.5px;}
.nowchip .hx{color:var(--sub);}

/* ---- 도구 막대 ---- */
.toolbar{position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); padding:12px 0; margin-top:20px;}
.toolbar .in{max-width:var(--prose); margin:0 auto; padding:0 24px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.toolbar .lab{font-size:12px; font-weight:700; color:var(--sub);}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.seg button{background:transparent; border:0; padding:7px 14px; font-size:12.5px; font-weight:700; color:var(--sub); cursor:pointer; font-family:inherit;}
.seg button.on{background:var(--ink); color:var(--bg);}
/* 카드 방식 알약(밝은/중간/어두운)의 양 끝 버튼은 활성일 때도 바깥 모서리가 둥글게 — 어두운 카드(우측 끝) 포함 */
.seg:not(.seg-grid) button:first-child{border-radius:999px 0 0 999px;}
.seg:not(.seg-grid) button:last-child{border-radius:0 999px 999px 0;}
.seg button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
/* 버튼이 많은 세그먼트(데모 1~10·채팅 c1~c6)는 하나의 알약 대신 줄바꿈되는 작은 버튼들로 — 좁은 패널에서도 다 보인다. */
.seg-grid{display:flex; flex-wrap:wrap; gap:5px; border:0; border-radius:0; overflow:visible;}
.seg-grid button{border:1px solid var(--line); border-radius:8px; padding:6px 0; min-width:32px; text-align:center;}
.seg-grid button.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.toolbar .hint{font-size:11.5px; color:var(--sub); margin-left:auto;}

/* ---- 팔레트 ---- */
.plist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px;}
@media (max-width:820px){ .plist{grid-template-columns:1fr;} }
/* 표제어편집 패널이 열리면 본문이 360px 밀려서 2단 카드가 그만큼 좁아진다 — 1420px 화면에서도
   콘텐츠 폭이 ~1060px로 줄어 5번째 스와치가 카드 밖으로 잘렸다. 패널 열린 상태에선 뷰포트가
   1560px 이상일 때만 2단을 유지하고(그래야 콘텐츠 1200px 확보), 그 아래는 1단으로 내린다. */
@media (max-width:1560px){ body.ep-panel-open .plist{grid-template-columns:1fr;} }

/* 계열 전체에 해당하는 주의 — 목록 맨 위에 한 번만.
   20개 카드에 같은 경고를 반복하면 아무도 안 읽으므로 여기로 올린다. */
.modenote{grid-column:1/-1; background:#EEF4FA; border:1px solid #C8DBEC; border-radius:14px;
  padding:15px 18px; font-size:13px; line-height:1.75; color:#1F4A6B; display:flex; flex-direction:column; gap:8px;}
.modenote b{color:#0F3350;}
.modenote .hex{color:inherit;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .modenote{background:#182430; border-color:#2E4761; color:#BBD6EC;}
  :root:not([data-theme="light"]) .modenote b{color:#E4F1FB;}
}
:root[data-theme="dark"] .modenote{background:#182430; border-color:#2E4761; color:#BBD6EC;}
:root[data-theme="dark"] .modenote b{color:#E4F1FB;}

.pal{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card);}
.pal .ph{display:flex; align-items:baseline; gap:8px; padding:16px 18px 12px; flex-wrap:wrap;}
.pal .pno{font-size:11.5px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums;}
.pal .pname{font-size:15.5px; font-weight:800; cursor:text; border-radius:5px; padding:0 2px;}
.pal .pname:hover{background:var(--soft); color:var(--accent);}
/* 좋아요·즐겨찾기·공유 통계 바 (카드 제목 옆 + 우측 끝) */
.pstat{display:inline-flex; align-items:center; gap:7px; margin-left:auto;}
.pstat button{font-family:inherit; border:1px solid var(--line); background:var(--card); color:var(--sub);
  border-radius:999px; padding:3px 9px; font-size:11.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:4px; line-height:1;}
.pstat button:hover{border-color:var(--accent); color:var(--accent);}
.p-fav.on{background:#FFF3D6; border-color:#F0C24A; color:#B8860B;}
.p-like .p-h{font-size:12px;}
.p-like.on{background:#FDE7EC; border-color:#F0A6B6; color:#D14D69;}
.p-like.on .p-h{color:#D14D69;}
.p-lc,.p-vc{font-variant-numeric:tabular-nums;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .p-fav.on{background:#3A3016; border-color:#6A5518; color:#E7C765;}
  :root:not([data-theme="light"]) .p-like.on{background:#3A1F27; border-color:#6A3140; color:#F0A6B6;}
  :root:not([data-theme="light"]) .p-like.on .p-h{color:#F0A6B6;}
}
:root[data-theme="dark"] .p-fav.on{background:#3A3016; border-color:#6A5518; color:#E7C765;}
:root[data-theme="dark"] .p-like.on{background:#3A1F27; border-color:#6A3140; color:#F0A6B6;}
:root[data-theme="dark"] .p-like.on .p-h{color:#F0A6B6;}
/* 인라인 편집 중인 데모/목업 카드 표시 */
.editing{outline:2px dashed var(--accent); outline-offset:2px; cursor:text;}
/* 공유·저장 팝업 */
.ep-modal{position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.42); display:flex; align-items:center; justify-content:center; padding:24px;}
.ep-modal[hidden]{display:none;}
.epm-box{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:22px; width:min(320px,92vw); box-shadow:0 20px 50px rgba(0,0,0,.3);}
.epm-title{font-size:15px; font-weight:800; margin-bottom:14px;}
.epm-btns{display:flex; flex-direction:column; gap:9px;}
.epm-btns button{font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:12px; cursor:pointer; text-align:left;}
.epm-btns button:hover{border-color:var(--accent); color:var(--accent);}
.epm-close{margin-top:14px; width:100%; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--sub);
  background:transparent; border:1px solid var(--line); border-radius:10px; padding:9px; cursor:pointer;}
.epm-close:hover{border-color:var(--accent); color:var(--accent);}
/* 영문명은 항상 제 줄에 혼자 둔다 — 한글명이 길면 영문·배지가 제각각 줄바꿈돼
   카드마다 헤더 높이가 달라지고 좌우 카드가 밀렸다(예: "복숭아 씨앗 뉴트럴 / Peach Stone Neutrals").
   order로 flex 맨 뒤에 보내고 flex-basis:100%로 한 줄을 독점시키면 헤더가 항상 두 줄로 일정하다. */
.pal .pen{font-size:11.5px; color:var(--sub); order:99; flex-basis:100%; margin-top:-3px;}
.pal .badge{font-size:10.5px; font-weight:800; border-radius:999px; padding:3px 9px; white-space:nowrap;}
.badge.same{background:#FFF1EA; color:#C2410C;}
.badge.near{background:#F4F1EC; color:#8A6A4F;}
.badge.cool{background:#E9F3F6; color:#2A6F81;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge.same{background:#3A2A22; color:#FFB088;}
  :root:not([data-theme="light"]) .badge.near{background:#2E2A26; color:#D9BFA4;}
  :root:not([data-theme="light"]) .badge.cool{background:#1E2E33; color:#8FD3E4;}
}
:root[data-theme="dark"] .badge.same{background:#3A2A22; color:#FFB088;}
:root[data-theme="dark"] .badge.near{background:#2E2A26; color:#D9BFA4;}
:root[data-theme="dark"] .badge.cool{background:#1E2E33; color:#8FD3E4;}

/* 색을 표 뒤에 그라디언트로 따로 깔았더니, 그라디언트(소수점 계산)와 표 칸(정수 픽셀 반올림)의
   경계가 화면 크기에 따라 미묘하게 어긋났다 — 그래서 색과 글자를 같은 칸(td) 안에 두고
   한 번만 계산되게 합친다. 위아래 선은 표(border-collapse) 대신 감싸는 div에 그려서
   컬럼별로 갈라지는 문제를 피한다. */
.sw-wrap{position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
/* 5칸을 각 20%(1fr)로 나눈 그리드 — table-layout:fixed 대신 grid를 써서 화면 폭이 바뀌면
   5칸이 같이 20%씩 늘고 준다. minmax(0,1fr)은 글자가 길어도 칸이 밀려 커지지 않게 막는다. */
.sw{display:grid; grid-template-columns:repeat(5,minmax(0,1fr));}
.sw button{min-width:0; border:0; padding:0; cursor:pointer; font-family:inherit; background:transparent;
  appearance:none; -webkit-appearance:none; outline:none; text-align:inherit;}
.sw .chip{height:46px; display:block;}
/* 글자 박스(.meta)도 칩처럼 칸마다 따로 배경을 칠했었다 — 칸 경계가 반올림으로 어긋나면
   같은 색이라도(카드 배경과 동일한 var(--card)) 경계에서 미묘하게 이중으로 겹쳐 칠해지며
   선처럼 보일 수 있다. 그래서 배경은 아예 안 칠하고 카드(.pal) 배경이 그대로 비치게 둔다. */
.sw .meta{padding:9px 3px 11px; min-width:0; overflow:hidden; text-align:center;}
.sw .role{display:block; font-size:11.5px; font-weight:800; color:var(--sub); letter-spacing:.01em;}
/* HEX는 이 표의 본체다 — 옮겨 적을 수 있을 만큼은 커야 하고, 자간이 있어야 0/O·6/8이 구분된다. */
.sw .hex{display:block; font-size:13.5px; font-weight:800; color:var(--ink); margin-top:4px; letter-spacing:0; font-variant-numeric:tabular-nums;}
/* 호버 효과는 칸마다 색이 달라지면서 경계가 선처럼 보이게 만들어서 아예 없앤다. */
.sw button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}

/* ---- 미리보기 카드 ---- */
.prev{padding:18px;}
.demo{border-radius:14px; padding:18px 18px 16px; border:1px solid transparent;}
.demo .dnum{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.demo .dtitle{font-size:17px; font-weight:800; margin-top:6px; letter-spacing:-.01em;}
.demo .ddesc{font-size:12.5px; margin-top:8px; line-height:1.7;}
.demo .drow{display:flex; gap:11px; align-items:flex-start; margin-top:14px; padding-top:13px; border-top:1px solid;}
.demo .dbadge{flex:none; width:24px; height:24px; border-radius:50%; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;}
.demo .dst{font-size:13.5px; font-weight:700;}
.demo .dsd{font-size:12px; margin-top:3px; line-height:1.65;}
.demo .dcta{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.demo .btn1,.demo .btn2{font-size:12.5px; font-weight:700; border-radius:9px; padding:9px 15px; display:inline-block;}
.demo .btn2{background:transparent; border:1px solid;}
.demo .dfee{margin-top:14px; border-radius:10px; padding:11px 13px; display:flex; justify-content:space-between;
  align-items:baseline; gap:10px; flex-wrap:wrap; border:1px solid;}
.demo .dfee .l{font-size:11.5px; font-weight:600;}
.demo .dfee .v{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums;}

/* 데모 카드 템플릿 2~5 — 팔레트를 얹어볼 화면을 여러 형태로 둔다(1은 위 공통 .demo 스타일 그대로 사용) */
.tpl2 .t2-amount{font-size:30px; font-weight:800; margin-top:14px; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.tpl2 .t2-label{font-size:12px; margin-top:4px;}
.tpl2 .drow{border-bottom:1px solid transparent;}

.tpl3 .t3-field{margin-top:12px; border:1px solid; border-radius:9px; padding:11px 13px; font-size:12.5px;}

.tpl4 .drow:first-child{border-top:0; margin-top:0; padding-top:0;}
.tpl4 .drow{align-items:center;}
.tpl4 .t4-amt{margin-left:auto; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;}

.tpl5 .t5-row{display:flex; align-items:center; gap:12px;}
.tpl5 .t5-text{flex:1; min-width:0;}
.tpl5 .t5-badge{flex:none; font-size:12px; font-weight:800; border-radius:999px; padding:5px 12px;}

/* 6: 히어로 배너 — 가운데 정렬 큰 제목 + CTA */
.tpl-hero{text-align:center;}
.tpl-hero .h-title{font-size:20px; font-weight:800; margin-top:8px; letter-spacing:-.01em; line-height:1.25;}
.tpl-hero .ddesc{margin-top:8px;}
.tpl-hero .h-cta{margin-top:16px;}
.tpl-hero .btn1{font-size:12.5px; font-weight:700; border-radius:9px; padding:10px 20px; display:inline-block;}

/* 7: 통계 KPI — 큰 수치 + 라벨 + 배지 두 개 */
.tpl-kpi .k-big{font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1;}
.tpl-kpi .k-label{font-size:12px; margin-top:6px;}
.tpl-kpi .k-chips{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.tpl-kpi .k-chip{font-size:11.5px; font-weight:700; border-radius:999px; padding:5px 11px;}

/* 8: 요금제 — 플랜명 + 큰 가격 + 기능 목록 + CTA */
.tpl-price .p-price{font-size:30px; font-weight:800; margin-top:10px; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.tpl-price .p-feats{margin-top:14px; padding-top:13px; border-top:1px solid; display:flex; flex-direction:column; gap:9px;}
.tpl-price .p-feat{display:flex; align-items:center; gap:9px; font-size:12.5px;}
.tpl-price .p-dot{flex:none; width:7px; height:7px; border-radius:50%;}
.tpl-price .dcta{margin-top:16px;}
.tpl-price .btn1{font-size:12.5px; font-weight:700; border-radius:9px; padding:10px 16px; display:inline-block;}

/* 9: 프로필 카드 — 아바타 + 이름/역할 + 소개 + 버튼 */
.tpl-pcard .pc-top{display:flex; align-items:center; gap:12px;}
.tpl-pcard .pc-name{font-size:16px; font-weight:800;}
.tpl-pcard .pc-role{font-size:12px; margin-top:2px;}
.tpl-pcard .ddesc{margin-top:12px;}
.tpl-pcard .dcta{margin-top:14px;}

/* 10: 인용/리뷰 — 큰 따옴표 + 인용문 + 작성자 */
.tpl-quote .q-mark{font-size:38px; font-weight:800; line-height:.6; height:20px;}
.tpl-quote .q-text{font-size:15px; font-weight:700; line-height:1.5; margin-top:6px; letter-spacing:-.01em;}
.tpl-quote .q-by{display:flex; align-items:center; gap:10px; margin-top:14px;}
.tpl-quote .q-name{font-size:12.5px; font-weight:700;}
.tpl-quote .q-role{font-size:11.5px; margin-top:1px;}

/* ===== 채팅앱 화면 c1~c6 — 만든 폰 화면(360×780)처럼 세로로 긴 폰 목업. 배경 위에 폰이 놓인 모습 ===== */
.cscreen{padding:0; overflow:hidden; width:min(300px,96%); margin:0 auto; border-radius:26px;
  box-shadow:0 14px 36px rgba(0,0,0,.20); min-height:540px; display:flex; flex-direction:column;}
.c-fill{flex:1; min-height:0;}                       /* 헤더/입력창 사이를 채워 폰 비율을 만든다 */
.c-av{flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;}
.c-av.lg{width:52px; height:52px; font-size:19px;}
.c-av.xl{width:72px; height:72px; font-size:27px; border:3px solid var(--card);}
.c-head{flex:none; padding:14px 15px; border-bottom:1px solid;}
.c-head-row{display:flex; align-items:center; gap:10px;}
.c-htitle{font-size:16px; font-weight:800;}
.c-htitle.sm{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.c-cnt{font-size:12px; font-weight:600;}
.c-sec{padding:12px 15px 5px; font-size:11px; font-weight:700;}
.c-row{display:flex; align-items:center; gap:11px; padding:11px 15px; border-bottom:1px solid;}
.c-rtext{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.c-name{font-size:13.5px; font-weight:700;}
.c-sub{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.c-badge{flex:none; min-width:19px; height:19px; padding:0 6px; box-sizing:border-box; border-radius:999px; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
.c-body{padding:14px; display:flex; flex-direction:column; gap:8px;}
.c-body.c-fill{justify-content:flex-end;}            /* 채팅은 최신 메시지가 아래(입력창 근처)에 붙게 */
.c-date{display:flex; justify-content:center; margin-bottom:6px;}
.c-date span{border-radius:999px; padding:4px 12px; font-size:10.5px;}
.c-in{display:flex; justify-content:flex-start;}
.c-out{display:flex; justify-content:flex-end;}
.c-bub{max-width:80%; padding:9px 13px; font-size:12.5px; line-height:1.5; border-radius:16px; word-break:break-word;}
.c-other{border:1px solid; border-top-left-radius:4px;}
.c-mine{border-top-right-radius:4px;}
.c-gname{font-size:11px; margin:2px 0 -2px 2px;}
.c-input{flex:none; display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid;}
.c-field{flex:1; min-width:0; border-radius:999px; padding:9px 14px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.c-send{flex:none; border-radius:999px; padding:9px 15px; font-size:12px; font-weight:700; white-space:nowrap;}
/* c3 프로필 */
.tpl-c3{text-align:center;}
.tpl-c3 .pf-cover{flex:none; height:70px;}
.tpl-c3 .pf-av{margin-top:-38px; display:flex; justify-content:center;}
.tpl-c3 .pf-name{font-size:16px; font-weight:800; margin-top:8px;}
.tpl-c3 .pf-status{font-size:12px; margin-top:4px;}
.tpl-c3 .pf-stats{display:flex; margin:14px 16px 0; padding:12px 0; border:1px solid; border-radius:12px;}
.tpl-c3 .pf-stat{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;}
.tpl-c3 .pf-sv{font-size:15px; font-weight:800;}
.tpl-c3 .pf-sl{font-size:10.5px;}
.tpl-c3 .pf-bio{font-size:12px; margin-top:14px; padding:0 18px; line-height:1.6;}
.tpl-c3 .pf-tags{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:12px; padding:0 16px;}
.tpl-c3 .pf-tag{font-size:11px; border:1px solid; border-radius:999px; padding:5px 12px;}
.tpl-c3 .pf-cta{flex:none; display:flex; gap:8px; justify-content:center; padding:14px 16px; border-top:1px solid;}
.tpl-c3 .btn1,.tpl-c3 .btn2{flex:1; font-size:12.5px; font-weight:700; border-radius:9px; padding:11px 0;}
.tpl-c3 .btn2{border:1px solid; background:transparent;}
/* c5 설정 */
.tpl-c5 .st-me{flex:none; display:flex; align-items:center; gap:11px; padding:14px 15px; border-bottom:1px solid;}
.tpl-c5 .st-edit{flex:none; font-size:11px; font-weight:700; border:1px solid; border-radius:999px; padding:5px 11px;}
.tpl-c5 .st-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border-top:1px solid; font-size:13px; font-weight:600;}
.c-tg{flex:none; width:40px; height:23px; border-radius:999px; position:relative; display:inline-block;}
.c-tg .c-tg-k{position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; transition:left .18s;}
.c-tg.on .c-tg-k{left:20px;}

/* ===== 명함·쿠폰·네임택·상품권 — 실물 비율의 고급 목업. 배경 위에 카드가 떠 있는 모습(그림자). ===== */
.mock{margin:0 auto; overflow:hidden; position:relative; box-shadow:0 14px 34px rgba(0,0,0,.22);}
/* ---------- 명함 (90×54 가로) ---------- */
.bcard{width:min(340px,100%); aspect-ratio:90/54; border-radius:13px;}
.bcard .bc-logo{font-size:9.5px; font-weight:800; letter-spacing:.18em;}
.bcard .bc-nm{font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.1;}
.bcard .bc-tt{font-size:11px; font-weight:600; margin-top:3px;}
.bc1{display:flex;}
.bc1 .bc1-band{flex:none; width:14px;}
.bc1 .bc1-main{flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; justify-content:space-between;}
.bc1 .bc-ct{font-size:10.5px;}
.bc2{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px;}
.bc2 .bc2-logo{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; margin-bottom:12px;}
.bc2 .bc2-ct{margin-top:12px; padding-top:11px; border-top:1px solid; font-size:10px;}
.bc3{display:flex; flex-direction:column; justify-content:space-between; padding:18px 20px;}
.bc3 .bc3-ct{font-size:10.5px; padding-top:10px; border-top:1px solid;}
.bc4{display:flex; flex-direction:column;}
.bc4 .bc4-top{flex:1; padding:18px 20px; display:flex; flex-direction:column; justify-content:center;}
.bc4 .bc4-top .bc-nm{margin-top:8px;}
.bc4 .bc4-bar{flex:none; padding:11px 20px; font-size:10.5px; font-weight:600; font-variant-numeric:tabular-nums;}
/* ---------- 쿠폰 ---------- */
.coupon .cp-brand{font-size:9.5px; font-weight:800; letter-spacing:.14em;}
.coupon .cp-tt{font-size:13px; font-weight:800; margin-top:5px; line-height:1.35;}
.coupon .cp-code{display:inline-block; margin-top:10px; border:1px dashed; border-radius:7px; padding:5px 12px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.02em;}
.coupon .cp-exp{font-size:10.5px; margin-top:9px;}
.cp1{width:min(360px,100%); aspect-ratio:2/1; display:flex; border-radius:14px;}
.cp1 .cp1-l{flex:none; width:38%; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:2px dashed;}
.cp1 .cp1-off{font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:.9;}
.cp1 .cp1-off span{font-size:20px;}
.cp1 .cp1-offl{font-size:9.5px; font-weight:800; letter-spacing:.14em; margin-top:4px;}
.cp1 .cp1-r{flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; justify-content:center;}
.cp1 .cp1-notch{position:absolute; width:16px; height:16px; border-radius:50%; left:calc(38% - 8px);}
.cp1 .cp1-notch.t{top:-8px;} .cp1 .cp1-notch.b{bottom:-8px;}
.cp2{width:min(240px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column;}
.cp2 .cp2-top{flex:none; padding:9px; text-align:center; font-size:10px; font-weight:800; letter-spacing:.1em;}
.cp2 .cp2-body{flex:1; padding:18px; display:flex; flex-direction:column; justify-content:center; text-align:center;}
.cp2 .cp2-off{font-size:30px; font-weight:800; letter-spacing:-.02em;}
.cp2 .cp2-off span{font-size:14px; font-weight:700;}
.cp2 .cp2-dash{border-top:1px dashed; margin:14px 0;}
.cp3{width:min(360px,100%); aspect-ratio:2.2/1; display:flex; border-radius:14px;}
.cp3 .cp3-l{flex:none; width:36%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.cp3 .cp3-off{font-size:30px; font-weight:800; letter-spacing:-.02em;}
.cp3 .cp3-offl{font-size:9px; font-weight:800; letter-spacing:.14em; margin-top:3px; opacity:.9;}
.cp3 .cp3-r{flex:1; min-width:0; padding:16px 18px; display:flex; flex-direction:column; justify-content:center;}
.cp3 .cp3-notch{position:absolute; width:16px; height:16px; border-radius:50%; left:calc(36% - 8px);}
.cp3 .cp3-notch.t{top:-8px;} .cp3 .cp3-notch.b{bottom:-8px;}
/* cp4: 큰 가로 쿠폰 + QR */
.cp4{width:min(380px,100%); border-radius:14px; display:flex; flex-direction:column;}
.cp4 .cp4-head{padding:10px; text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.1em;}
.cp4 .cp4-body{display:flex; align-items:center; gap:16px; padding:18px 20px;}
.cp4 .cp4-left{flex:1; min-width:0;}
.cp4 .cp4-off{font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:.95;}
.cp4 .cp4-off span{font-size:22px;}
.cp4 .cp4-left .cp-tt{margin-top:6px;}
.cp4 .cp4-qr{flex:none; display:flex; flex-direction:column; align-items:center; gap:5px;}
.cp4 .cp4-qrl{font-size:9.5px; font-weight:600;}
/* cp5: 음료이용권 + 바코드 */
.cp5{width:min(300px,100%); border-radius:14px; display:flex; flex-direction:column; text-align:center;}
.cp5 .cp5-top{padding:16px; color:#fff;}
.cp5 .cp5-brand{font-size:10px; font-weight:800; letter-spacing:.14em; opacity:.9;}
.cp5 .cp5-kind{font-size:20px; font-weight:800; margin-top:5px; letter-spacing:-.01em;}
.cp5 .cp5-body{padding:18px 18px 20px;}
.cp5 .cp5-item{font-size:15px; font-weight:700;}
.cp5 .cp5-item b{font-weight:800;}
.cp5 .cp5-bc{margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:6px;}
.cp5 .cp5-no{font-size:11px; letter-spacing:.24em; font-variant-numeric:tabular-nums;}
/* QR·바코드 이미지(흰 바탕 코드) — 카드 색과 무관하게 스캔되는 느낌으로 흰 카드에 얹는다 */
/* 흰 배경 없이 투명 — 카드에 직접 인쇄된 것처럼. 색은 SVG에서 카드 글자색(ink)으로 그린다. */
.qrimg{display:block;}
.bcimg{display:block;}
/* ---------- 네임택 ---------- */
.nametag .nt-name{font-size:21px; font-weight:800; letter-spacing:-.01em;}
.nametag .nt-name.big{font-size:27px;}
.nametag .nt-sub{font-size:11.5px; margin-top:4px;}
.nt1{width:min(250px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column;}
.nt1 .nt1-hello{flex:none; padding:12px; text-align:center; font-size:12px; font-weight:600; letter-spacing:.02em;}
.nt1 .nt1-hello span{display:block; font-size:19px; font-weight:800; letter-spacing:.1em; margin-bottom:2px;}
.nt1 .nt1-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px;}
.nt2{width:min(250px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column;}
.nt2 .nt2-top{flex:none; padding:10px; text-align:center; font-size:9.5px; font-weight:800; letter-spacing:.1em;}
.nt2 .nt2-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px;}
.nt2 .nt-role{margin-top:14px; font-size:11px; font-weight:800; letter-spacing:.08em; border-radius:999px; padding:6px 16px;}
.nt3{width:min(230px,100%); aspect-ratio:2/3; border-radius:14px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 16px 20px;}
.nt3 .nt3-clip{width:44px; height:7px; border-radius:3px; margin-top:10px;}
.nt3 .nt3-hole{width:26px; height:10px; border:1px solid; border-radius:999px; margin-top:6px;}
.nt3 .nt3-band{align-self:stretch; margin:12px -16px 0; padding:6px; font-size:11px; font-weight:800; letter-spacing:.14em; text-align:center;}
.nt3 .nt3-ph{width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; margin:16px 0 12px;}
/* nt4: 행사 배지 + QR (세로) */
.nt4{width:min(240px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column;}
.nt4 .nt4-top{flex:none; padding:10px; text-align:center; font-size:9.5px; font-weight:800; letter-spacing:.1em;}
.nt4 .nt4-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px 16px; gap:3px;}
.nt4 .nt4-qr{margin:10px 0 8px;}
/* nt5: 사원증형 + 바코드 (가로, 좌측 강조 띠) */
.nt5{width:min(340px,100%); border-radius:14px; display:flex; overflow:hidden;}
.nt5 .nt5-side{flex:none; width:12px;}
.nt5 .nt5-main{flex:1; min-width:0; padding:16px 18px;}
.nt5 .nt5-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.nt5 .nt5-logo{font-size:10px; font-weight:800; letter-spacing:.14em;}
.nt5 .nt5-tag{flex:none; font-size:9px; font-weight:800; letter-spacing:.08em; border-radius:999px; padding:4px 10px;}
.nt5 .nt5-who{display:flex; align-items:center; gap:12px; margin:14px 0;}
.nt5 .nt5-ph{flex:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800;}
.nt5 .nt5-bc{display:flex; flex-direction:column; align-items:center; gap:5px;}
.nt5 .nt5-no{font-size:10px; letter-spacing:.2em; font-variant-numeric:tabular-nums;}
/* ---------- 상품권 · 포인트 카드 (뼈대 공유 — gv1~gv5와 pt1~pt5는 같은 레이아웃, 클래스만 다르다) ---------- */
.voucher .gv-brand, .point .gv-brand{font-size:10px; font-weight:800; letter-spacing:.14em;}
.voucher .gv-amt, .point .gv-amt{font-size:34px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.05; margin-top:6px;}
.voucher .gv-amt span, .point .gv-amt span{font-size:16px; font-weight:700; margin-left:2px;}
.voucher .gv-sub, .point .gv-sub{font-size:11.5px; margin-top:6px; line-height:1.5;}
.gv-tag{flex:none; font-size:9px; font-weight:800; border-radius:999px; padding:4px 10px; letter-spacing:.08em; display:inline-block;}
.gv1, .pt1{width:min(360px,100%); aspect-ratio:2/1; border-radius:14px; border:2px solid; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px;}
.gv1 .gv-ft, .pt1 .gv-ft{margin-top:12px; padding-top:11px; border-top:1px dashed; font-size:10px; font-variant-numeric:tabular-nums;}
.pt1 .gv-tag{margin-top:8px;}
.gv2, .pt2{width:min(360px,100%); aspect-ratio:2/1; border-radius:14px; display:flex;}
.gv2 .gv2-left, .pt2 .gv2-left{flex:none; width:42%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px;}
.gv2 .gv2-amt, .pt2 .gv2-amt{font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.gv2 .gv2-amt span, .pt2 .gv2-amt span{font-size:13px;}
.gv2 .gv2-tag, .pt2 .gv2-tag{font-size:8.5px; font-weight:800; letter-spacing:.12em; margin-top:5px; opacity:.9;}
.gv2 .gv2-right, .pt2 .gv2-right{flex:1; min-width:0; padding:16px 18px; display:flex; flex-direction:column; justify-content:center;}
.gv2 .gv-code, .pt2 .gv-code{font-size:10px; margin-top:8px; font-variant-numeric:tabular-nums;}
.gv2 .gv2-notch, .pt2 .gv2-notch{position:absolute; width:16px; height:16px; border-radius:50%; left:calc(42% - 8px);}
.gv2 .gv2-notch.t, .pt2 .gv2-notch.t{top:-8px;} .gv2 .gv2-notch.b, .pt2 .gv2-notch.b{bottom:-8px;}
.gv3, .pt3{width:min(360px,100%); aspect-ratio:2/1; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px;}
.gv3 .gv3-line, .pt3 .gv3-line{width:54%; height:1px; opacity:.4; margin:12px 0;}
.gv3 .gv3-ft, .pt3 .gv3-ft{font-size:10px; letter-spacing:.05em;}
/* gv4/pt4: 기프트카드·포인트카드 + 바코드 (가로) */
.gv4, .pt4{width:min(340px,100%); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column;}
.gv4 .gv4-top, .pt4 .gv4-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.gv4 .gv-amt, .pt4 .gv-amt{margin-top:10px;}
.gv4 .gv4-bc, .pt4 .gv4-bc{margin-top:14px; display:flex; flex-direction:column; align-items:center; gap:6px;}
.gv4 .gv4-no, .pt4 .gv4-no{font-size:11px; font-weight:600; letter-spacing:.18em; font-variant-numeric:tabular-nums;}
/* gv5/pt5: 세로 모바일 상품권·포인트카드 + QR */
.gv5, .pt5{width:min(240px,100%); border-radius:14px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 18px;}
.gv5 .gv5-qr, .pt5 .gv5-qr{margin:14px 0 12px;}
.gv5 .gv5-no, .pt5 .gv5-no{margin-top:12px; padding-top:12px; border-top:1px solid; font-size:10px; font-variant-numeric:tabular-nums; align-self:stretch;}

/* ---------- 사원증 (목걸이 구멍 + 사진자리) ---------- */
.idcard .id-nm{font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.15;}
.idcard .id-rl{font-size:11px; font-weight:700; margin-top:3px;}
.id1{width:min(220px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; text-align:center;}
/* 목걸이 구멍 — id1 외의 사원증도 같은 조각을 쓰므로 .idcard 공통으로 둔다(개별 클래스에 걸면 0크기로 사라짐). */
.idcard .id-hole{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:34px; height:7px; border-radius:999px; z-index:2;}
.id1 .id1-head{flex:none; padding:22px 10px 9px; font-size:9.5px; font-weight:800; letter-spacing:.16em;}
.id1 .id1-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 12px;}
.id1 .id-ph{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:800; margin-bottom:10px;}
.id1 .id-dp{font-size:10px; margin-top:4px;}
.id1 .id1-bc{flex:none; padding:0 12px 14px; display:flex; flex-direction:column; align-items:center; gap:4px;}
.id1 .id-no{font-size:9px; letter-spacing:.14em; font-variant-numeric:tabular-nums;}
.id2{width:min(340px,100%); aspect-ratio:90/54; border-radius:13px; display:flex; align-items:center; gap:16px; padding:18px 20px;}
.id2 .id2-ph{flex:none; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:25px; font-weight:800;}
.id2 .id2-main{flex:1; min-width:0;}
.id2 .id2-brand{font-size:9.5px; font-weight:800; letter-spacing:.16em; margin-bottom:6px;}
.id2 .id2-no{font-size:10px; margin-top:7px; font-variant-numeric:tabular-nums; letter-spacing:.06em;}
/* ---------- 티켓 ---------- */
.ticket .tk-ev{font-size:13px; font-weight:800; letter-spacing:.02em; line-height:1.3;}
.ticket .tk-dt{font-size:12.5px; font-weight:700; margin-top:8px; font-variant-numeric:tabular-nums;}
.ticket .tk-pl{font-size:11px; margin-top:4px;}
.tk1{width:min(380px,100%); aspect-ratio:2.4/1; border-radius:14px; display:flex;}
.tk1 .tk1-main{flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; justify-content:center;}
.tk1 .tk-no{font-size:10px; margin-top:9px; font-variant-numeric:tabular-nums; letter-spacing:.1em;}
.tk1 .tk1-stub{flex:none; width:30%; border-left:2px dashed; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px;}
.tk1 .tk1-seatl{font-size:8.5px; font-weight:800; letter-spacing:.16em;}
.tk1 .tk1-seat{font-size:15px; font-weight:800; margin-top:5px;}
.tk1 .tk1-notch{position:absolute; width:16px; height:16px; border-radius:50%; right:calc(30% - 8px);}
.tk1 .tk1-notch.t{top:-8px;} .tk1 .tk1-notch.b{bottom:-8px;}
.tk2{width:min(240px,100%); border-radius:14px; display:flex; flex-direction:column; text-align:center;}
.tk2 .tk2-head{flex:none; padding:13px 14px; font-size:11px; font-weight:800; letter-spacing:.08em; line-height:1.35;}
.tk2 .tk2-body{padding:16px 18px 20px; display:flex; flex-direction:column; align-items:center;}
.tk2 .tk2-qr{margin:14px 0 4px;}
.tk2 .tk2-no{margin-top:12px; padding-top:11px; border-top:1px dashed; font-size:10px; font-variant-numeric:tabular-nums; align-self:stretch; letter-spacing:.08em;}
/* ---------- 스탬프 적립카드 ---------- */
.stamp .st-brand{font-size:10px; font-weight:800; letter-spacing:.14em;}
.stamp .st-tt{font-size:13px; font-weight:800; margin-top:6px; line-height:1.35;}
.stamp .st-exp{font-size:10px; margin-top:11px; line-height:1.5;}
.st-grid{display:grid; gap:7px; margin-top:13px;}
.st-dot{aspect-ratio:1/1; border-radius:50%; border:1.5px dashed; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; font-variant-numeric:tabular-nums;}
.st-dot.on{border-style:solid;}
.st1{width:min(380px,100%); border-radius:14px; padding:18px 20px;}
.st1 .st1-grid{grid-template-columns:repeat(10,minmax(0,1fr));}
.st2{width:min(260px,100%); border-radius:14px; display:flex; flex-direction:column;}
.st2 .st2-head{flex:none; padding:11px 14px; text-align:center; font-size:10px; font-weight:800; letter-spacing:.14em;}
.st2 .st2-body{padding:16px 18px 20px;}
.st2 .st2-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
/* ---------- 영수증 (감열지 — 위아래 톱니) ---------- */
.receipt{width:min(230px,100%); padding:20px 18px; text-align:center; font-variant-numeric:tabular-nums;
  --tooth:8px;
  -webkit-mask:radial-gradient(var(--tooth) at 50% 0, #0000 98%, #000) 50% 0/16px 100% repeat-x,
    radial-gradient(var(--tooth) at 50% 100%, #0000 98%, #000) 50% 100%/16px 100% repeat-x, linear-gradient(#000,#000) 50%/100% calc(100% - 16px) no-repeat;
  mask:radial-gradient(var(--tooth) at 50% 0, #0000 98%, #000) 50% 0/16px 100% repeat-x,
    radial-gradient(var(--tooth) at 50% 100%, #0000 98%, #000) 50% 100%/16px 100% repeat-x, linear-gradient(#000,#000) 50%/100% calc(100% - 16px) no-repeat;}
.receipt .rc-brand{font-size:12px; font-weight:800; letter-spacing:.1em;}
.receipt .rc-addr{font-size:9px; margin-top:5px; line-height:1.55;}
.receipt .rc-sep{border-top:1px dashed; margin:11px 0;}
.receipt .rc-row{display:flex; align-items:baseline; gap:8px; font-size:10.5px; margin-top:5px; text-align:left;}
.receipt .rc-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.receipt .rc-qt{flex:none; width:16px; text-align:center;}
.receipt .rc-am{flex:none; font-weight:700;}
.receipt .rc-total{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:800;}
.receipt .rc-bc{margin-top:13px; display:flex; justify-content:center;}
.receipt .rc-no{font-size:9px; margin-top:7px; letter-spacing:.06em;}
.rc2 .rc2-item{font-size:11px; margin-bottom:8px;}
.rc2 .rc2-amt{font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.1;}
.rc2 .rc2-amt span{font-size:14px; font-weight:700; margin-left:2px;}
/* ---------- 제품 라벨 ---------- */
.label .lb-brand{font-size:9.5px; font-weight:800; letter-spacing:.18em;}
.label .lb-nm{font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.2;}
.lb1{width:min(190px,100%); aspect-ratio:3/4; border:2px solid; border-radius:10px; padding:20px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.lb1 .lb-line{width:34px; height:2px; margin:11px 0;}
.lb1 .lb-sub{font-size:10.5px; margin-top:8px; line-height:1.55;}
.lb1 .lb-vol{margin-top:14px; font-size:10px; font-weight:800; border-radius:999px; padding:5px 13px; letter-spacing:.06em;}
.lb2{width:min(320px,100%); aspect-ratio:16/9; border-radius:10px; display:flex; flex-direction:column;}
.lb2 .lb2-top{flex:1; padding:18px 20px; display:flex; flex-direction:column; justify-content:center;}
.lb2 .lb2-top .lb-nm{margin-top:7px;}
.lb2 .lb2-bar{flex:none; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10.5px;}
.lb2 .lb2-vol{flex:none; font-weight:800; letter-spacing:.04em;}

/* ================= 웹사이트 폼 f1~f10 ================= */
.form .f-title{font-size:16px; font-weight:800; letter-spacing:-.01em;}
.form .f-desc{font-size:12px; margin-top:6px; line-height:1.6;}
.form .f-lab{font-size:11px; font-weight:700; margin-bottom:5px;}
.form .f-fld{margin-top:12px;}
.form .f-inp{border:1px solid; border-radius:9px; padding:10px 12px; font-size:12.5px;}
.form .f-area{border:1px solid; border-radius:9px; padding:11px 12px; font-size:12.5px; min-height:60px; margin-top:4px;}
.form .f-btns{margin-top:14px;}
.form .btn1.f-wide{display:block; text-align:center; padding:11px 15px;}
.form .f-inline{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; font-size:11.5px;}
.form .f-check{display:flex; align-items:center; gap:7px; font-size:11.5px;}
.form .f-box{flex:none; width:16px; height:16px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;}
.form .f-box.off{border:1.5px solid; background:transparent;}
.form .f-link{font-weight:700;}
.form .f-alt{margin-top:13px; padding-top:12px; border-top:1px solid; font-size:11.5px; text-align:center;}
.form .f-2col{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.form .f-2col .f-fld{margin-top:12px;}
.f2 .f-terms{margin-top:14px; border:1px solid; border-radius:9px; padding:11px 12px; display:flex; flex-direction:column; gap:9px;}
.f2 .f-terms em{font-style:normal; font-size:10.5px;}
.f3 .f-search{display:flex; align-items:center; gap:8px; border:1px solid; border-radius:10px; padding:7px 8px 7px 12px; margin-top:12px;}
.f3 .f-si{font-size:15px;}
.f3 .f-sp{flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.f3 .f-sb{flex:none; font-size:11.5px; font-weight:700; border-radius:7px; padding:7px 13px;}
.f3 .f-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px;}
.f3 .f-chip{font-size:11px; font-weight:700; border:1px solid; border-radius:999px; padding:5px 11px;}
.f3 .f-chip.on{border-color:transparent;}
.form .f-cnt{margin-top:13px; padding-top:11px; border-top:1px solid; font-size:11.5px;}
.f5 .f-slots{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:4px;}
.f5 .f-slot{border:1px solid; border-radius:8px; padding:8px 4px; text-align:center; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;}
.f5 .f-slot.on{border-color:transparent;}
.f5 .f-sum{margin-top:12px; border:1px solid; border-radius:9px; padding:10px 13px; display:flex; justify-content:space-between; font-size:12px;}
.f6 .f-track{margin-top:13px; border:1px solid; border-radius:10px; padding:14px 12px; display:flex; justify-content:space-between; gap:4px;}
.f6 .f-step{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;}
.f6 .f-sdot{width:20px; height:20px; border-radius:50%; border:1.5px solid; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800;}
.f6 .f-sdot.on{border-color:transparent;}
.f6 .f-stxt{font-size:10px; font-weight:700;}
.form .f-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12px; padding:9px 0;}
.f6 .f-row{border-top:1px solid;}
.f6 .f-row + .f-row{border-top:0; padding-top:0;}
.f7 .f-stars{display:flex; align-items:center; gap:3px; margin-top:12px;}
.f7 .f-star{font-size:22px; line-height:1;}
.f7 .f-score{font-size:14px; font-weight:800; margin-left:8px;}
.f7 .f-area{margin-top:12px;}
.f7 .f-files{display:flex; gap:8px; margin-top:10px;}
.f7 .f-file{width:46px; height:46px; border:1.5px dashed; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px;}
.f8 .f-opts{margin-top:12px; display:flex; flex-direction:column; gap:8px;}
.f8 .f-opt{position:relative; border:1.5px solid; border-radius:9px; padding:11px 13px; display:flex; justify-content:space-between; gap:10px; overflow:hidden;}
.f8 .f-bar{position:absolute; left:0; top:0; bottom:0; z-index:0;}
.f8 .f-opt-t,.f8 .f-opt-p{position:relative; z-index:1; font-size:12px;}
.f8 .f-opt-p{font-weight:800; font-variant-numeric:tabular-nums;}
.f9 .f-pays{display:grid; grid-template-columns:repeat(3,1fr); gap:7px;}
.f9 .f-pay{border:1.5px solid; border-radius:9px; padding:10px 4px; text-align:center; font-size:11.5px; font-weight:700;}
.f9 .f-sums{margin-top:13px; padding-top:5px; border-top:1px solid;}
.f9 .f-sums .f-row{padding:6px 0;}
.f9 .f-total{margin-top:6px; padding-top:11px; border-top:1px solid; display:flex; justify-content:space-between; align-items:baseline; font-size:14px; font-weight:800;}
.f10 .f-otps{display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-top:14px;}
.f10 .f-otp{border:1.5px solid; border-radius:8px; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums;}
.f10 .f-hint{margin-top:11px; font-size:11.5px; text-align:center;}

/* ================= 웹사이트 섹션 sc1~sc10 ================= */
.sc1{padding:0 !important; overflow:hidden;}
.sc1 .sc1-bar{display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid;}
.sc1 .sc1-logo{font-size:12.5px; font-weight:800; letter-spacing:.06em;}
.sc1 .sc1-menu{flex:1; display:flex; gap:14px; font-size:11.5px; font-weight:600;}
.sc1 .sc1-cta{flex:none; font-size:11px; font-weight:700; border-radius:7px; padding:7px 13px;}
.sc1 .sc1-ghost{padding:26px 16px; text-align:center; font-size:11.5px;}
.sc2 .sc2-list{margin-top:12px;}
.sc2 .sc2-item{border-top:1px solid; padding:12px 0;}
.sc2 .sc2-q{display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:700;}
.sc2 .sc2-mk{flex:none; font-size:15px; font-weight:800; line-height:1;}
.sc2 .sc2-a{font-size:12px; margin-top:8px; line-height:1.65;}
.sc3{text-align:center;}
.sc3 .sc3-stars{font-size:15px; letter-spacing:.14em;}
.sc3 .sc3-quote{font-size:15.5px; font-weight:800; line-height:1.5; margin-top:10px; letter-spacing:-.01em;}
.sc3 .sc3-body{font-size:12px; margin-top:8px; line-height:1.7;}
.sc3 .sc3-who{margin-top:14px; padding-top:13px; border-top:1px solid; display:flex; align-items:center; justify-content:center; gap:10px;}
.sc3 .sc3-av{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}
.sc3 .sc3-who b{display:block; font-size:12.5px; text-align:left;}
.sc3 .sc3-who em{display:block; font-style:normal; font-size:11px; text-align:left;}
.sc4 .sc4-grid{display:grid; grid-template-columns:repeat(3,1fr);}
.sc4 .sc4-cell{text-align:center; padding:4px 6px;}
.sc4 .sc4-cell + .sc4-cell{border-left:1px solid var(--ln);}
.sc4 .sc4-v{font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.sc4 .sc4-l{font-size:11px; margin-top:5px;}
.sc5{text-align:center;}
.sc5 .sc5-t{font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.35;}
.sc5 .sc5-d{font-size:12.5px; margin-top:8px; line-height:1.6;}
.sc5 .sc5-cta{display:flex; gap:8px; justify-content:center; margin-top:15px; flex-wrap:wrap;}
.sc6 .sc6-top{display:flex; gap:18px;}
.sc6 .sc6-brand{flex:none; font-size:13px; font-weight:800; letter-spacing:.06em;}
.sc6 .sc6-cols{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; font-size:11px; line-height:1.9;}
.sc6 .sc6-h{font-weight:800; font-size:11.5px; margin-bottom:2px;}
.sc6 .sc6-bot{margin-top:16px; padding-top:13px; border-top:1px solid; font-size:10.5px;}
.sc7 .sc7-steps{margin-top:13px; display:flex; flex-direction:column; gap:14px; position:relative;}
.sc7 .sc7-step{display:flex; gap:12px; align-items:flex-start;}
.sc7 .sc7-n{flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800;}
.sc7 .sc7-t{font-size:13px; font-weight:700;}
.sc7 .sc7-d{font-size:11.5px; margin-top:3px; line-height:1.6;}
.sc8 .sc8-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; text-align:center;}
.sc8 .sc8-av{width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:800;}
.sc8 .sc8-nm{font-size:12.5px; font-weight:700; margin-top:8px;}
.sc8 .sc8-rl{font-size:10.5px; margin-top:2px; line-height:1.4;}
.sc9{padding:0 !important; overflow:hidden;}
.sc9 .sc9-thumb{height:96px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; letter-spacing:.14em;}
.sc9 .sc9-body{padding:15px 17px 16px;}
.sc9 .sc9-tag{display:inline-block; font-size:10px; font-weight:800; border-radius:999px; padding:4px 10px; letter-spacing:.06em;}
.sc9 .sc9-t{font-size:15px; font-weight:800; margin-top:9px; line-height:1.4; letter-spacing:-.01em;}
.sc9 .sc9-d{font-size:12px; margin-top:7px; line-height:1.65;}
.sc9 .sc9-meta{margin-top:12px; padding-top:11px; border-top:1px solid; font-size:10.5px;}
.sc10 .sc10-t{display:flex; gap:11px; align-items:flex-start; border:1.5px solid; border-radius:10px; padding:11px 13px; margin-top:9px;}
.sc10 .sc10-i{flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;}
.sc10 .sc10-tt{font-size:12.5px; font-weight:700;}
.sc10 .sc10-dd{font-size:11px; margin-top:3px; line-height:1.55;}

/* ===== 명함 5~7 ===== */
.bc5{width:min(210px,100%); aspect-ratio:54/90; display:flex; flex-direction:column; text-align:center;}
.bc5 .bc5-top{flex:none; padding:14px 10px; font-size:9.5px; font-weight:800; letter-spacing:.16em;}
.bc5 .bc5-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px;}
.bc5 .bc5-ct{flex:none; padding:11px 10px; border-top:1px solid; font-size:9.5px;}
.bc6{display:flex;}
.bc6 .bc6-l{flex:none; width:42%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
.bc6 .bc6-ini{font-size:26px; font-weight:800;}
.bc6 .bc6-brand{font-size:8px; font-weight:800; letter-spacing:.14em; opacity:.85;}
.bc6 .bc6-r{flex:1; min-width:0; padding:16px 16px; display:flex; flex-direction:column; justify-content:center;}
.bc6 .bc6-ct{margin-top:10px; padding-top:9px; border-top:1px solid; font-size:9.5px;}
.bc7{display:flex; align-items:center; gap:12px; padding:16px 18px;}
.bc7 .bc7-l{flex:1; min-width:0;}
.bc7 .bc7-ct{font-size:9.5px; margin-top:8px;}
.bc7 .bc7-qr{flex:none;}
/* ===== 데모 11~12 ===== */
.tpl11 .t11-row{display:flex; align-items:baseline; gap:8px; margin-top:12px;}
.tpl11 .t11-v{font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.tpl11 .t11-l{font-size:11.5px;}
.tpl11 .t11-track{height:8px; border-radius:999px; overflow:hidden; margin:10px 0 10px;}
.tpl11 .t11-track span{display:block; height:100%; border-radius:999px;}
.tpl12{display:flex; gap:16px;}
.tpl12 .t12-l{flex:1; min-width:0;}
.tpl12 .t12-r{flex:none; width:38%; border:1px solid; border-radius:12px; padding:16px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.tpl12 .t12-v{font-size:28px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.tpl12 .t12-lab{font-size:10.5px; margin-top:5px; line-height:1.5;}
/* ===== 채팅 7~12 ===== */
.cscreen .c-srch{margin:10px 12px 0; border-radius:999px; padding:9px 14px; font-size:12px;}
.cscreen .c-noti{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-bottom:1px solid;}
.cscreen .c-dot{flex:none; width:8px; height:8px; border-radius:50%; margin-top:5px;}
.cscreen .c-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:10px;}
.cscreen .c-ph{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border-radius:6px; font-size:9px; font-weight:800; letter-spacing:.08em;}
.cscreen .c-av.lg{width:64px; height:64px; font-size:26px;}
.cscreen .c-av.xl{width:88px; height:88px; font-size:34px;}
.cscreen .c-pfc{display:flex; justify-content:center; padding:18px 0 8px;}
.cscreen .c-fld{display:flex; align-items:baseline; gap:10px; padding:12px 14px; border-bottom:1px solid;}
.cscreen .c-fl{flex:none; width:64px; font-size:11px; font-weight:700;}
.cscreen .c-fv{flex:1; min-width:0; font-size:12.5px;}
.cscreen .c-send.wide{flex:1; text-align:center;}
.cscreen .c-quote{display:inline-block; border-left:3px solid; padding:4px 10px; font-size:11px;
  max-width:78%; text-align:left; margin-bottom:4px;}
.cscreen .c-time{text-align:right; font-size:10px; margin-top:4px;}
.c9{display:flex; flex-direction:column; justify-content:space-between;}
.c9 .c9-mid{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;}
.c9 .c9-nm{font-size:20px; font-weight:800;}
.c9 .c9-st{font-size:11.5px; font-variant-numeric:tabular-nums;}
.c9 .c9-btns{display:flex; justify-content:center; gap:14px; padding:22px 0 26px;}
.c9 .c9-b{width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px;}
.c9 .c9-b.end{font-weight:800;}
/* ===== 상품권 8~12 ===== */
.gv8{width:min(220px,100%); border-radius:14px; display:flex; flex-direction:column; text-align:center;}
.gv8 .gv8-head{flex:none; padding:11px; font-size:10px; font-weight:800; letter-spacing:.14em;}
.gv8 .gv8-body{padding:20px 16px;}
.gv9{width:min(360px,100%); aspect-ratio:2.2/1; border-radius:14px; display:flex; align-items:center;}
.gv9 .gv9-l{flex:1; min-width:0; padding:0 18px;}
.gv9 .gv9-r{flex:none; padding:0 16px; border-left:2px dashed; display:flex; align-items:center;}
.gv10{width:min(340px,100%); aspect-ratio:2/1; border-radius:14px; padding:9px;}
.gv10 .gv10-in{height:100%; border:2px dashed; border-radius:10px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:10px;}
.gv11{width:min(360px,100%); aspect-ratio:2.4/1; border-radius:14px; display:flex;}
.gv11 .gv11-side{flex:none; width:36px; display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; font-size:10px; font-weight:800; letter-spacing:.18em;}
.gv11 .gv11-body{flex:1; min-width:0; padding:14px 18px; display:flex; flex-direction:column; justify-content:center;}
.gv12{width:min(230px,100%); border-radius:14px; text-align:center; padding:18px 16px 14px;}
.gv12 .gv12-cut{margin:14px 0 10px; border-top:2px dashed;}
.gv12 .gv12-no{font-size:10px; font-variant-numeric:tabular-nums;}
.gv12 .gv12-notch{position:absolute; width:14px; height:14px; border-radius:50%; top:calc(100% - 62px);}
.gv12 .gv12-notch.l{left:-7px;} .gv12 .gv12-notch.r{right:-7px;}
/* ===== 포인트 8~12 ===== */
.point .gv-amt.sm{font-size:20px; margin-top:0;}
.point .gv-amt.sm span{font-size:11px;}
.pt8{width:min(220px,100%); border-radius:14px; display:flex; flex-direction:column; text-align:center;}
.pt8 .pt8-head{flex:none; padding:10px; font-size:9.5px; font-weight:800; letter-spacing:.14em;}
.pt8 .pt8-body{padding:20px 16px;}
.pt9{width:min(360px,100%); aspect-ratio:2.2/1; border-radius:14px; display:flex; align-items:center;}
.pt9 .pt9-l{flex:1; min-width:0; padding:0 18px;}
.pt9 .pt9-r{flex:none; padding:0 16px; border-left:2px dashed; display:flex; align-items:center;}
.pt10{width:min(340px,100%); border-radius:14px; padding:16px 18px;}
.pt10 .pt10-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.pt10 .pt10-grid{grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:12px;}
.pt11{width:min(340px,100%); aspect-ratio:90/54; border-radius:13px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:18px;}
.pt11 .pt11-ft{margin-top:12px; padding-top:10px; border-top:1px solid; font-size:10.5px; align-self:stretch;}
.pt12{width:min(340px,100%); border-radius:13px; padding:16px 18px;}
.pt12 .pt12-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.pt12 .pt12-bc{margin-top:13px; display:flex; justify-content:center;}
/* ===== 사원증 8~12 ===== */
.id8{width:min(340px,100%); aspect-ratio:90/54; border-radius:13px; display:flex; flex-direction:column;}
.id8 .id8-body{flex:1; display:flex; align-items:center; gap:14px; padding:0 18px;}
.id8 .id8-ph{flex:none; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:800;}
.id8 .id8-bar{flex:none; padding:9px 18px; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums;}
.id9{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px 14px 14px;}
.id9 .id9-brand{font-size:9.5px; font-weight:800; letter-spacing:.16em; margin-bottom:12px;}
.id9 .id9-nm{font-size:23px; font-weight:800;}
.id9 .id9-no{margin-top:14px; font-size:9.5px; font-weight:800; border-radius:999px; padding:4px 11px; font-variant-numeric:tabular-nums;}
.id10{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; text-align:center;}
.id10 .id10-ph{flex:none; height:42%; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:800;}
.id10 .id10-body{flex:1; padding:12px 12px 0; display:flex; flex-direction:column; justify-content:center;}
.id10 .id10-bc{padding:0 12px 14px; display:flex; justify-content:center;}
.id11{width:min(340px,100%); aspect-ratio:90/54; border-radius:13px; display:flex; align-items:center; gap:12px; padding:16px 18px;}
.id11 .id11-l{flex:1; min-width:0;}
.id11 .id11-brand{font-size:9.5px; font-weight:800; letter-spacing:.16em; margin-bottom:6px;}
.id11 .id11-no{font-size:10px; margin-top:6px; font-variant-numeric:tabular-nums;}
.id11 .id11-qr{flex:none;}
.id12{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; text-align:center;}
.id12 .id12-head{flex:none; padding:22px 10px 12px;}
.id12 .id12-brand{font-size:9.5px; font-weight:800; letter-spacing:.16em;}
.id12 .id12-body{flex:1; padding:14px 12px; display:flex; flex-direction:column; justify-content:center;}
.id12 .id12-dp{font-size:10px; margin-top:7px;}
/* ===== 명함 8~12 ===== */
.bc8{display:flex; flex-direction:column;}
.bc8 .bc8-band{flex:none; height:12px;}
.bc8 .bc8-body{flex:1; padding:16px 18px; display:flex; flex-direction:column; justify-content:center;}
.bc8 .bc8-ct{margin-top:10px; font-size:9.5px;}
.bc9{display:flex; flex-direction:column;}
.bc9 .bc9-top{flex:1; padding:16px 18px; display:flex; flex-direction:column; justify-content:center;}
.bc9 .bc9-bar{flex:none; padding:9px 18px; font-size:9.5px; font-weight:600;}
.bc10{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px;}
.bc10 .bc10-line{width:42px; height:2px; margin:9px 0;}
.bc10 .bc10-ct{margin-top:9px; font-size:9.5px;}
.bc11 .bc11-tri{position:absolute; top:0; left:0; width:78px; height:78px;
  clip-path:polygon(0 0,100% 0,0 100%);}
.bc11{display:flex;}
.bc11 .bc11-body{flex:1; padding:16px 18px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; z-index:1;}
.bc11 .bc11-ct{margin-top:9px; padding-top:8px; border-top:1px solid; font-size:9.5px;}
.bc12{width:min(210px,100%); aspect-ratio:54/90; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 14px;}
.bc12 .bc12-ini{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; margin-bottom:12px;}
.bc12 .bc12-ct{margin-top:12px; padding-top:10px; border-top:1px solid; font-size:9px; align-self:stretch;}
/* ===== 쿠폰 8~12 ===== */
.cp8{width:min(230px,100%); border-radius:14px; display:flex; flex-direction:column; text-align:center;}
.cp8 .cp8-head{flex:none; padding:10px; font-size:10px; font-weight:800; letter-spacing:.12em;}
.cp8 .cp8-body{padding:18px 16px;}
.cp8 .cp8-off{font-size:40px; font-weight:800; line-height:.95; letter-spacing:-.03em;}
.cp8 .cp8-off span{font-size:19px;}
.cp9{width:min(340px,100%); aspect-ratio:2.4/1; border-radius:14px; display:flex;}
.cp9 .cp9-side{flex:none; width:34px; display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; font-size:9.5px; font-weight:800; letter-spacing:.16em;}
.cp9 .cp9-body{flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; justify-content:center;}
.cp9 .cp9-off{font-size:30px; font-weight:800; line-height:1; letter-spacing:-.02em;}
.cp9 .cp9-off span{font-size:15px;}
.cp10{width:min(330px,100%); aspect-ratio:2/1; border-radius:14px; padding:9px;}
.cp10 .cp10-in{height:100%; border:2px dashed; border-radius:10px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:10px;}
.cp10 .cp10-off{font-size:34px; font-weight:800; line-height:1; letter-spacing:-.03em; margin:5px 0 4px;}
.cp10 .cp10-off span{font-size:17px;}
.cp11{width:min(340px,100%); aspect-ratio:2.4/1; border-radius:14px; display:flex;}
.cp11 .cp11-l{flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; justify-content:center;}
.cp11 .cp11-off{font-size:30px; font-weight:800; line-height:1; letter-spacing:-.02em; margin:4px 0;}
.cp11 .cp11-off span{font-size:15px;}
.cp11 .cp11-r{flex:none; width:34%; border-left:2px dashed; display:flex; align-items:center; justify-content:center; padding:8px;}
.cp11 .cp11-code{font-size:12px; font-weight:800; letter-spacing:.06em; text-align:center;}
.cp12{width:min(190px,100%); aspect-ratio:3/4; border:2px solid; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px 14px 16px;}
.cp12 .cp12-hole{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; border:2px solid;}
.cp12 .cp12-off{font-size:36px; font-weight:800; line-height:1; letter-spacing:-.03em;}
.cp12 .cp12-off span{font-size:18px;}
/* ===== 네임택 8~12 ===== */
.nt8{width:min(300px,100%); aspect-ratio:3/1; border-radius:11px; display:flex; align-items:center; gap:12px; padding:0 16px;}
.nt8 .nt8-ini{flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:800;}
.nt8 .nt8-m{flex:1; min-width:0;}
.nt8 .nt8-nm{font-size:19px; font-weight:800;}
.nt8 .nt8-org{font-size:10px; margin-top:2px;}
.nt9{width:min(220px,100%); aspect-ratio:3/4; border-radius:12px; display:flex; flex-direction:column; text-align:center;}
.nt9 .nt9-head{flex:none; padding:10px; font-size:9.5px; font-weight:800; letter-spacing:.14em;}
.nt9 .nt9-body{flex:1; display:flex; align-items:center; justify-content:center;}
.nt9 .nt9-nm{font-size:28px; font-weight:800; letter-spacing:-.01em;}
.nt10{width:min(220px,100%); aspect-ratio:3/4; border-radius:12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:18px;}
.nt10 .nt10-org{font-size:9.5px; font-weight:800; letter-spacing:.14em;}
.nt10 .nt10-nm{font-size:28px; font-weight:800; margin:10px 0;}
.nt10 .nt10-line{width:46px; height:2px;}
.nt11{width:min(220px,100%); border-radius:12px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:18px 14px;}
.nt11 .nt11-ev{font-size:9px; font-weight:800; letter-spacing:.12em; line-height:1.4;}
.nt11 .nt11-nm{font-size:22px; font-weight:800; margin:8px 0 12px;}
.nt12{width:min(210px,100%); aspect-ratio:54/86; border-radius:12px; display:flex; flex-direction:column; text-align:center;}
.nt12 .nt12-hole{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:32px; height:7px; border-radius:999px;}
.nt12 .nt12-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 12px 8px;}
.nt12 .nt12-nm{font-size:22px; font-weight:800;}
.nt12 .nt12-org{font-size:10px; margin-top:4px;}
.nt12 .nt12-bar{flex:none; padding:8px; font-size:9.5px; font-weight:800; letter-spacing:.12em;}
/* ===== 쿠폰 6~7 ===== */
.cp6{width:min(230px,100%); aspect-ratio:1/1; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center;}
.cp6 .cp6-ring{width:86%; height:86%; border:2px dashed; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px;}
.cp6 .cp6-off{font-size:38px; font-weight:800; line-height:.95; letter-spacing:-.03em;}
.cp6 .cp6-off span{font-size:19px;}
.cp6 .cp6-tt{font-size:11.5px; font-weight:700; margin-top:6px;}
.cp6 .cp6-exp{font-size:9.5px; margin-top:5px;}
.cp7{width:min(200px,100%); border-radius:14px; display:flex; flex-direction:column; text-align:center;}
.cp7 .cp7-body{padding:20px 16px 14px;}
.cp7 .cp7-off{font-size:42px; font-weight:800; line-height:.95; letter-spacing:-.03em; margin:8px 0 4px;}
.cp7 .cp7-off span{font-size:20px;}
.cp7 .cp7-bc{border-top:1px dashed; padding:12px 10px 14px;}
/* ===== 네임택 6~7 ===== */
.nt6{width:min(300px,100%); aspect-ratio:3/1; border-radius:11px; display:flex; align-items:center;}
.nt6 .nt6-band{flex:none; width:12px; height:100%;}
.nt6 .nt6-main{flex:1; min-width:0; padding:0 18px;}
.nt6 .nt6-nm{font-size:20px; font-weight:800; letter-spacing:-.01em;}
.nt6 .nt6-org{font-size:10.5px; margin-top:3px;}
.nt7{width:min(220px,100%); aspect-ratio:1/1; border-radius:50%; border:3px solid; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px;}
.nt7 .nt7-ev{font-size:9px; font-weight:800; letter-spacing:.12em; line-height:1.4;}
.nt7 .nt7-nm{font-size:24px; font-weight:800; margin:9px 0 10px; letter-spacing:-.01em;}
.nt7 .nt7-role{font-size:9px; font-weight:800; letter-spacing:.1em; border-radius:999px; padding:4px 13px;}
/* ===== 상품권 6~7 ===== */
.gv6{width:min(320px,100%); border-radius:12px; display:flex; flex-direction:column; text-align:center;}
.gv6 .gv6-flap{flex:none; padding:16px 12px; font-size:10px; font-weight:800; letter-spacing:.16em;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);}
.gv6 .gv6-body{padding:6px 18px 22px;}
.gv7{width:min(210px,100%); border-radius:14px; display:flex; flex-direction:column; text-align:center;}
.gv7 .gv7-body{padding:22px 16px 18px;}
.gv7 .gv7-bar{padding:11px 12px; font-size:10px; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums;}
/* ===== 포인트 6~7 ===== */
.pt6{width:min(340px,100%); aspect-ratio:90/54; border-radius:13px; display:flex; align-items:center; gap:16px; padding:18px 20px;}
.pt6 .pt6-ring{flex:none; width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.pt6 .pt6-in{width:58px; height:58px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.pt6 .pt6-in b{font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;}
.pt6 .pt6-in em{font-style:normal; font-size:9px; margin-top:2px;}
.pt6 .pt6-side{flex:1; min-width:0;}
.pt6 .pt6-nm{font-size:16px; font-weight:800; margin-top:5px;}
.pt6 .pt6-no{font-size:10px; margin-top:4px; font-variant-numeric:tabular-nums;}
.pt7{width:min(340px,100%); border-radius:13px; padding:18px 20px;}
.pt7 .pt7-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.pt7 .pt7-track{height:7px; border-radius:999px; overflow:hidden; margin-top:12px;}
.pt7 .pt7-track span{display:block; height:100%; border-radius:999px;}
.pt7 .pt7-ft{font-size:10.5px; margin-top:8px;}
/* ===== 사원증 3~7 ===== */
.id3{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; text-align:center;}
.id3 .id3-ph{flex:none; height:46%; display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:800;}
.id3 .id3-body{flex:1; padding:12px 12px 14px; display:flex; flex-direction:column; justify-content:center;}
.id3 .id3-no{margin-top:9px; padding-top:9px; border-top:1px solid; font-size:9px; font-variant-numeric:tabular-nums;}
.id4{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:22px 14px 14px;}
.id4 .id4-head{font-size:9.5px; font-weight:800; letter-spacing:.16em; margin-bottom:10px;}
.id4 .id4-qr{margin:12px 0 8px;}
.id4 .id4-no{font-size:9px; letter-spacing:.12em; font-variant-numeric:tabular-nums;}
.id5{width:min(340px,100%); aspect-ratio:90/54; border-radius:13px; display:flex; flex-direction:column;}
.id5 .id5-bar{flex:none; padding:9px 18px; font-size:9.5px; font-weight:800; letter-spacing:.16em;}
.id5 .id5-body{flex:1; display:flex; align-items:center; gap:14px; padding:0 18px;}
.id5 .id5-ph{flex:none; width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800;}
.id5 .id5-no{font-size:10px; margin-top:5px; font-variant-numeric:tabular-nums;}
.id6{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; border:3px solid; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:22px 14px 14px;}
.id6 .id6-tag{font-size:9px; font-weight:800; letter-spacing:.14em; border-radius:999px; padding:5px 14px; margin-bottom:14px;}
.id6 .id6-ft{margin-top:auto; padding-top:11px; border-top:1px solid; font-size:9px; align-self:stretch;}
.id7{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:22px 14px 14px;}
.id7 .id7-brand{font-size:9px; font-weight:800; letter-spacing:.16em;}
.id7 .id7-ph{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; margin:12px 0 10px;}
.id7 .id7-no{margin-top:12px; padding-top:10px; border-top:1px solid; font-size:9px; align-self:stretch; font-variant-numeric:tabular-nums;}
/* ===== 티켓 3~7 ===== */
.tk3{width:min(340px,100%); aspect-ratio:2.6/1; border-radius:12px; display:flex;}
.tk3 .tk3-l{flex:none; width:28%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.tk3 .tk3-d{font-size:28px; font-weight:800; line-height:1;}
.tk3 .tk3-m{font-size:10px; font-weight:800; letter-spacing:.14em; margin-top:3px;}
.tk3 .tk3-r{flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; justify-content:center;}
.tk4{width:min(230px,100%); border-radius:12px; display:flex; flex-direction:column; text-align:center;}
.tk4 .tk4-stub{padding:16px 16px 13px; border-bottom:2px dashed;}
.tk4 .tk4-body{padding:14px 16px 18px;}
.tk4 .tk4-bc{margin:12px 0 6px; display:flex; justify-content:center;}
.tk4 .tk4-no{font-size:9.5px; letter-spacing:.1em; font-variant-numeric:tabular-nums;}
.tk4 .tk4-notch{position:absolute; width:14px; height:14px; border-radius:50%; top:calc(28% - 7px);}
.tk4 .tk4-notch.l{left:-7px;} .tk4 .tk4-notch.r{right:-7px;}
.tk5{width:min(320px,100%); aspect-ratio:2.2/1; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px;}
.tk5 .tk5-tag{font-size:8.5px; font-weight:800; letter-spacing:.18em; border:1px solid; border-radius:999px; padding:4px 12px;}
.tk5 .tk5-ev{font-size:17px; font-weight:800; margin-top:10px; letter-spacing:-.01em; line-height:1.3;}
.tk5 .tk5-dt{font-size:11.5px; margin-top:6px;}
.tk5 .tk5-ft{margin-top:11px; padding-top:9px; border-top:1px solid; font-size:10px; align-self:stretch;}
.tk6{width:min(380px,100%); aspect-ratio:2.6/1; border-radius:12px; display:flex;}
.tk6 .tk6-l{flex:1; min-width:0; padding:15px 18px; display:flex; flex-direction:column; justify-content:center;}
.tk6 .tk6-lab{font-size:8.5px; font-weight:800; letter-spacing:.16em;}
.tk6 .tk6-row{display:flex; gap:20px; margin-top:10px;}
.tk6 .tk6-row em{display:block; font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.14em;}
.tk6 .tk6-row b{display:block; font-size:12px; margin-top:2px; font-variant-numeric:tabular-nums;}
.tk6 .tk6-r{flex:none; width:30%; border-left:2px dashed; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px;}
.tk6 .tk6-seat{font-size:22px; font-weight:800; margin-top:5px;}
.tk6 .tk6-no{font-size:9px; margin-top:6px; font-variant-numeric:tabular-nums;}
.tk7{width:min(320px,100%); border-radius:12px; display:flex; align-items:center; gap:14px; padding:15px 17px;}
.tk7 .tk7-qr{flex:none;}
.tk7 .tk7-main{flex:1; min-width:0;}
/* ===== 스탬프 3~7 ===== */
.st3{width:min(250px,100%); border:2px solid; border-radius:14px; padding:18px; text-align:center;}
.st3 .st3-grid{grid-template-columns:repeat(3,minmax(0,1fr)); margin:14px 0 12px;}
.st4{width:min(320px,100%); border-radius:14px; padding:16px 18px 18px;}
.st4 .st4-top{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:11px; border-bottom:1px solid;}
.st4 .st4-cnt{font-size:10px; font-weight:800; border-radius:999px; padding:4px 10px; font-variant-numeric:tabular-nums;}
.st4 .st4-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
.st5{width:min(300px,100%); border-radius:14px; padding:20px 18px; text-align:center;}
.st5 .st5-grid{grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:14px;}
.st6{width:min(210px,100%); border-radius:14px; padding:18px 16px; text-align:center;}
.st6 .st6-grid{grid-template-columns:repeat(2,minmax(0,1fr)); margin:12px 0 14px;}
.st6 .st6-bc{padding-top:12px; border-top:1px solid; display:flex; justify-content:center;}
.st7{width:min(320px,100%); border-radius:14px; padding:18px 20px;}
.st7 .st7-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.st7 .st7-n{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums;}
.st7 .st7-n em{font-style:normal; font-size:12px; font-weight:700;}
.st7 .st7-track{height:9px; border-radius:999px; overflow:hidden; margin:11px 0 12px;}
.st7 .st7-track span{display:block; height:100%; border-radius:999px;}
/* ===== 영수증 3~7 (rc3·rc4는 톱니 없는 카드형) ===== */
.rc3,.rc4{-webkit-mask:none; mask:none; border-radius:12px; padding:0; width:min(260px,100%);}
.rc3 .rc3-head{padding:12px; text-align:center; font-size:11px; font-weight:800; letter-spacing:.12em;}
.rc3 .rc3-body{padding:16px 18px 18px;}
.rc4{padding:18px 18px 16px; text-align:left;}
.rc4 .rc4-title{font-size:13px; font-weight:800; letter-spacing:.3em; text-align:center; padding-bottom:11px; border-bottom:2px solid;}
.rc4 .rc4-r{display:flex; justify-content:space-between; gap:10px; font-size:11px; padding:8px 0; border-top:1px solid;}
.rc4 .rc-no{text-align:center;}
.rc5{text-align:center;}
.rc5 .rc5-ic{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; margin:0 auto 12px;}
.rc5 .rc5-t{font-size:13px; font-weight:700;}
.rc5 .rc5-amt{font-size:28px; font-weight:800; margin-top:8px; letter-spacing:-.02em;}
.rc5 .rc5-amt span{font-size:14px; font-weight:700; margin-left:2px;}
.rc6 .rc6-qr{margin:14px 0 8px; display:flex; justify-content:center;}
/* ===== 제품 라벨 3~7 ===== */
.lb3{width:min(190px,100%); aspect-ratio:1/1; border-radius:50%; border:2px solid; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px;}
.lb3 .lb3-nm{font-size:17px; font-weight:800; margin:8px 0 6px; letter-spacing:-.01em; line-height:1.25;}
.lb3 .lb3-vol{font-size:10px;}
.lb4{width:min(300px,100%); aspect-ratio:3/1; border-radius:8px; display:flex; align-items:center;}
.lb4 .lb4-band{flex:none; width:10px; height:100%;}
.lb4 .lb4-main{flex:1; min-width:0; padding:0 16px;}
.lb4 .lb4-sub{font-size:10px; margin-top:4px;}
.lb5{width:min(190px,100%); border-radius:8px; padding:18px 16px 14px; text-align:center;}
.lb5 .lb-sub{margin-bottom:12px;}
.lb5 .lb5-bc{padding-top:12px; border-top:1px solid; display:flex; flex-direction:column; align-items:center; gap:5px;}
.lb5 .lb5-vol{font-size:10px; font-weight:700;}
.lb6{width:min(170px,100%); aspect-ratio:2/3; border:1.5px solid; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px 14px 16px;
  clip-path:polygon(0 8%,50% 0,100% 8%,100% 100%,0 100%);}
.lb6 .lb6-hole{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:12px; height:12px; border-radius:50%; border:1.5px solid;}
.lb6 .lb-nm{margin-top:7px;}
.lb6 .lb6-vol{margin-top:12px; font-size:10px; font-weight:800; border-radius:999px; padding:4px 12px;}
.lb7{width:min(300px,100%); aspect-ratio:5/3; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; gap:10px;}
.lb7 .lb7-line{width:70%; height:2px;}
.lb7 .lb7-sub{font-size:10.5px; margin-top:5px;}
.lb7 .lb7-vol{font-size:10px; font-weight:800; border:1px solid; border-radius:999px; padding:4px 12px;}

/* ===== 데모카드 13~18 ===== */
.tpl13 .t13-line{margin-top:14px; padding-left:16px; border-left:2px solid;}
.tpl13 .t13-r{position:relative; padding-bottom:14px;}
.tpl13 .t13-r:last-child{padding-bottom:0;}
.tpl13 .t13-dot{position:absolute; left:-22px; top:3px; width:11px; height:11px; border:2px solid; border-radius:50%;}
.tpl13 .t13-m b{display:block; font-size:12.5px; font-weight:800;}
.tpl13 .t13-m em{display:block; font-style:normal; font-size:11px; margin-top:3px; line-height:1.55;}
.tpl14 .t14-g{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:13px;}
.tpl14 .t14-c{border:1.5px solid; border-radius:11px; padding:13px 12px;}
.tpl14 .t14-c em{display:block; font-style:normal; font-size:10px; font-weight:800; letter-spacing:.06em;}
.tpl14 .t14-c b{display:block; font-size:13px; font-weight:800; margin-top:7px; line-height:1.4;}
.tpl15 .t15-g{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
.tpl15 .t15-c{text-align:center;}
.tpl15 .t15-ic{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:11px; margin:0 auto 8px; font-size:15px;}
.tpl15 .t15-c b{display:block; font-size:11.5px; font-weight:700; line-height:1.45;}
.tpl16{position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; padding-left:22px;}
.tpl16 .t16-bar{position:absolute; left:0; top:0; bottom:0; width:6px;}
.tpl16 .t16-ic{flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}
.tpl16 .t16-m{flex:1; min-width:0;}
.tpl16 .t16-m b{display:block; font-size:12.5px;}
.tpl16 .t16-m em{display:block; font-style:normal; font-size:11px; margin-top:3px; line-height:1.5;}
.tpl16 .t16-cta{flex:none; font-size:11.5px; font-weight:800; white-space:nowrap;}
.tpl17 .t17-q{font-size:42px; font-weight:800; line-height:.7; height:26px;}
.tpl17 .t17-t{font-size:14px; font-weight:700; line-height:1.65; margin-top:6px;}
.tpl17 .t17-ft{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:13px; border-top:1px solid;}
.tpl17 .t17-av{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}
.tpl17 .t17-n b{display:block; font-size:12px;}
.tpl17 .t17-n em{display:block; font-style:normal; font-size:10.5px; margin-top:2px;}
.tpl18{text-align:center;}
.tpl18 .t18-eb{font-size:10.5px; font-weight:800; letter-spacing:.14em;}
.tpl18 .t18-t{font-size:19px; font-weight:800; margin-top:9px; letter-spacing:-.01em; line-height:1.35;}
.tpl18 .t18-d{font-size:12px; margin-top:7px; line-height:1.6;}
.tpl18 .t18-b{display:flex; gap:9px; justify-content:center; margin-top:14px; flex-wrap:wrap;}
.tpl18 .t18-b1,.tpl18 .t18-b2{border-radius:10px; padding:9px 16px; font-size:12px; font-weight:700; white-space:nowrap;}
.tpl18 .t18-b2{border:1.5px solid;}
/* ===== 채팅 13~18 ===== */
.cscreen .c-nrow{display:flex; align-items:center; gap:11px; padding:12px 14px; border-bottom:1px solid;}
.cscreen .c-nic{flex:none; width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;}
.cscreen .c-srch{margin:11px 14px; border-radius:999px; padding:9px 14px; font-size:12px;}
.cscreen .c-img{width:130px; height:86px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; letter-spacing:.1em;}
.cscreen .c-av.xl{width:78px; height:78px; font-size:32px;}
.c15 .c15-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px;}
.c15 .c15-nm{font-size:19px; font-weight:800;}
.c15 .c15-st{font-size:12px; font-variant-numeric:tabular-nums;}
.c15 .c15-btns{display:flex; gap:10px; justify-content:center; padding:14px;}
.c15 .c15-b{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700;}
.c15 .c15-b.end{width:auto; border-radius:999px; padding:0 22px; font-size:12.5px; font-weight:800;}
.c17 .c17-b{align-items:center; justify-content:center; gap:0; text-align:center;}
.c17 .c17-to{font-size:12px; margin-top:12px;}
.c17 .c17-amt{font-size:30px; font-weight:800; margin-top:6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.c17 .c17-memo{margin-top:14px; border-radius:10px; padding:10px 14px; font-size:11.5px; align-self:stretch;}
.c18{align-items:center; text-align:center;}
.c18 .c18-art{margin:18px 16px 0; height:150px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; letter-spacing:.12em; align-self:stretch;}
.c18 .c18-t{font-size:17px; font-weight:800; margin-top:18px; padding:0 18px; line-height:1.35;}
.c18 .c18-d{font-size:12px; margin-top:8px; padding:0 22px; line-height:1.6;}
.c18 .c18-dots{display:flex; gap:6px; justify-content:center; margin:16px 0 auto;}
.c18 .c18-dots i{width:7px; height:7px; border-radius:50%;}
/* ===== 쿠폰 13~18 ===== */
.cp13{width:min(240px,100%); border-radius:12px; display:flex; flex-direction:column; text-align:center;}
.cp13 .cp13-head{flex:none; padding:11px 14px; font-size:10px; font-weight:800; letter-spacing:.14em;}
.cp13 .cp13-body{padding:16px 16px 18px;}
.cp13 .cp13-off{font-size:40px; font-weight:800; line-height:1; letter-spacing:-.03em;}
.cp13 .cp13-off span{font-size:19px; margin-left:2px;}
.cp13 .cp-tt{margin-top:9px;}
.cp14{width:min(340px,100%); border-radius:12px; display:flex; align-items:stretch;}
.cp14 .cp14-l{flex:1; min-width:0; padding:16px 18px; display:flex; flex-direction:column; justify-content:center;}
.cp14 .cp14-r{flex:none; border-left:2px dashed; padding:14px 16px; display:flex; align-items:center;}
.cp15{width:min(300px,100%); border-radius:12px; text-align:center; padding:18px;}
.cp15 .cp15-off{font-size:42px; font-weight:800; line-height:1; letter-spacing:-.03em; margin-top:8px;}
.cp15 .cp15-off span{font-size:20px; margin-left:2px;}
.cp15 .cp15-tt{font-size:12.5px; font-weight:700; margin-top:8px;}
.cp15 .cp15-code{margin-top:13px; padding-top:11px; border-top:1px dashed; font-size:11px; font-weight:800; letter-spacing:.12em;}
.cp16{width:min(200px,100%); aspect-ratio:1/1; border:3px solid; border-radius:50%; padding:8px;}
.cp16 .cp16-in{width:100%; height:100%; border:1px dashed; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px;}
.cp16 .cp16-off{font-size:34px; font-weight:800; line-height:1; letter-spacing:-.03em;}
.cp16 .cp16-off span{font-size:16px; margin-left:2px;}
.cp16 .cp16-tt{font-size:10.5px; font-weight:700; margin-top:8px; line-height:1.4;}
.cp17{width:min(280px,100%); border-radius:12px; text-align:center; padding:18px;}
.cp17 .cp-tt{margin-top:8px;}
.cp17 .cp17-bc{margin-top:14px; padding-top:13px; border-top:1px dashed; display:flex; justify-content:center;}
.cp17 .cp-exp{margin-top:9px;}
.cp18{width:min(200px,100%); border-radius:12px; text-align:center; padding:18px 16px 14px;}
.cp18 .cp18-off{font-size:36px; font-weight:800; line-height:1; letter-spacing:-.03em;}
.cp18 .cp18-off span{font-size:17px; margin-left:2px;}
.cp18 .cp-tt{margin-top:8px;}
.cp18 .cp18-cut{margin:14px -16px 12px; border-top:2px dashed;}
.cp18 .cp18-code{font-size:11px; font-weight:800; letter-spacing:.12em;}
.cp18 .cp18-notch{position:absolute; width:14px; height:14px; border-radius:50%; bottom:38px;}
.cp18 .cp18-notch.l{left:-7px;} .cp18 .cp18-notch.r{right:-7px;}
/* ===== 티켓 13~18 ===== */
.tk13{width:min(300px,100%); border-radius:12px; padding:16px 18px 14px; text-align:center;}
.tk13 .tk13-t{font-size:14px; font-weight:800; line-height:1.35;}
.tk13 .tk13-g{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; padding-top:12px; border-top:1px dashed;}
.tk13 .tk13-g em{display:block; font-style:normal; font-size:8px; font-weight:800; letter-spacing:.14em;}
.tk13 .tk13-g b{display:block; font-size:12px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums;}
.tk14{width:min(230px,100%); border-radius:12px; padding:18px 16px 14px; text-align:center;}
.tk14 .tk14-cut{margin:14px -16px 12px; border-top:2px dashed;}
.tk14 .tk14-bot{font-size:9.5px; letter-spacing:.1em; font-variant-numeric:tabular-nums;}
.tk14 .tk14-notch{position:absolute; width:14px; height:14px; border-radius:50%; bottom:32px;}
.tk14 .tk14-notch.l{left:-7px;} .tk14 .tk14-notch.r{right:-7px;}
.tk15{width:min(380px,100%); border-radius:999px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 24px;}
.tk15 .tk15-ev{font-size:12px; font-weight:800; letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tk15 .tk15-dt{flex:none; font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums;}
.tk16{width:min(240px,100%); border-radius:12px; padding:18px 16px; text-align:center;}
.tk16 .tk16-seat{font-size:30px; font-weight:800; border-radius:12px; padding:12px; margin:12px 0 10px; letter-spacing:-.01em;}
.tk17{width:min(340px,100%); border-radius:12px; display:flex; align-items:stretch;}
.tk17 .tk17-l{flex:none; border-right:2px dashed; padding:14px 12px; display:flex; align-items:center;}
.tk17 .tk17-r{flex:1; min-width:0; padding:15px 18px; display:flex; flex-direction:column; justify-content:center;}
.tk18{width:min(320px,100%); border:3px solid; border-radius:12px; padding:9px;}
.tk18 .tk18-in{border:1px dashed; border-radius:7px; padding:18px 16px; text-align:center;}
.tk18 .tk18-tag{font-size:8.5px; font-weight:800; letter-spacing:.22em;}
.tk18 .tk18-ev{font-size:16px; font-weight:800; margin:9px 0 7px; line-height:1.3; letter-spacing:-.01em;}
/* ===== 스탬프 13~18 ===== */
.st13{width:min(240px,100%); border-radius:14px; padding:18px; text-align:center;}
.st13 .st13-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.st14{width:min(300px,100%); border-radius:14px; padding:18px 20px;}
.st14 .st14-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.st15{width:min(340px,100%); border-radius:14px; display:flex; align-items:stretch;}
.st15 .st15-l{flex:none; width:90px; border-right:1px solid; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 8px;}
.st15 .st15-n{font-size:32px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;}
.st15 .st15-lab{font-size:10px; font-weight:700; margin-top:5px;}
.st15 .st15-r{flex:1; min-width:0; padding:16px 18px; display:flex; align-items:center;}
.st15 .st15-grid{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; width:100%;}
.st16{width:min(340px,100%); border-radius:14px; display:flex; align-items:center; gap:14px; padding:16px 18px;}
.st16 .st16-l{flex:1; min-width:0;}
.st16 .st16-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.st16 .st16-qr{flex:none;}
.st17{width:min(240px,100%); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; text-align:center;}
.st17 .st17-head{flex:none; padding:11px 14px; font-size:10px; font-weight:800; letter-spacing:.14em;}
.st17 .st17-body{padding:16px 18px 18px;}
.st17 .st17-grid{grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0;}
.st17 .st-exp{margin-top:12px;}
.st18{width:min(200px,100%); border-radius:14px; padding:18px 16px 14px; text-align:center;}
/* 도장칸은 aspect-ratio:1/1이라 열 수가 적으면 칸이 커진다 — 그리드 폭을 묶어 칸 크기를 제한한다. */
.st18 .st18-grid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:96px; margin-left:auto; margin-right:auto;}
.st18 .st18-bc{margin-top:14px; padding-top:12px; border-top:1px solid; display:flex; justify-content:center;}
/* ===== 영수증 13~18 (rc14·rc15·rc17은 톱니 해제) ===== */
.rc14,.rc15,.rc17{-webkit-mask:none; mask:none;}
.rc13{text-align:center;}
.rc13 .rc13-it{font-size:10.5px; margin-top:8px;}
.rc13 .rc13-amt{font-size:27px; font-weight:800; margin-top:8px; letter-spacing:-.02em;}
.rc13 .rc13-amt span{font-size:13px; font-weight:700; margin-left:2px;}
.rc14{border-radius:12px; width:min(260px,100%); padding:0 18px 16px; text-align:center;}
.rc14 .rc14-rule{height:5px; margin:0 -18px 14px; border-radius:12px 12px 0 0;}
.rc14 .rc14-t{font-size:9.5px; font-weight:800; letter-spacing:.22em;}
.rc14 .rc-brand{margin-top:7px;}
.rc14 .rc14-rows{margin-top:12px;}
.rc14 .rc-row{border-top:1px solid; padding-top:6px;}
.rc14 .rc-total{margin-top:10px; padding-top:10px; border-top:2px solid;}
.rc15{border-radius:12px; width:min(240px,100%); padding:0;}
.rc15 .rc15-head{padding:12px; text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.12em;}
.rc15 .rc15-body{padding:16px 18px 18px;}
.rc15 .rc15-qr{margin:14px 0 4px; display:flex; justify-content:center;}
.rc16{text-align:center;}
.rc16 .rc16-bg{display:inline-block; font-size:9.5px; font-weight:800; border-radius:999px; padding:4px 12px; letter-spacing:.06em; margin-bottom:11px;}
.rc17{border-radius:12px; width:min(320px,100%); padding:0; display:flex; align-items:stretch; text-align:left;}
.rc17 .rc17-l{flex:1; min-width:0; padding:16px 18px; display:flex; flex-direction:column; justify-content:center;}
.rc17 .rc17-it{font-size:10.5px; margin-top:6px;}
.rc17 .rc17-r{flex:none; border-left:1px dashed; padding:16px 18px; display:flex; align-items:center;
  font-size:19px; font-weight:800; letter-spacing:-.01em;}
.rc17 .rc17-r span{font-size:11px; font-weight:700; margin-left:2px;}
/* ===== 제품 라벨 13~18 ===== */
.lb13{width:min(150px,100%); aspect-ratio:1/1; border:2px solid; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px;}
.lb13 .lb13-nm{font-size:14px; font-weight:800; margin:7px 0 5px; line-height:1.2; letter-spacing:-.01em;}
.lb13 .lb13-vol{font-size:10px;}
.lb14{width:min(200px,100%); aspect-ratio:3/4; border-radius:10px; display:flex; flex-direction:column;}
.lb14 .lb14-rib{flex:none; padding:9px 14px; text-align:center; font-size:9px; font-weight:800; letter-spacing:.18em;}
.lb14 .lb14-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px 14px;}
.lb14 .lb14-sub{font-size:10px; margin-top:7px; line-height:1.5;}
.lb14 .lb14-vol{margin-top:13px; font-size:9.5px; font-weight:800; border-radius:999px; padding:4px 12px;}
.lb15{width:min(300px,100%); aspect-ratio:5/2; border-radius:8px; display:flex; flex-direction:column;}
.lb15 .lb15-top{flex:none; height:12px;}
.lb15 .lb15-mid{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 16px;}
.lb15 .lb15-nm{font-size:17px; font-weight:800; margin:6px 0 4px; letter-spacing:-.01em;}
.lb15 .lb15-vol{font-size:10px;}
.lb16{width:min(170px,100%); aspect-ratio:1/2; border:1px solid; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 12px;}
.lb16 .lb16-nm{font-size:14px; font-weight:800; margin:8px 0 14px; line-height:1.25; letter-spacing:-.01em;}
.lb16 .lb16-vol{font-size:10px; margin-top:12px;}
.lb17{width:min(200px,100%); aspect-ratio:3/4; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 14px;}
.lb17 .lb17-nm{font-size:19px; font-weight:800; margin-top:9px; line-height:1.2; letter-spacing:-.01em;}
.lb17 .lb17-ft{margin-top:auto; padding-top:12px; border-top:1px solid; font-size:10px; font-weight:700; align-self:stretch;}
.lb18{width:min(280px,100%); border:1px solid; border-radius:8px; padding:14px 16px;}
.lb18 .lb18-head{font-size:9.5px; font-weight:800; letter-spacing:.18em;}
.lb18 .lb-nm{margin-top:6px; font-size:17px;}
.lb18 .lb18-rows{margin-top:11px;}
.lb18 .lb18-r{display:flex; justify-content:space-between; gap:12px; font-size:10px; padding:6px 0; border-top:1px solid;}
.lb18 .lb18-r b{text-align:right;}
/* ===== 표·데이터 13~18 ===== */
.tb13 .tb13-g{display:flex; align-items:center; gap:18px; margin-top:14px;}
.tb13 .tb13-ring{flex:none; width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.tb13 .tb13-ring span{width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}
.tb13 .tb13-ls{flex:1; min-width:0;}
.tb13 .tb13-l{display:flex; align-items:center; gap:8px; font-size:11.5px; padding:4px 0;}
.tb13 .tb13-l i{flex:none; width:10px; height:10px; border-radius:3px;}
.tb13 .tb13-l span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tb13 .tb13-l b{flex:none; font-variant-numeric:tabular-nums;}
.tb14 .tb14-r{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid; font-size:11.5px;}
.tb14 .tb14-r:first-of-type{margin-top:11px;}
.tb14 .tb14-t{flex:none; width:38px; font-variant-numeric:tabular-nums;}
.tb14 .tb14-d{flex:none; width:8px; height:8px; border-radius:50%;}
.tb14 .tb14-m{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tb15 .tb15-r{display:flex; align-items:center; gap:10px; margin-top:11px; font-size:11.5px;}
.tb15 .tb15-n{flex:none; width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700;}
.tb15 .tb15-t{flex:1; min-width:0; height:9px; border-radius:999px; overflow:hidden;}
.tb15 .tb15-t i{display:block; height:100%; border-radius:999px;}
.tb15 .tb15-v{flex:none; width:34px; text-align:right; font-variant-numeric:tabular-nums;}
.tb16 .tb16-sub{font-size:11px; margin-top:5px;}
.tb16 .tb16-g{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:13px; max-width:238px;}
.tb16 .tb16-g i{aspect-ratio:1/1; border-radius:4px;}
.tb17 .tb17-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:11px; border-bottom:2px solid;}
.tb17 .tb17-cnt{flex:none; font-size:10px; font-weight:800; border-radius:999px; padding:4px 10px;}
.tb17 .tb17-r{display:grid; grid-template-columns:1.4fr .8fr .9fr; gap:8px; padding:10px 0; border-top:1px solid; font-size:11.5px;}
.tb17 .tb17-r>span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tb17 .tb17-s{text-align:right; font-weight:700;}
.tb18 .tb18-lab{font-size:11px; font-weight:700;}
.tb18 .tb18-v{font-size:30px; font-weight:800; margin-top:5px; letter-spacing:-.02em; display:flex; align-items:baseline; gap:9px;}
.tb18 .tb18-v em{font-style:normal; font-size:12px; font-weight:800;}
.tb18 .tb18-sp{display:block; width:100%; height:64px; margin-top:12px; overflow:visible;}

/* ===== 명함 13~18 ===== */
.bc13{display:flex;}
.bc13 .bc13-side{flex:none; width:56px; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:9px; font-weight:800; letter-spacing:.14em; writing-mode:vertical-rl; padding:12px 0;}
.bc13 .bc13-body{flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; justify-content:center;}
.bc13 .bc13-ct{margin-top:12px; padding-top:11px; border-top:1px solid; font-size:10px;}
.bc14{display:flex; flex-direction:column;}
.bc14 .bc14-head{flex:none; padding:11px 20px; font-size:9.5px; font-weight:800; letter-spacing:.18em;}
.bc14 .bc14-body{flex:1; min-width:0; padding:0 20px; display:flex; flex-direction:column; justify-content:center;}
.bc14 .bc14-ct{margin-top:10px; font-size:10px;}
.bc15{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 20px;}
.bc15 .bc15-rule{width:34px; height:2px; margin:10px 0;}
.bc15 .bc15-ct{margin-top:2px; font-size:10px;}
.bc16{display:flex; align-items:center; gap:14px; padding:18px 20px;}
.bc16 .bc16-l{flex:1; min-width:0;}
.bc16 .bc16-l .bc-nm{margin-top:8px;}
.bc16 .bc16-ct{margin-top:9px; font-size:10px;}
.bc16 .bc16-qr{flex:none;}
.bc17{display:flex; flex-direction:column; padding:18px 20px;}
.bc17 .bc17-mid{flex:1; display:flex; flex-direction:column; justify-content:center;}
.bc17 .bc17-ct{margin-top:auto; padding-top:11px; border-top:1px solid; font-size:10px;}
.bc18{display:flex; flex-direction:column;}
.bc18 .bc18-top{flex:1; display:flex; align-items:center; gap:13px; padding:0 20px;}
.bc18 .bc18-ini{flex:none; width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:800;}
.bc18 .bc18-m{flex:1; min-width:0;}
.bc18 .bc18-m .bc-nm,.bc18 .bc18-m .bc-tt{display:block;}
.bc18 .bc18-foot{flex:none; padding:9px 20px; font-size:10px; font-weight:700;}
/* ===== 네임택 13~18 ===== */
.nt13{width:min(240px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column;}
.nt13 .nt13-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px;}
.nt13 .nt13-ph{width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:31px; font-weight:800; margin-bottom:14px;}
.nt13 .nt13-band{flex:none; padding:10px; text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.12em;}
.nt14{width:min(300px,100%); aspect-ratio:3/1; border:2px solid; border-radius:11px; display:flex; align-items:center; gap:14px; padding:0 18px;}
.nt14 .nt14-l{flex:none; font-size:9.5px; font-weight:800; letter-spacing:.16em; writing-mode:vertical-rl;}
.nt14 .nt14-r{flex:1; min-width:0;}
.nt15{width:min(230px,100%); aspect-ratio:3/4; border:3px solid; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 16px 20px;}
.nt15 .nt15-hole{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:28px; height:10px; border:1.5px solid; border-radius:999px;}
.nt16{width:min(230px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 16px;}
.nt16 .nt16-org{font-size:9.5px; font-weight:800; letter-spacing:.16em; margin-bottom:10px;}
.nt16 .nt16-bc{margin-top:auto; padding-top:14px; border-top:1px solid; align-self:stretch; display:flex; justify-content:center;}
.nt17{width:min(230px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 16px;}
.nt17 .nt17-ini{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; margin-bottom:14px;}
.nt17 .nt17-tag{margin-top:10px; font-size:10px; font-weight:800; border-radius:999px; padding:5px 13px; letter-spacing:.04em;}
.nt18{width:min(250px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column;}
.nt18 .nt18-bar{flex:none; height:14px;}
.nt18 .nt18-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px;}
/* ===== 상품권 13~18 ===== */
.gv13{width:min(360px,100%); aspect-ratio:2.6/1; border-radius:14px; display:flex; align-items:stretch;}
.gv13 .gv13-l{flex:1; min-width:0; padding:16px 20px; display:flex; flex-direction:column; justify-content:center;}
.gv13 .gv13-r{flex:none; width:72px; border-left:2px dashed; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:9px; font-weight:800; letter-spacing:.12em; line-height:1.6;}
.gv14{width:min(300px,100%); aspect-ratio:2/1; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px 18px 18px;}
.gv14 .gv14-rib{position:absolute; top:0; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; letter-spacing:.16em; border-radius:0 0 8px 8px; padding:5px 16px;}
.gv15{width:min(360px,100%); border-radius:14px; display:flex; align-items:center; gap:14px; padding:16px 18px;}
.gv15 .gv15-l{flex:1; min-width:0;}
.gv15 .gv15-sub{font-size:10.5px; margin-top:6px;}
.gv15 .gv15-qr{flex:none;}
.gv16{width:min(360px,100%); aspect-ratio:2.4/1; border-radius:14px; display:flex; align-items:stretch;}
.gv16 .gv16-l{flex:none; width:34%; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px;}
.gv16 .gv16-l span{font-size:10px; font-weight:800; letter-spacing:.12em; line-height:1.5;}
.gv16 .gv16-r{flex:1; min-width:0; padding:14px 18px; display:flex; flex-direction:column; justify-content:center;}
.gv17{width:min(300px,100%); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px;}
.gv17 .gv17-bc{margin-top:14px; padding-top:13px; border-top:1px solid; align-self:stretch; display:flex; justify-content:center;}
.gv18{width:min(340px,100%); aspect-ratio:2/1; border:3px solid; border-radius:14px; padding:9px;}
.gv18 .gv18-in{width:100%; height:100%; border:1px dashed; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px;}
.gv18 .gv18-t{font-size:9px; font-weight:800; letter-spacing:.2em;}
.gv18 .gv-brand{margin-top:8px;}
/* ===== 뷰티포인트 상품 라인업 gv19~24 ===== */
/* gv19~22 금액권 — 가로 기프트카드(액면가만 다른 시리즈) */
.gv-bpcard{width:min(340px,100%); aspect-ratio:8/5; border:1px solid; border-radius:16px; padding:20px 22px;
  display:flex; flex-direction:column;}
.gv-bpcard .gvbp-top{display:flex; align-items:center; gap:9px;}
.gvbp-mk{flex:none; width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800;}
.gv-bpcard .gvbp-brand{font-size:13px; font-weight:800; letter-spacing:.02em;}
.gv-bpcard .gvbp-type{margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.14em;}
.gv-bpcard .gvbp-amt{margin-top:auto;}
.gv-bpcard .gvbp-ft{margin-top:12px; padding-top:11px; border-top:1px solid; font-size:10px; line-height:1.5;}
/* gv23 VIP 할인카드 — 어두운 카드 + 두 등급 */
.gv23{width:min(340px,100%); aspect-ratio:8/5; border-radius:16px; padding:20px 22px; display:flex; flex-direction:column;}
.gv23 .gv23-head{display:flex; align-items:center; gap:9px;}
.gv23 .gv23-brand{font-size:13px; font-weight:800; letter-spacing:.04em;}
.gv23 .gv23-tiers{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:auto 0;}
.gv23 .gv23-tier{border:1px solid; border-radius:12px; padding:12px 14px;}
.gv23 .gv23-tier b{font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1;}
.gv23 .gv23-tier b span{font-size:15px; font-weight:700; margin-left:1px;}
.gv23 .gv23-tier em{display:block; font-style:normal; font-size:11px; font-weight:700; margin-top:5px;}
.gv23 .gv23-ft{font-size:10px;}
/* gv24 이용권 — 1·2·3·5회 쿠폰북 */
.gv24{width:min(340px,100%); border-radius:16px; border:1px solid; padding:18px 20px;}
.gv24 .gv24-top{display:flex; align-items:center; gap:9px; margin-bottom:14px;}
.gv24 .gv24-brand{font-size:13px; font-weight:800;}
.gv24 .gv24-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.gv24 .gv24-t{border:1px dashed; border-radius:10px; padding:14px 6px; text-align:center;}
.gv24 .gv24-t b{font-size:22px; font-weight:800; line-height:1;}
.gv24 .gv24-t b span{font-size:11px; font-weight:700; margin-left:1px;}
.gv24 .gv24-t em{display:block; font-style:normal; font-size:10px; margin-top:5px;}
/* ===== 포인트 13~18 ===== */
.pt13{width:min(340px,100%); border-radius:14px; padding:16px 18px 18px;}
.pt13 .pt13-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.pt13 .pt13-tr{height:8px; border-radius:999px; overflow:hidden; margin-top:12px;}
.pt13 .pt13-tr span{display:block; height:100%; border-radius:999px;}
.pt13 .pt13-n{font-size:10.5px; margin-top:8px;}
.pt14{width:min(230px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px;}
.pt14 .pt14-ring{width:70px; height:70px; border:3px solid; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; letter-spacing:.08em; margin-bottom:12px;}
.pt14 .gv-brand{margin-top:8px;}
.pt15{width:min(360px,100%); border-radius:14px; display:flex; align-items:center; gap:14px; padding:16px 18px;}
.pt15 .pt15-l{flex:1; min-width:0;}
.pt15 .pt15-n{font-size:10.5px; margin-top:6px;}
.pt15 .pt15-qr{flex:none;}
.pt16{width:min(340px,100%); aspect-ratio:2.4/1; border-radius:14px; display:flex; align-items:stretch;}
.pt16 .pt16-side{flex:none; width:14px;}
.pt16 .pt16-body{flex:1; min-width:0; padding:16px 20px; display:flex; flex-direction:column; justify-content:center;}
.pt17{width:min(300px,100%); border-radius:14px; display:flex; flex-direction:column; overflow:hidden;}
.pt17 .pt17-head{flex:none; padding:11px 16px; font-size:10px; font-weight:800; letter-spacing:.14em;}
.pt17 .pt17-g{display:grid; grid-template-columns:1fr 1fr;}
.pt17 .pt17-g>div{padding:14px 16px;}
.pt17 .pt17-g>div+div{border-left:1px solid;}
.pt17 .pt17-g em{display:block; font-style:normal; font-size:10px; font-weight:700;}
.pt17 .pt17-g b{display:block; font-size:18px; font-weight:800; margin-top:5px; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.pt18{width:min(230px,100%); aspect-ratio:3/4; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px;}
.pt18 .pt18-tag{border:1.5px solid; border-radius:999px; padding:5px 14px; font-size:9.5px; font-weight:800; letter-spacing:.12em; margin-bottom:12px;}
.pt18 .gv-brand{margin-top:9px;}
/* ===== 사원증 13~18 ===== */
.id13{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 14px 14px;}
.id13 .id13-brand{font-size:9px; font-weight:800; letter-spacing:.16em;}
.id13 .id13-ph{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; margin:11px 0 10px;}
.id13 .id13-qr{margin-top:12px;}
.id14{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; text-align:center; padding:24px 14px 14px;}
.id14 .id14-brand{font-size:9px; font-weight:800; letter-spacing:.16em;}
.id14 .id14-mid{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.id14 .id14-no{padding-top:10px; border-top:1px solid; font-size:9px; font-variant-numeric:tabular-nums;}
.id15{width:min(340px,100%); border-radius:13px; padding:16px 18px 14px;}
.id15 .id15-top{display:flex; align-items:center; gap:13px;}
.id15 .id15-ph{flex:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:800;}
.id15 .id15-m{flex:1; min-width:0;}
.id15 .id15-m .id-nm,.id15 .id15-m .id-rl{display:block;}
.id15 .id15-bc{margin-top:13px; padding-top:12px; border-top:1px solid; display:flex; justify-content:center;}
.id16{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; text-align:center;}
.id16 .id16-head{flex:none; padding:24px 10px 20px; font-size:9.5px; font-weight:800; letter-spacing:.14em;
  clip-path:polygon(0 0,100% 0,100% 100%,0 78%);}
.id16 .id16-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 12px;}
.id16 .id16-no{margin-top:10px; font-size:9px; font-variant-numeric:tabular-nums; letter-spacing:.06em;}
.id17{width:min(210px,100%); aspect-ratio:54/86; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px 14px 14px;}
.id17 .id17-brand{font-size:9px; font-weight:800; letter-spacing:.16em; margin-bottom:12px;}
.id17 .id17-g{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-self:stretch; margin-top:14px; padding-top:12px; border-top:1px solid;}
.id17 .id17-g em{display:block; font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.12em;}
.id17 .id17-g b{display:block; font-size:10px; margin-top:4px; line-height:1.35;}
.id18{width:min(190px,100%); aspect-ratio:3/4; border:2px solid; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 14px;}
.id18 .id18-ini{width:60px; height:60px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin-bottom:14px;}

/* ===== 제품 라벨 8~12 ===== */
.lb8{width:min(200px,100%); aspect-ratio:3/4; border:1px solid; border-radius:8px; display:flex; overflow:hidden;}
.lb8 .lb8-band{flex:none; width:9px;}
.lb8 .lb8-main{flex:1; min-width:0; padding:18px 14px 14px; display:flex; flex-direction:column;}
.lb8 .lb8-main .lb-nm{margin-top:8px; font-size:17px;}
.lb8 .lb8-sub{font-size:10px; margin-top:6px; line-height:1.55;}
.lb8 .lb8-vol{margin-top:auto; padding-top:10px; border-top:1px solid; font-size:10px; font-weight:700;}
.lb9{width:min(220px,100%); border:1px solid; border-radius:8px; display:flex; flex-direction:column; overflow:hidden;}
.lb9 .lb9-head{flex:none; padding:9px 14px; font-size:9.5px; font-weight:800; letter-spacing:.18em;}
.lb9 .lb9-body{padding:14px;}
.lb9 .lb9-rows{margin-top:11px; border-top:1px solid; padding-top:4px;}
.lb9 .lb9-rows>div{display:flex; justify-content:space-between; gap:10px; font-size:10.5px; padding:6px 0; border-bottom:1px solid;}
.lb9 .lb9-rows>div:last-child{border-bottom:none;}
.lb10{width:min(180px,100%); aspect-ratio:1/1.1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px 16px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.lb10 .lb10-nm{font-size:16px; font-weight:800; margin-top:7px; line-height:1.2; letter-spacing:-.01em;}
.lb10 .lb10-line{width:36px; height:2px; margin:9px 0;}
.lb10 .lb10-vol{font-size:10px; font-weight:700;}
.lb11{width:min(320px,100%); border:1px solid; border-radius:8px; display:flex; align-items:stretch;}
.lb11 .lb11-l{flex:1; min-width:0; padding:14px 16px;}
.lb11 .lb11-nm{font-size:16px; font-weight:800; margin-top:6px; letter-spacing:-.01em; line-height:1.2;}
.lb11 .lb11-sub{font-size:10px; margin-top:5px;}
.lb11 .lb11-r{flex:none; border-left:1px dashed; padding:12px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
.lb11 .lb11-vol{font-size:9.5px; font-weight:700; letter-spacing:.04em;}
.lb12{width:min(190px,100%); aspect-ratio:1/1; border:3px solid; border-radius:50%; padding:8px;}
.lb12 .lb12-in{width:100%; height:100%; border:1px solid; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px;}
.lb12 .lb12-nm{font-size:16px; font-weight:800; margin:7px 0 9px; letter-spacing:-.01em; line-height:1.2;}
.lb12 .lb12-vol{font-size:9.5px; font-weight:800; border-radius:999px; padding:4px 12px;}
/* ===== 표·데이터 8~12 ===== */
.tb8 .tb8-g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:13px;}
.tb8 .tb8-c{border:1px solid; border-radius:10px; padding:11px 10px;}
.tb8 .tb8-c em{display:block; font-style:normal; font-size:10px; font-weight:700;}
.tb8 .tb8-c b{display:block; font-size:17px; font-weight:800; margin-top:5px; letter-spacing:-.01em;}
.tb8 .tb8-c i{display:block; font-style:normal; font-size:9.5px; font-weight:700; margin-top:4px;}
.tb9 .tb9-sub{font-size:11px; margin-top:5px;}
.tb9 .tb9-g{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; align-items:end;
  height:110px; margin-top:13px; padding-top:12px; border-top:1px solid;}
.tb9 .tb9-b{display:flex; flex-direction:column; justify-content:flex-end; height:100%;}
.tb9 .tb9-b span{display:block; border-radius:5px 5px 0 0; min-height:4px;}
.tb9 .tb9-b em{display:block; font-style:normal; font-size:9.5px; font-weight:700; text-align:center; margin-top:6px;}
.tb10 .tb10-r{margin-top:13px;}
.tb10 .tb10-t{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:11.5px; font-weight:700;}
.tb10 .tb10-tr{height:7px; border-radius:999px; overflow:hidden; margin-top:6px;}
.tb10 .tb10-tr span{display:block; height:100%; border-radius:999px;}
.tb11{padding:0; overflow:hidden;}
.tb11 .tb11-h,.tb11 .tb11-r{display:grid; grid-template-columns:1.4fr 1fr .8fr; gap:8px; padding:10px 14px; font-size:11px;}
.tb11 .tb11-h{font-weight:800; letter-spacing:.02em;}
.tb11 .tb11-r{border-top:1px solid; font-variant-numeric:tabular-nums;}
.tb12 .tb12-r{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid; font-size:11.5px;}
.tb12 .tb12-r:first-of-type{margin-top:11px;}
.tb12 .tb12-n{flex:none; width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;}
.tb12 .tb12-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700;}
.tb12 .tb12-v{flex:none; font-variant-numeric:tabular-nums;}

/* ===== 티켓 8~12 ===== */
.tk8{width:min(230px,100%); border-radius:12px; display:flex; flex-direction:column; text-align:center;}
.tk8 .tk8-head{flex:none; padding:14px 14px; font-size:11.5px; font-weight:800; letter-spacing:.06em; line-height:1.35;}
.tk8 .tk8-body{padding:14px 16px 18px;}
.tk8 .tk8-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed;}
.tk8 .tk8-grid em{display:block; font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.16em;}
.tk8 .tk8-grid b{display:block; font-size:15px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums;}
.tk9{width:min(360px,100%); border-radius:12px; display:flex; align-items:stretch; gap:0;}
.tk9 .tk9-l{flex:none; width:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 6px;}
.tk9 .tk9-d{font-size:27px; font-weight:800; line-height:1;}
.tk9 .tk9-m{font-size:9.5px; font-weight:800; letter-spacing:.14em; margin-top:3px;}
.tk9 .tk9-m2{flex:1; min-width:0; padding:14px 14px; display:flex; flex-direction:column; justify-content:center;}
.tk9 .tk9-qr{flex:none; display:flex; align-items:center; padding:0 14px 0 0;}
.tk10{width:min(300px,100%); border-radius:12px; padding:10px;}
.tk10 .tk10-in{border:2px dashed; border-radius:9px; padding:20px 18px; text-align:center;}
.tk10 .tk10-tag{font-size:8.5px; font-weight:800; letter-spacing:.22em; margin-bottom:11px;}
.tk11{width:min(360px,100%); border-radius:12px; display:flex; align-items:stretch;}
.tk11 .tk11-l{flex:1; min-width:0; padding:16px 18px;}
.tk11 .tk11-r{flex:none; width:40px; border-left:2px dashed; display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:700; letter-spacing:.1em; font-variant-numeric:tabular-nums;
  writing-mode:vertical-rl; text-orientation:mixed; padding:10px 0;}
.tk12{width:min(220px,100%); border-radius:12px; padding:22px 18px 16px; text-align:center;}
.tk12 .tk12-ev{font-size:17px; font-weight:800; line-height:1.3; letter-spacing:-.01em;}
.tk12 .tk12-dt{font-size:11px; margin-top:8px; font-variant-numeric:tabular-nums;}
.tk12 .tk12-bc{margin-top:16px; padding-top:13px; border-top:1px dashed; display:flex; justify-content:center;}
/* ===== 스탬프 8~12 ===== */
.st8{width:min(300px,100%); border-radius:14px; padding:18px 20px;}
.st8 .st8-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
.st8 .st-tt{margin-top:12px;}
.st9{width:min(220px,100%); border-radius:14px; padding:18px 18px 20px; text-align:center;}
.st9 .st9-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.st10{width:min(300px,100%); border-radius:14px; display:flex; flex-direction:column;}
.st10 .st10-head{flex:none; padding:12px 14px; text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.04em;}
.st10 .st10-body{padding:16px 18px 20px;}
.st10 .st10-grid{grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:0;}
.st11{width:min(240px,100%); border:2px solid; border-radius:50%; aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px;}
.st11 .st11-grid{grid-template-columns:repeat(4,minmax(0,1fr)); width:100%;}
.st12{width:min(340px,100%); border-radius:14px; padding:16px 18px 14px;}
.st12 .st12-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.st12 .st12-grid{grid-template-columns:repeat(10,minmax(0,1fr));}
.st12 .st12-bc{margin-top:14px; padding-top:12px; border-top:1px solid; display:flex; justify-content:center;}
/* ===== 영수증 8~12 (톱니 없는 카드형) ===== */
.rc8,.rc10,.rc11,.rc12{-webkit-mask:none; mask:none;}
.rc8{border-radius:12px; padding:0; width:min(260px,100%);}
.rc8 .rc8-head{padding:13px; text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.12em;}
.rc8 .rc8-body{padding:16px 18px 18px;}
.rc9 .rc9-lab{font-size:9.5px; font-weight:700; letter-spacing:.16em; margin-top:12px;}
.rc9 .rc9-no{font-size:34px; font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-top:4px;}
.rc10{border-radius:12px; width:min(270px,100%); padding:18px 18px 16px; text-align:left;}
.rc10 .rc10-t{font-size:12.5px; font-weight:800; letter-spacing:.26em; text-align:center; padding-bottom:11px; border-bottom:2px solid;}
.rc10 .rc10-r{display:flex; justify-content:space-between; gap:10px; font-size:11px; padding:8px 0; border-top:1px solid;}
.rc10 .rc-no{text-align:center; margin-top:9px;}
.rc11{border-radius:12px; width:min(230px,100%); padding:20px 18px;}
.rc11 .rc11-head{font-size:9.5px; font-weight:800; letter-spacing:.2em; margin-bottom:9px;}
.rc11 .rc11-amt{font-size:27px; font-weight:800; margin-top:9px; letter-spacing:-.02em;}
.rc11 .rc11-amt span{font-size:13px; font-weight:700; margin-left:2px;}
.rc11 .rc11-qr{margin-top:13px; display:flex; justify-content:center;}
.rc12{border-radius:12px; width:min(250px,100%); padding:18px;}
.rc12 .rc12-note{margin-top:13px; border-radius:9px; padding:10px 12px; font-size:10px; line-height:1.6; font-weight:700;}

/* ===== 폼 11~14 ===== */
.form .f-mt{margin-top:12px;}
.f11 .f-zip{display:flex; gap:8px; align-items:flex-end; margin-top:12px;}
.f11 .f-zip .f-inp{flex:1; min-width:0;}
.f11 .f-zipb{flex:none; border:1.5px solid; border-radius:9px; padding:10px 14px; font-size:12px; font-weight:700;}
.f12 .f12-drop{border:1.5px dashed; border-radius:11px; padding:22px 16px; text-align:center; margin-top:12px;}
.f12 .f12-up{font-size:24px; font-weight:800; line-height:1;}
.f12 .f12-t{font-size:12.5px; font-weight:700; margin-top:8px;}
.f12 .f12-d{font-size:11px; margin-top:4px;}
.f12 .f12-f{display:flex; align-items:center; gap:9px; border:1px solid; border-radius:9px; padding:9px 11px; margin-top:8px;}
.f12 .f12-ic{flex:none; width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px;}
.f12 .f12-nm{flex:1; min-width:0; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.f12 .f12-sz{flex:none; font-size:10.5px;}
.f13 .f13-bar{display:flex; gap:6px;}
.f13 .f13-s{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;}
.f13 .f13-s + .f13-s::before{content:""; position:absolute; left:-50%; top:11px; width:100%; height:1.5px; background:var(--ln);}
.f13 .f13-n{width:23px; height:23px; border-radius:50%; border:1.5px solid; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; position:relative; z-index:1;}
.f13 .f13-t{font-size:10px; font-weight:700;}
.f13 .f13-btns{display:flex; gap:8px;}
.f13 .f13-btns .btn1,.f13 .f13-btns .btn2{flex:1; text-align:center;}
.f14 .f14-sec{margin-top:13px; padding-top:12px; border-top:1px solid;}
.f14 .f14-c{justify-content:flex-start; margin-top:8px; font-size:12px;}
.f14 .f14-c em{margin-left:auto; font-style:normal; font-size:10.5px;}
.f14 .f14-track{position:relative; height:5px; border-radius:999px; margin:14px 0 10px;}
.f14 .f14-track span{position:absolute; top:0; bottom:0; border-radius:999px;}
.f14 .f14-track i{position:absolute; top:50%; width:15px; height:15px; border-radius:50%; transform:translate(-50%,-50%);}
.f14 .f14-pr{font-size:11.5px;}
/* ===== 섹션 11~14 ===== */
.sc11 .sc11-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px;}
.sc11 .sc11-p{position:relative; border:1.5px solid; border-radius:11px; padding:15px 8px 13px; text-align:center;}
.sc11 .sc11-tag{position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; border-radius:999px; padding:3px 9px; white-space:nowrap;}
.sc11 .sc11-nm{font-size:11px; font-weight:700;}
.sc11 .sc11-pr{font-size:17px; font-weight:800; margin-top:6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.sc11 .sc11-u{font-size:10px; margin-top:2px;}
.sc12 .sc12-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
.sc12 .sc12-ic{width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:15px;}
.sc12 .sc12-t{font-size:12.5px; font-weight:700; margin-top:8px;}
.sc12 .sc12-d{font-size:11px; margin-top:4px; line-height:1.6;}
.sc13{text-align:center;}
.sc13 .sc13-t{font-size:11.5px; font-weight:700;}
.sc13 .sc13-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;}
.sc13 .sc13-l{border:1px solid; border-radius:8px; padding:13px 6px; font-size:10.5px; font-weight:800; letter-spacing:.1em;}
.sc14{text-align:center;}
.sc14 .sc14-tag{display:inline-block; font-size:10px; font-weight:800; border-radius:999px; padding:4px 11px; letter-spacing:.06em;}
.sc14 .sc14-t{font-size:17px; font-weight:800; margin-top:9px; letter-spacing:-.01em; line-height:1.35;}
.sc14 .sc14-cd{display:flex; gap:8px; justify-content:center; margin:13px 0 4px;}
.sc14 .sc14-u{display:flex; flex-direction:column; align-items:center; gap:4px;}
.sc14 .sc14-u b{font-size:16px; font-weight:800; border-radius:8px; padding:7px 10px; font-variant-numeric:tabular-nums; min-width:38px;}
.sc14 .sc14-u em{font-style:normal; font-size:10px;}
/* ===== 폼 15~18 ===== */
.f15 .f-2col{margin-top:0;}
.f15 .f15-sum{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:14px; padding-top:12px; border-top:1px solid; font-size:12px;}
.f15 .f15-sum b{font-size:16px; font-weight:800; letter-spacing:-.01em;}
.f16 .f16-steps{display:flex; gap:14px; padding-bottom:13px; margin-bottom:13px; border-bottom:1px solid;}
.f16 .f16-s{display:flex; align-items:center; gap:6px;}
.f16 .f16-s b{width:20px; height:20px; border:1.5px solid; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;}
.f16 .f16-s em{font-style:normal; font-size:11px; font-weight:700;}
.f17 .f17-st{font-size:21px; letter-spacing:.08em; margin:10px 0 4px;}
.f18 .f18-r{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid;}
.f18 .f18-r:first-of-type{margin-top:12px;}
.f18 .f18-m{flex:1; min-width:0;}
.f18 .f18-m b{display:block; font-size:12.5px;}
.f18 .f18-m em{display:block; font-style:normal; font-size:10.5px; margin-top:3px; line-height:1.5;}
.f18 .f18-sw{flex:none; width:38px; height:21px; border-radius:999px; display:flex; align-items:center; padding:3px;}
.f18 .f18-sw i{display:block; width:15px; height:15px; border-radius:50%;}
.f18 .f18-sw.on{justify-content:flex-end;}
/* ===== 섹션 15~18 ===== */
.sc15{text-align:center;}
.sc15 .sc15-t{font-size:11px; font-weight:700; letter-spacing:.08em;}
.sc15 .sc15-g{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px;}
.sc15 .sc15-l{border-radius:8px; padding:13px 6px; font-size:10px; font-weight:800; letter-spacing:.12em;}
.sc16 .sc16-line{margin-top:14px; padding-left:16px; border-left:2px solid;}
.sc16 .sc16-r{position:relative; padding-bottom:14px;}
.sc16 .sc16-r:last-child{padding-bottom:0;}
.sc16 .sc16-dot{position:absolute; left:-22px; top:3px; width:11px; height:11px; border:2px solid; border-radius:50%;}
.sc16 .sc16-m b{display:block; font-size:12.5px; font-weight:800;}
.sc16 .sc16-m em{display:block; font-style:normal; font-size:11px; margin-top:3px; line-height:1.55;}
.sc17{text-align:center;}
.sc17 .sc17-t{font-size:15px; font-weight:800; letter-spacing:-.01em; line-height:1.4;}
.sc17 .sc17-g{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid;}
.sc17 .sc17-m b{display:block; font-size:18px; font-weight:800; letter-spacing:-.02em;}
.sc17 .sc17-m em{display:block; font-style:normal; font-size:10px; margin-top:4px;}
.sc18{display:flex; align-items:center; gap:16px;}
.sc18 .sc18-m{flex:1; min-width:0;}
.sc18 .sc18-b{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap;}
.sc18 .sc18-st{border:1.5px solid transparent; border-radius:9px; padding:8px 12px; font-size:11px; font-weight:700; white-space:nowrap;}
.sc18 .sc18-qr{flex:none;}
/* ===== 커머스 15~18 ===== */
.cm15{text-align:center;}
.cm15 .cm15-ic{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; margin:2px auto 12px;}
.cm15 .cm15-t{font-size:15px; font-weight:800; letter-spacing:-.01em;}
.cm15 .cm15-d{font-size:11.5px; margin-top:6px; line-height:1.6;}
.cm15 .cm15-r{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid; font-size:12px; text-align:left;}
.cm15 .cm15-r b{font-size:15px; font-weight:800; letter-spacing:-.01em;}
.cm16 .cm16-no{font-size:11px; margin-top:5px;}
.cm16 .cm16-g{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px; padding-top:14px; border-top:1px solid;}
.cm16 .cm16-s{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
.cm16 .cm16-s b{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;}
.cm16 .cm16-s em{font-style:normal; font-size:10px; font-weight:700;}
.cm17 .cm17-h{display:flex; align-items:center; gap:10px;}
.cm17 .cm17-av{flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;}
.cm17 .cm17-m{flex:1; min-width:0;}
.cm17 .cm17-m b{display:block; font-size:12.5px;}
.cm17 .cm17-m em{display:block; font-style:normal; font-size:10px; margin-top:3px;}
.cm17 .cm17-st{flex:none; font-size:12px; letter-spacing:.04em;}
.cm17 .cm17-b{margin-top:12px; padding-top:12px; border-top:1px solid; font-size:11.5px; line-height:1.65;}
.cm18 .cm18-lab{font-size:11px; font-weight:700; margin-top:13px;}
.cm18 .cm18-chs{display:flex; gap:8px; margin-top:7px;}
.cm18 .cm18-ch{width:24px; height:24px; border:2px solid; border-radius:50%;}
.cm18 .cm18-qr{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:13px; padding-top:12px; border-top:1px solid; font-size:11.5px;}
.cm18 .cm18-stp{display:flex; align-items:center; border:1px solid; border-radius:8px; overflow:hidden;}
.cm18 .cm18-stp i{font-style:normal; padding:5px 10px; font-size:13px; font-weight:700;}
.cm18 .cm18-stp b{padding:5px 10px; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;}

/* ===== 표·데이터 tb1~tb7 ===== */
.tbl .tb-head{display:flex; gap:10px; font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:11px 0; border-bottom:1px solid; margin-top:12px;}
.tbl .tb-head span,.tbl .tb-r span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tbl .tb-r{display:flex; gap:10px; align-items:center; font-size:12px; padding:11px 0; border-top:1px solid;}
.tbl .tb-right{flex:none !important; text-align:right;}
.tbl .tb-bg{display:inline-block; border:1px solid; font-size:10px; font-weight:800; border-radius:999px; padding:3px 9px;}
.tb2 .tb2-r{display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid;}
.tb2 .tb2-th{flex:none; width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800;}
.tb2 .tb2-m{flex:1; min-width:0;}
.tb2 .tb2-m b{display:block; font-size:12.5px;}
.tb2 .tb2-m em{display:block; font-style:normal; font-size:10.5px; margin-top:2px;}
.tb2 .tb2-a{flex:none; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums;}
.tb3 .tb3-ks{display:grid; grid-template-columns:repeat(3,1fr); margin-top:13px;}
.tb3 .tb3-k{text-align:center; padding:2px 4px;}
.tb3 .tb3-k + .tb3-k{border-left:1px solid var(--ln);}
.tb3 .tb3-k b{display:block; font-size:19px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.tb3 .tb3-k em{display:block; font-style:normal; font-size:10px; margin-top:4px;}
.tb3 .tb3-chart{display:flex; align-items:flex-end; gap:6px; height:64px; margin-top:14px; padding-top:14px; border-top:1px solid;}
.tb3 .tb3-chart span{flex:1; border-radius:4px 4px 0 0;}
.tb4 .tb4-top{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px;}
.tb4 .tb4-sort{border:1px solid; border-radius:8px; padding:6px 11px; font-size:11px; font-weight:700;}
.tb4 .tb4-rows{margin-top:6px;}
.tb4 .tb4-pg{display:flex; gap:5px; justify-content:center; margin-top:14px;}
.tb4 .tb4-p{min-width:26px; height:26px; border:1px solid; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;}
.tb4 .tb4-p.on{border-color:transparent;}
.tb5 .tb5-top{display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:800;}
.tb5 .tb5-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-top:9px;}
.tb5 .tb5-head{margin-top:12px;}
.tb5 .tb5-dow{text-align:center; font-size:10px; font-weight:800; padding:3px 0;}
.tb5 .tb5-d{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:11px; border-radius:7px; font-variant-numeric:tabular-nums;}
.tb5 .tb5-d.on{font-weight:800;}
.tb6 .tb6-r{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid; font-size:12.5px;}
.tb6 .tb6-n{flex:none; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;}
.tb6 .tb6-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tb6 .tb6-v{flex:none; font-variant-numeric:tabular-nums; font-size:11.5px;}
.tb6 .tb6-u{flex:none; font-size:9px;}
.tb7 .tb7-h,.tb7 .tb7-r{display:flex; align-items:center; gap:8px; font-size:12px;}
.tb7 .tb7-h{padding-bottom:10px; border-bottom:1px solid; margin-top:12px; font-size:11px; font-weight:800;}
.tb7 .tb7-r{padding:10px 0; border-top:1px solid;}
.tb7 .tb7-t{flex:1; min-width:0;}
.tb7 .tb7-h span:not(.tb7-t),.tb7 .tb7-m{flex:none; width:56px; text-align:center;}
.tb7 .tb7-m{font-size:13px;}

/* ===== 커머스 cm1~cm14 ===== */
.shop .cm-th{height:104px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; letter-spacing:.14em; position:relative;}
.shop .cm-th.sm{height:70px; font-size:9.5px;}
.shop .cm-th.xs{width:44px; height:44px; flex:none; font-size:8.5px; letter-spacing:.06em;}
.shop .cm-th.tall{height:130px;}
.shop .cm-nm{font-size:14px; font-weight:800; letter-spacing:-.01em; line-height:1.35;}
.shop .cm-pr{font-size:17px; font-weight:800; margin-top:7px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.cm1 .cm1-b{margin-top:12px;}
.cm1 .cm-st{font-size:11.5px; margin-top:6px;}
.cm1 .cm-st em{font-style:normal;}
.cm2 .cm2-g{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:13px;}
.cm2 .cm2-nm{font-size:12px; font-weight:700; margin-top:8px;}
.cm2 .cm2-pr{font-size:13px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums;}
.cm3 .cm3-r{display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid;}
.cm3 .cm3-m{flex:1; min-width:0;}
.cm3 .cm3-m b{display:block; font-size:12.5px;}
.cm3 .cm3-m em{display:block; font-style:normal; font-size:11px; margin-top:3px;}
.cm3 .cm3-q{flex:none; display:flex; align-items:center; border:1px solid; border-radius:8px; overflow:hidden;}
.cm3 .cm3-q i{font-style:normal; padding:5px 9px; font-size:12px;}
.cm3 .cm3-q b{padding:5px 8px; font-size:11.5px; font-variant-numeric:tabular-nums;}
.cm4 .cm4-cs{display:flex; gap:9px;}
.cm4 .cm4-c{width:26px; height:26px; border-radius:50%;}
.cm4 .cm4-c.on{outline:2px solid; outline-offset:2px;}
.cm4 .cm4-ss{display:flex; gap:7px;}
.cm4 .cm4-s{flex:1; border:1.5px solid; border-radius:8px; padding:8px 0; text-align:center; font-size:11.5px; font-weight:700;}
.cm4 .cm4-s.on{border-color:transparent;}
.cm5 .cm5-bg{position:absolute; top:9px; left:9px; font-size:10px; font-weight:800; border-radius:6px; padding:4px 9px; letter-spacing:.04em;}
.cm5 .cm5-prs{display:flex; align-items:baseline; gap:9px; margin-top:6px;}
.cm5 .cm5-old{font-size:11.5px; text-decoration:line-through;}
.cm5 .cm-pr{margin-top:0;}
.cm6 .cm6-r{display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid;}
.cm6 .cm6-m{flex:1; min-width:0;}
.cm6 .cm6-m b{display:block; font-size:12.5px;}
.cm6 .cm6-m em{display:block; font-style:normal; font-size:11.5px; margin-top:3px; font-variant-numeric:tabular-nums;}
.cm6 .cm6-h{flex:none; font-size:17px;}
.cm7{display:flex; gap:14px;}
.cm7 .cm7-l{flex:none; width:40%;}
.cm7 .cm7-r{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start;}
.cm7 .cm7-tag{font-size:10px; font-weight:800; border-radius:999px; padding:4px 10px; margin-bottom:8px;}
.cm7 .cm7-d{font-size:11.5px; margin-top:7px; line-height:1.6;}
.cm7 .btn1{margin-top:12px;}
.cm8 .cm8-r{display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid; font-size:12px;}
.cm8 .cm8-t{flex:none; font-weight:700;}
.cm8 .cm8-d{flex:1; min-width:0; text-align:right;}
.cm9 .cm9-top{display:flex; align-items:center; gap:14px;}
.cm9 .cm9-sc{font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1;}
.cm9 .cm9-st{font-size:14px; letter-spacing:.06em;}
.cm9 .cm9-n{font-size:11px; margin-top:3px;}
.cm9 .cm9-bars{margin-top:13px; padding-top:12px; border-top:1px solid;}
.cm9 .cm9-b{display:flex; align-items:center; gap:9px; font-size:10.5px; margin-top:6px;}
.cm9 .cm9-t{flex:1; height:6px; border-radius:999px; overflow:hidden;}
.cm9 .cm9-t i{display:block; height:100%; border-radius:999px;}
.cm9 .cm9-b em{flex:none; font-style:normal; width:30px; text-align:right; font-variant-numeric:tabular-nums;}
.cm10 .cm10-in{display:flex; gap:8px; margin-top:12px;}
.cm10 .cm10-in .f-inp{flex:1; min-width:0;}
.cm10 .cm10-b{flex:none; border-radius:9px; padding:10px 15px; font-size:12px; font-weight:700;}
.cm10 .cm10-ok{margin-top:9px; border-radius:8px; padding:9px 12px; font-size:11.5px; font-weight:700;}
.cm11 .cm11-g{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:13px;}
.cm11 .cm11-t{border:1px solid; border-radius:10px; padding:13px 4px; text-align:center;}
.cm11 .cm11-ic{width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:15px;}
.cm11 .cm11-n{display:block; font-size:10.5px; font-weight:700; margin-top:7px;}
.cm12 .cm12-b{display:flex; gap:11px; border:1.5px solid; border-radius:10px; padding:12px 13px;}
.cm12 .cm12-i{flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;}
.cm12 .cm12-t{font-size:12.5px; font-weight:700;}
.cm12 .cm12-d{font-size:11px; margin-top:3px; line-height:1.55;}
.cm12 .cm12-row{display:flex; justify-content:space-between; gap:10px; margin-top:12px; padding-top:11px; border-top:1px solid; font-size:12px;}
.cm13{text-align:center;}
.cm13 .cm13-ic{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:800; margin:0 auto;}
.cm13 .cm13-t{font-size:15px; font-weight:800; margin-top:12px;}
.cm13 .cm13-d{font-size:11.5px; margin-top:6px; line-height:1.6;}
.cm13 .cm13-no{display:flex; justify-content:space-between; gap:10px; border:1px solid; border-radius:9px; padding:11px 13px; margin-top:13px; font-size:12px;}
.cm14 .cm14-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cm14 .cm14-tag{font-size:10px; font-weight:800; border-radius:6px; padding:4px 10px; letter-spacing:.06em;}
.cm14 .cm14-time{font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;}
.cm14 .cm14-b{display:flex; align-items:center; gap:12px; margin-top:12px;}
.cm14 .cm14-m{flex:1; min-width:0;}
.cm14 .cm14-m .cm-pr{margin-top:5px; font-size:15px;}
.cm14 .cm14-track{height:7px; border-radius:999px; overflow:hidden; margin-top:12px;}
.cm14 .cm14-track span{display:block; height:100%; border-radius:999px;}
.cm14 .cm14-left{font-size:11px; margin-top:7px;}

/* ===== 테마 내보내기 ===== */
.pstat .p-exp{font-family:Consolas,'D2Coding',monospace; font-size:11px; font-weight:700; letter-spacing:-.04em;}
.exp-wrap{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(17,17,17,.42); opacity:0; pointer-events:none; transition:opacity .18s ease;}
.exp-wrap.open{opacity:1; pointer-events:auto;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .exp-wrap{background:rgba(0,0,0,.6);} }
:root[data-theme="dark"] .exp-wrap{background:rgba(0,0,0,.6);}
.exp-box{width:min(720px,100%); max-height:86vh; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.3); transform:translateY(10px); transition:transform .18s ease;
  /* 창 크기 조절 — 오른쪽 아래 모서리를 끌면 늘고 준다(끌기 전엔 내용 높이에 맞춤) */
  resize:both; min-width:340px; min-height:280px; max-width:98vw;}
/* 크기 조절 손잡이가 잘 보이도록 표식을 둔다(브라우저 기본 핸들이 흐릿해서) */
.exp-box::after{content:""; position:absolute; right:3px; bottom:3px; width:14px; height:14px; pointer-events:none;
  background:
    linear-gradient(135deg, transparent 0 45%, var(--sub) 45% 55%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 70%, var(--sub) 70% 80%, transparent 80% 100%);
  opacity:.5;}
.exp-wrap{align-items:flex-start;}
.exp-wrap .exp-box{position:relative; margin:auto;}
.exp-wrap.open .exp-box{transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .exp-wrap,.exp-box{transition:none;} }
.exp-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:15px 18px; border-bottom:1px solid var(--line);}
.exp-head b{font-size:14.5px; font-weight:800;}
.exp-htxt{min-width:0;}
.exp-htxt span{display:block; font-size:11.5px; color:var(--sub); margin-top:3px;}

/* 상단 큰 탭 — 공유·저장 / 테마 코드 */
.exp-main{display:flex; gap:6px; padding:12px 18px 0;}
.exp-main-t{flex:1; font-family:inherit; font-size:13px; font-weight:800; color:var(--sub);
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px 10px; cursor:pointer;}
.exp-main-t:hover{border-color:var(--accent); color:var(--accent);}
.exp-main-t.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.exp-pane{display:none; flex-direction:column; min-height:0; flex:1;}
.exp-pane.on{display:flex;}

/* 공유·저장 패널 */
.sv-prev{margin:14px 18px 0; padding:16px; background:var(--bg); border:1px solid var(--line); border-radius:12px;
  min-height:150px; display:flex; justify-content:center; align-items:flex-start; overflow:hidden;}
/* 무대(stage) — 실제 폭으로 그린 카드를 transform으로 줄여 담는 상자.
   transform은 레이아웃 크기를 안 바꾸므로 stage에 축소된 크기를 직접 지정한다. */
.sv-stage{position:relative; flex:none;}
.sv-prev .pal{box-shadow:0 8px 22px rgba(0,0,0,.14);}
/* 미리보기의 버튼줄 자리 = 저장될 PNG와 똑같이 브랜드 표기로 보여준다 */
.sv-prev .sv-brand{margin-left:auto; display:flex; align-items:baseline; gap:7px; white-space:nowrap;}
.sv-prev .sv-brand b{font-size:12px; font-weight:800; letter-spacing:-.01em; color:var(--ink);}
.sv-prev .sv-brand em{font-style:normal; font-size:11px; font-weight:600; color:var(--sub);}
.sv-row{display:flex; align-items:center; gap:10px; padding:14px 18px 0; flex-wrap:wrap;}
.sv-lab{font-size:12px; font-weight:700; color:var(--sub);}
.sv-seg button{padding:7px 12px; font-size:11.5px;}
.sv-dim{margin-left:auto; font-size:11px; color:var(--sub); font-variant-numeric:tabular-nums; white-space:nowrap;}
@media (max-width:600px){ .sv-dim{margin-left:0; width:100%;} }
.sv-btns{display:flex; gap:8px; padding:14px 18px 0; flex-wrap:wrap;}
.sv-b{flex:1; min-width:120px; font-family:inherit; font-size:13px; font-weight:700; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer;}
.sv-b:hover{border-color:var(--accent); color:var(--accent);}
.sv-b.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.sv-b.primary:hover{filter:brightness(1.06); color:#fff;}
.sv-note{padding:12px 18px 18px; font-size:11.5px; color:var(--sub); line-height:1.65;}
.exp-x{background:transparent; border:0; font-size:16px; line-height:1; color:var(--sub); cursor:pointer; padding:4px 6px; font-family:inherit;}
.exp-x:hover{color:var(--ink);}
.exp-tabs{display:flex; gap:6px; padding:12px 18px 0; flex-wrap:wrap;}
.exp-tab{font-family:inherit; font-size:12px; font-weight:700; color:var(--sub); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer;}
.exp-tab:hover{border-color:var(--accent); color:var(--accent);}
.exp-tab.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
/* 포맷별 "쓰는 법" 안내 — 코드만 주면 어디에 넣는지 모른다 */
.exp-hint{margin:12px 18px 0; padding:11px 13px; background:var(--soft); border-radius:9px;
  font-size:11.5px; line-height:1.75; color:var(--ink);}
.exp-hint b{color:var(--accent); margin-right:5px;}
.exp-hint code{background:rgba(0,0,0,.07); border-radius:4px; padding:1px 5px; font-size:11px;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .exp-hint code{background:rgba(255,255,255,.12);} }
:root[data-theme="dark"] .exp-hint code{background:rgba(255,255,255,.12);}
.exp-foot .sv-b{flex:none; min-width:0; padding:10px 14px; font-size:12.5px;}
.exp-code{flex:1; min-height:0; overflow:auto; margin:12px 18px; padding:14px 16px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  font-family:Consolas,'D2Coding',monospace; font-size:12px; line-height:1.7; color:var(--ink);
  white-space:pre; tab-size:2;}
.exp-foot{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 18px 16px; flex-wrap:wrap;}
.exp-note{font-size:11.5px; color:var(--sub);}
.exp-copy{font-family:inherit; font-size:13px; font-weight:800; color:#fff; background:var(--accent);
  border:0; border-radius:9px; padding:10px 20px; cursor:pointer;}
.exp-copy:hover{filter:brightness(1.06);}

/* ===== 색상으로 검색 ===== */
.ep-search-row{margin-bottom:10px; display:flex; gap:8px;}
.ep-search-row #ep-search{flex:1; min-width:0; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--accent);
  background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:9px 12px; cursor:pointer;}
.ep-search-row #ep-search:hover{border-color:var(--accent);}
/* 🎲 랜덤 — 글자 없이 아이콘만이라 폭을 고정해 검색 버튼이 줄지 않게 한다 */
.ep-search-row #ep-shuffle{flex:none; width:40px; font-size:15px; line-height:1; cursor:pointer;
  background:var(--bg); border:1px solid var(--line); border-radius:9px;}
.ep-search-row #ep-shuffle:hover{border-color:var(--accent);}
/* "AA 통과만 보기" 옆 남은 개수 */
.ep-opt .ep-aa-n{font-style:normal; font-size:10.5px; font-weight:800; color:var(--accent);
  font-variant-numeric:tabular-nums;}
.cs-box{width:min(680px,100%);}
/* 색으로 / 이름·쓰임새로 — 찾는 방법 두 갈래 */
.cs-tabs{display:flex; gap:6px; padding:12px 18px 0;}
.cs-tab{font-family:inherit; font-size:12px; font-weight:700; color:var(--sub); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer;}
.cs-tab:hover{border-color:var(--accent); color:var(--accent);}
.cs-tab.on{background:var(--ink); color:var(--card); border-color:var(--ink);}
.cs-bar{display:flex; gap:8px; align-items:center; padding:14px 18px 0;}
.cs-bar[hidden]{display:none;}
.cs-bar #cs-q{flex:1; min-width:0; font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:10px 12px;}
.cs-bar #cs-q:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.cs-bar #cs-qgo{flex:none; font-family:inherit; font-size:13px; font-weight:800; color:#fff; background:var(--accent);
  border:0; border-radius:9px; padding:10px 18px; cursor:pointer;}
/* 어디가 맞았는지(이름·쓰임새·컨셉) */
.cs-row .cs-w{flex:none; font-size:10.5px; font-weight:800; color:var(--sub);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;}
.cs-row .cs-m b i{font-style:normal; font-weight:600; color:var(--sub); font-size:11.5px;}
.cs-bar #cs-pick{flex:none; width:44px; height:38px; padding:0; border:1px solid var(--line); border-radius:9px; background:var(--bg); cursor:pointer;}
.cs-bar #cs-hex{flex:1; min-width:0; font-family:Consolas,'D2Coding',monospace; font-size:14px; font-weight:700;
  color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:10px 12px; letter-spacing:.04em;}
.cs-bar #cs-hex:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.cs-bar #cs-go{flex:none; font-family:inherit; font-size:13px; font-weight:800; color:#fff; background:var(--accent);
  border:0; border-radius:9px; padding:10px 18px; cursor:pointer;}
.cs-note{padding:10px 18px 0; font-size:11.5px; color:var(--sub); line-height:1.6;}
.cs-note b{color:var(--ink); font-family:Consolas,'D2Coding',monospace;}
.cs-list{flex:1; min-height:0; overflow:auto; padding:12px 18px 18px;}
.cs-empty{font-size:12.5px; color:var(--sub); padding:20px 0; text-align:center;}
.cs-row{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px;
  border:1px solid transparent; color:var(--ink); text-decoration:none;}
.cs-row:hover{background:var(--bg); border-color:var(--line); text-decoration:none;}
.cs-row .cs-n{flex:none; width:20px; font-size:11px; font-weight:800; color:var(--sub);
  font-variant-numeric:tabular-nums; text-align:right;}
.cs-row .cs-sw{flex:none; display:flex; border-radius:6px; overflow:hidden; border:1px solid var(--line);}
.cs-row .cs-c{width:22px; height:26px; display:block;}
.cs-row .cs-c.hit{outline:2px solid var(--accent); outline-offset:-2px; position:relative; z-index:1;}
.cs-row .cs-m{flex:1; min-width:0;}
.cs-row .cs-m b{display:block; font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs-row .cs-m em{display:block; font-style:normal; font-size:10.5px; color:var(--sub); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs-row .cs-e{flex:none; font-size:11.5px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums;}
.cs-row .cs-hex{flex:none; width:66px; text-align:right; font-family:Consolas,'D2Coding',monospace;
  font-size:11px; color:var(--sub);}
@media (max-width:560px){ .cs-row .cs-hex{display:none;} }

/* 검색 결과에서 넘어온 팔레트를 잠깐 강조 */
.pal-focus{outline:3px solid var(--accent); outline-offset:2px; animation:palflash 2.6s ease;}
@keyframes palflash{ 0%{box-shadow:0 0 0 0 rgba(255,107,53,.55);} 70%{box-shadow:0 0 0 16px rgba(255,107,53,0);} 100%{box-shadow:0 0 0 0 rgba(255,107,53,0);} }
@media (prefers-reduced-motion: reduce){ .pal-focus{animation:none;} }

/* ===== WCAG 등급 배지 — 통과 여부를 고르기 전에 보여준다 ===== */
.wcag{flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:19px; padding:0 7px; border-radius:999px; cursor:help;
  font-size:9.5px; font-weight:800; letter-spacing:.03em; border:1px solid transparent;}
.wcag.aaa{background:#E7F5EC; color:#15683A; border-color:#BFE3CD;}
.wcag.aa{background:#EAF1FB; color:#1F4E8C; border-color:#C6D9F2;}
.wcag.no{background:#FDECEC; color:#A32A2A; border-color:#F3C9C9;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wcag.aaa{background:#14301F; color:#7FD9A6; border-color:#255C3C;}
  :root:not([data-theme="light"]) .wcag.aa{background:#16273D; color:#9CC4F5; border-color:#2C4568;}
  :root:not([data-theme="light"]) .wcag.no{background:#3A1C1C; color:#F0A0A0; border-color:#5E2E2E;}
}
:root[data-theme="dark"] .wcag.aaa{background:#14301F; color:#7FD9A6; border-color:#255C3C;}
:root[data-theme="dark"] .wcag.aa{background:#16273D; color:#9CC4F5; border-color:#2C4568;}
:root[data-theme="dark"] .wcag.no{background:#3A1C1C; color:#F0A0A0; border-color:#5E2E2E;}
/* 토스트에 여러 줄(항목별 대비값)이 들어오므로 줄바꿈을 살린다 */
.toast{white-space:pre-line; text-align:left; max-width:min(460px,92vw); line-height:1.65;}

/* ===== 적용 예시 갤러리 ===== */
.exp-box.wide{width:min(920px,100%);}
/* 머리말 줄들은 줄어들지 않게 고정 — 안 그러면 목록이 밀려 아래와 겹쳐 보인다 */
.smp-cats{flex:none; display:flex; flex-wrap:wrap; gap:5px; padding:12px 18px 0;}
.smp-cats button{font-family:inherit; font-size:11.5px; font-weight:700; color:var(--sub); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:6px 11px; cursor:pointer;}
.smp-cats button:hover{border-color:var(--accent); color:var(--accent);}
.smp-cats button.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.smp-note{flex:none; padding:10px 18px 0; font-size:11.5px; color:var(--sub);}
/* 한 줄에 2개(큰 화면 목업은 1개) — 3개는 카드가 찌그러져 비교가 안 된다 */
/* 목록은 다단(masonry)으로 짠다 — 카드 비율이 제각각이라 행을 맞추면 빈칸이 크게 생긴다.
   (grid로 했을 땐 aspect-ratio 목업 높이가 행 높이에 반영되지 않아 아래 줄과 겹치는 문제도 있었다) */
/* 스크롤은 바깥이 맡는다 — 다단 요소가 스크롤까지 겸하면 넘치는 내용이 가로로 흘러 잘린다(7개 중 2개만 보이던 원인) */
.smp-scroll{flex:1 1 auto; min-height:0; max-height:62vh; overflow-y:auto; overflow-x:hidden; padding:12px 18px 20px;}
.exp-box[style*="height"] .smp-scroll{max-height:none;}
.smp-list{column-count:2; column-gap:18px;}
.smp-list > .smp-item{break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 18px; display:inline-block; width:100%;}
@media (max-width:700px){ .smp-list{column-count:1;} }
.smp-item{min-width:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card);}
.smp-cap{display:flex; align-items:center; gap:7px; padding:9px 11px; border-bottom:1px solid var(--line);}
.smp-cap b{font-size:11.5px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums;}
.smp-cap span{font-size:10.5px; color:var(--sub); font-family:Consolas,'D2Coding',monospace;}
.smp-use{margin-left:auto; font-family:inherit; font-size:10.5px; font-weight:700; color:var(--sub);
  background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px 9px; cursor:pointer; white-space:nowrap;}
.smp-use:hover{border-color:var(--accent); color:var(--accent);}
/* 목업이 셀보다 넓으면 넘치지 않게 담는다 */
.smp-prev{padding:14px; overflow:hidden;}
.smp-prev > *{max-width:100% !important;}
.smp-err{font-size:11.5px; color:var(--sub); padding:18px; text-align:center;}
/* 팝업 안 큰 버튼 2개(전체 화면·전체 리스트) — 카테고리 탭보다 확실히 도드라지게.
   `.smp-cats button`(0,1,1)이 더 세서 그냥 `.smp-big`(0,1,0)으로는 덮이지 않는다 — 부모를 붙여 특이도를 올린다. */
/* 두 버튼은 같은 색(강조색)으로 나란히 — 카테고리 탭과 확실히 구분되게 */
.smp-cats .smp-big{font-family:inherit; font-size:12.5px; font-weight:800; color:#fff; background:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:9px 15px; cursor:pointer; white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.18); margin-right:2px;}
.smp-cats .smp-big:hover{filter:brightness(1.07); color:#fff;}
.smp-cats .smp-big em{font-style:normal; font-size:10.5px; font-weight:800; opacity:.9;
  background:rgba(255,255,255,.25); border-radius:999px; padding:1px 6px; margin-left:3px;}
/* 전체 리스트일 때 카테고리 탭은 선택 표시가 없으므로 살짝 눌러둔다 */
.smp-list.grouped{column-count:1;}
.smp-list.grouped .gal-group + .gal-group{margin-top:22px;}
.smp-list.grouped .gal-masonry{column-count:2;}
@media (max-width:700px){ .smp-list.grouped .gal-masonry{column-count:1;} }

/* ===== 전체 화면 갤러리 ===== */
.gal-wrap{position:fixed; inset:0; z-index:95; background:var(--bg); display:none; flex-direction:column;}
.gal-wrap.open{display:flex;}
.gal-head{flex:none; display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-bottom:1px solid var(--line); background:var(--card);}
.gal-htxt{min-width:0; flex:1;}
.gal-htxt b{font-size:15px; font-weight:800;}
.gal-htxt span{display:block; font-size:11.5px; color:var(--sub); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gal-size{flex:none; display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.gal-size button{font-family:inherit; font-size:11.5px; font-weight:700; color:var(--sub);
  background:transparent; border:0; padding:7px 13px; cursor:pointer;}
.gal-size button.on{background:var(--ink); color:var(--bg);}
.gal-x{flex:none; font-family:inherit; font-size:12.5px; font-weight:800; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:8px 15px; cursor:pointer;}
.gal-x:hover{border-color:var(--accent); color:var(--accent);}
.gal-cats{flex:none; display:flex; flex-wrap:wrap; gap:5px; padding:12px 20px; border-bottom:1px solid var(--line);}
.gal-cats button{font-family:inherit; font-size:12px; font-weight:700; color:var(--sub); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:7px 13px; cursor:pointer;}
.gal-cats button:hover{border-color:var(--accent); color:var(--accent);}
.gal-cats button.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.gal-list{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:20px;}
/* 그룹 — 전체 보기에서 카테고리가 바뀌는 자리를 제목 줄로 나눈다 */
.gal-group + .gal-group{margin-top:26px;}
.gal-gtitle{display:flex; align-items:center; gap:9px; margin:0 0 14px;
  padding-bottom:10px; border-bottom:2px solid var(--line); font-size:15px; font-weight:800;}
.gal-gtitle b{flex:none; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:11.5px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;}
.gal-gtitle em{font-style:normal; font-size:11.5px; font-weight:700; color:var(--sub);}
/* masonry — 크기 버튼이 단 수를 정한다 */
.gal-masonry{column-gap:20px;}
.gal-masonry.size-s{column-count:4;}
.gal-masonry.size-m{column-count:3;}
.gal-masonry.size-l{column-count:2;}
.gal-masonry > .smp-item{break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 20px; display:inline-block; width:100%;}
@media (max-width:1200px){
  .gal-masonry.size-s{column-count:3;} .gal-masonry.size-m{column-count:2;} .gal-masonry.size-l{column-count:1;}
}
@media (max-width:780px){ .gal-masonry{column-count:1 !important;} }
/* 수량 배지 */
.gal-cats em,.smp-cats em{font-style:normal; font-size:10px; font-weight:800; opacity:.75; margin-left:1px;}
/* 좌측 패널 템플릿 그룹 라벨의 수량 — 몇 종인지 눌러보기 전에 보이게 */
.toolbar .lab em{font-style:normal; font-size:10px; font-weight:800; color:var(--accent);
  background:var(--soft); border-radius:999px; padding:1px 6px; margin-left:4px;}
.gal-cats button.all{background:var(--accent); color:#fff; border-color:var(--accent);}
.gal-cats button.all.on{background:var(--ink); border-color:var(--ink);}

/* 주의문 — 문장 대신 아이콘 하나만 둔다. 자세한 내용은 title(마우스 오버)로 본다. */
.warn-ico{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:20px; height:20px; border-radius:50%; background:#FFF6E8; border:1px solid #F5D9A8;
  color:#8A5A11; font-size:11px; cursor:pointer;}
.warn-ico:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .warn-ico{background:#33291A; border-color:#5A472A; color:#F2CE93;}
}
:root[data-theme="dark"] .warn-ico{background:#33291A; border-color:#5A472A; color:#F2CE93;}
.pal .use{padding:0 18px 16px; font-size:12px; color:var(--sub); line-height:1.7;}
.pal .use b{color:var(--ink); font-weight:700;}

/* 알약(999px)이면 WCAG 등급처럼 여러 줄이 들어올 때 납작한 타원으로 보인다 — 둥근 사각형으로. */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  background:var(--ink); color:var(--bg); font-size:12.5px; font-weight:700; padding:13px 18px; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:50;}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion: reduce){ .toast{transition:none;} }

footer{padding:30px 0 10px; line-height:1.8;}
footer .footer-brand{font-size:15px; font-weight:800; color:var(--ink);}
footer .footer-brand a{color:var(--ink); text-decoration:none;}
footer .footer-brand a:hover{text-decoration:underline;}
/* 사업자 정보 — 법적 고지용 잔글씨. 브랜드 줄과 달리 눈에 띄면 안 된다. */
footer .footer-biz{margin-top:10px; font-size:11.5px; font-weight:500; color:var(--sub); line-height:1.9;}
footer .footer-biz a{color:var(--sub); text-decoration:none;}
footer .footer-biz a:hover{text-decoration:underline;}

/* ---- 표제어편집 — 왼쪽 메뉴(확장/축소) ----
   모달(레이어 팝업)이 아니라 화면 왼쪽에 항상 붙어 있는 메뉴 개념이라 배경을 덮지 않는다.
   패널이 왼쪽 가장자리에서 펼쳐지고, 핸들 탭은 패널의 오른쪽 끝에 붙어서 패널이 펼쳐지는 만큼
   같이 오른쪽으로 따라간다(패널이 DOM에서 핸들보다 먼저 오게 해서 만든다 — width 전환,
   별도 프레임/iframe 없이 같은 문서 안에서 처리해야 표제어 입력이 미리보기에 바로 반영된다). */
.ep-side{position:fixed; top:0; left:0; height:100vh; z-index:60; display:flex;
  align-items:stretch; pointer-events:none;}
.ep-side *{pointer-events:auto;}
/* 헤더의 "◀ 좌 / 우 ▶" 토글로 고른 쪽에 패널을 붙인다 — 오른쪽을 고르면 위치와
   핸들 모양(둥근 모서리·그림자 방향)을 통째로 좌우 반전한다. */
.ep-side.dock-right{left:auto; right:0; flex-direction:row-reverse;}

.ep-handle{flex:none; align-self:center; writing-mode:vertical-rl; text-orientation:mixed;
  display:flex; align-items:center; gap:6px; font-family:inherit; font-size:12.5px; font-weight:800;
  color:var(--sub); background:var(--card); border:1px solid var(--line); border-left:0;
  border-radius:0 12px 12px 0; padding:16px 8px; cursor:pointer; box-shadow:6px 0 18px rgba(0,0,0,.08);}
.ep-handle:hover{color:var(--accent); border-color:var(--accent);}
.ep-side.dock-right .ep-handle{border-left:1px solid var(--line); border-right:0;
  border-radius:12px 0 0 12px; box-shadow:-6px 0 18px rgba(0,0,0,.08);}
.ep-handle-arrow{display:inline-block; transition:transform .28s ease;}
.ep-side.open .ep-handle-arrow{transform:rotate(180deg);}
@media (prefers-reduced-motion: reduce){ .ep-handle-arrow{transition:none;} }

/* 오른쪽 고정 버튼 — 패널을 따라다니지 않고 화면 오른쪽 끝에 항상 떠 있다.
   왼쪽 버튼과 같은 패널(#ep-side)을 열고 닫으므로 모양만 좌우 대칭으로 뒤집는다. */
.ep-handle-right{position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:61;
  border:1px solid var(--line); border-right:0; border-radius:12px 0 0 12px;
  box-shadow:-6px 0 18px rgba(0,0,0,.08);}
/* 패널을 오른쪽에 붙이면 패널 자체가 이미 오른쪽 가장자리를 차지하므로 이 고정 버튼은 겹쳐서 숨긴다 */
body.ep-dock-right .ep-handle-right{display:none;}

.ep-panel{flex:none; width:0; overflow:hidden; height:100vh; overflow-y:auto;
  background:var(--card); box-shadow:10px 0 30px rgba(0,0,0,.12);
  transition:width .32s cubic-bezier(.22,.9,.32,1);}
.ep-side.dock-right .ep-panel{box-shadow:-10px 0 30px rgba(0,0,0,.12);}
.ep-side.open .ep-panel{width:min(360px,88vw);}
@media (prefers-reduced-motion: reduce){ .ep-panel{transition:none;} }

.ep-panel-inner{width:min(360px,88vw); padding:22px 22px 28px;}
.ep-dhead{margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ep-dhead>span{font-size:15.5px; font-weight:800;}

/* 패널이 붙는 쪽을 직접 고르는 토글 — 고른 쪽에 선택 효과(강조색 배경)를 준다 */
.ep-dockseg{display:inline-flex; flex:none; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.ep-dockbtn{font-family:inherit; font-size:11px; font-weight:700; color:var(--sub); background:var(--bg);
  border:0; padding:5px 10px; cursor:pointer;}
.ep-dockbtn:hover{color:var(--accent);}
.ep-dockbtn.active{background:var(--accent); color:#fff;}

/* 컨셉 바로가기 — 351개로 늘어도 그대로 쓸 수 있는 셀렉트박스(헤더의 필 목록은 쓰지 않는다).
   셀렉트만으로는 355줄을 눈으로 훑어야 해서, 위에 검색 입력칸을 얹고 상위 몇 개를 버튼으로 뽑아 준다. */
.ep-jump-row{margin-bottom:12px;}
/* 겉보기엔 셀렉트박스 하나. 실제로는 두 겹이다 —
   아래에 진짜 <select>가 전체 폭으로 깔리고, 그 위를 입력칸이 오른쪽 화살표 구역만 남기고 덮는다.
   덕분에 "화살표=네이티브 드롭다운 / 글자쪽=타이핑"이 꼼수 없이 갈린다.
   (select.showPicker()는 크롬 계열 전용이고, 더블클릭 감지는 첫 클릭에서 이미 드롭다운이
    열려 버려 불가능하다. 그래서 클릭 영역 자체를 나누는 이 방식을 쓴다.)
   테두리는 바깥 래퍼가 갖는다 — 두 겹이 각자 테두리를 그리면 선이 겹쳐 두꺼워진다. */
.ep-jump-field{position:relative; --caret:46px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg);}
.ep-jump-field:focus-within{outline:2px solid var(--accent); outline-offset:-1px;}
.ep-jump-field select{display:block; width:100%; appearance:none; -webkit-appearance:none;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink);
  background:transparent; border:0; border-radius:8px; padding:8px var(--caret) 8px 10px;}
.ep-jump-field select:focus{outline:0;}   /* 포커스 표시는 래퍼가 대신 그린다 */
/* 네이티브 드롭다운 옵션 — 어두운 화면에선 옵션 배경이 투명(=흰색)이라 밝은 글자가 안 보였다.
   패널 배경/글자색을 명시해 라이트·다크 모두 읽히게 한다(색상검색 드롭다운). */
.ep-jump-field select option{background-color:var(--bg); color:var(--ink);}
.ep-jump-field #ep-jumpq{position:absolute; top:0; bottom:0; left:0; right:var(--caret);
  width:auto; font-family:inherit; font-size:13px; font-weight:600; color:var(--ink);
  background:var(--bg); border:0; border-radius:8px 0 0 8px; padding:0 10px;}
.ep-jump-field #ep-jumpq:focus{outline:0;}
/* 평상시엔 현재 컨셉명이 placeholder로 들어간다 — 흐린 색이면 셀렉트처럼 안 보이므로 본문색으로. */
.ep-jump-field #ep-jumpq::placeholder{color:var(--ink); opacity:1;}
.ep-jump-field #ep-jumpq:focus::placeholder{color:var(--sub);}
.ep-jump-caret{position:absolute; right:0; top:0; bottom:0; width:var(--caret);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--sub); pointer-events:none;}   /* 클릭은 밑의 select가 받는다 */
/* 이 세로선이 "여기부터는 다른 구역"이라는 표시다 — 없으면 어디를 눌러야 목록이 열리는지 모른다. */
.ep-jump-caret::before{content:''; position:absolute; left:0; top:6px; bottom:6px;
  width:1px; background:var(--line);}
.ep-jump-field:focus-within .ep-jump-caret{color:var(--accent);}
/* 손가락으로는 좁다 — 좁은 화면에서 화살표 구역을 더 넓힌다. */
@media (max-width:560px){ .ep-jump-field{--caret:54px;} }
/* 우선순위 상위 — 세로로 쌓는다. 컨셉명 길이가 제각각이라 가로로 흘리면 줄이 들쭉날쭉해진다.
   띄워서 덮지 않고 아래를 밀어낸다 — 패널이 overflow-y:auto라 띄우면 아래쪽에서 잘릴 수 있다. */
.ep-jump-top{display:flex; flex-direction:column; gap:4px; margin:7px 0 0;}
.ep-jump-go{display:flex; align-items:center; gap:7px; width:100%; font-family:inherit; font-size:12.5px;
  font-weight:600; text-align:left; color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ep-jump-go b{flex:none; min-width:26px; font-size:10.5px; font-weight:800; color:var(--sub);
  font-variant-numeric:tabular-nums;}
.ep-jump-go:hover{border-color:var(--accent); color:var(--accent);}
/* 1위만 강조 — Enter를 누르면 여기로 간다는 표시를 겸한다. */
.ep-jump-go.best{background:var(--soft); border-color:var(--accent); font-weight:800;}
.ep-jump-go.best b{color:var(--accent);}
.ep-jump-hint{margin:6px 0 0; font-size:11px; color:var(--sub); line-height:1.6;}

/* 상단에 고정돼 있던 도구막대(카드 적용 방식)를 이 메뉴 안으로 옮겨온다 — 위치만 바뀌고 동작은 그대로 */
.ep-modeblock .toolbar{position:static; background:transparent; border:0; padding:0; margin:0 0 18px;}
.ep-modeblock .toolbar .in{max-width:none; padding:0; flex-direction:column; align-items:stretch; gap:8px;}
.ep-modeblock .toolbar .hint{margin-left:0; font-size:11px;}
/* 각 카드 종류를 한 줄로: [라벨] [번호 버튼들] — 라벨은 왼쪽 고정폭, 버튼은 남는 폭에서 줄바꿈. */
/* 라벨은 위에, 번호 버튼은 아래 6칸 고정 격자로 — 한 줄에 6개씩 딱 떨어지게.
   (라벨을 옆에 두니 폭이 모자라 7번째가 어정쩡하게 줄바꿈됐다) */
.tpl-line{display:block;}
.tpl-line .lab{display:block; margin:0 0 5px; font-size:11.5px; font-weight:700; color:var(--sub); white-space:nowrap;}
.tpl-line .seg-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px;}
.tpl-line .seg-grid button{min-width:0; padding:6px 0;}
.tpl-line .seg:not(.seg-grid){display:flex; width:100%;}
.tpl-line[hidden]{display:none;}

/* 템플릿 그룹 탭 — 16줄을 다 펼치지 않고 고른 그룹만 연다 */
.tpl-tabs{display:flex; flex-wrap:wrap; gap:4px; margin:2px 0 4px;}
.tpl-tab{font-family:inherit; font-size:11px; font-weight:700; color:var(--sub); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:5px 9px; cursor:pointer; white-space:nowrap;}
.tpl-tab:hover{border-color:var(--accent); color:var(--accent);}
.tpl-tab.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.tpl-tab em{font-style:normal; font-size:9.5px; font-weight:800; opacity:.7; margin-left:3px;}
/* 펼쳐보기는 탭들과 섞이지 않게 항상 마지막 줄을 통째로 차지한다(auto 마진이면 탭 사이에 끼여 안 보였다) */
.tpl-expand{flex:0 0 100%; order:99; font-family:inherit; font-size:11px; font-weight:800; color:var(--accent);
  background:var(--soft); border:1px solid var(--accent); border-radius:999px; padding:6px 11px;
  cursor:pointer; white-space:nowrap; margin-top:2px;}
.tpl-expand.on{background:var(--accent); color:#fff;}
.tpl-tabs.expanded .tpl-tab{opacity:.45;}

/* 미리보기 배경색 컬러픽커 — 데모 카드가 얹히는 캔버스 색을 직접 골라 바꾼다. */
.ep-bg-row{display:flex; align-items:center; gap:9px; margin:0 0 10px;}
.ep-bg-row>span{font-size:11px; font-weight:700; color:var(--sub);}
.ep-bg-row input[type=color]{width:34px; height:26px; padding:0; border:1px solid var(--line); border-radius:7px; background:none; cursor:pointer;}
.ep-bg-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px;}
.ep-bg-row input[type=color]::-webkit-color-swatch{border:0; border-radius:4px;}
.ep-bg-hex{font-size:11.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.ep-bg-row #ep-bg-reset{margin-left:auto; font-family:inherit; font-size:11px; font-weight:700; color:var(--sub);
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer;}
.ep-bg-row #ep-bg-reset:hover{border-color:var(--accent); color:var(--accent);}

/* 옵션 토글(체크박스) — 색상바 표시 / 패널색=팔레트 */
.ep-opt-row{display:flex; flex-wrap:wrap; gap:10px 14px; margin:2px 0 12px;}
.ep-opt{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--sub); cursor:pointer;}
.ep-opt input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer;}
/* 색상바(스와치) 숨김 토글 */
body.sw-off .sw-wrap{display:none;}
/* 빈 소개문은 자리 차지 안 하게 */
#pintro:empty{display:none; margin:0;}

/* 공유 링크 복사 버튼 */
.ep-share-row{margin:2px 0 0;}
.ep-share-row #ep-share{width:100%; font-family:inherit; font-size:12px; font-weight:700; color:var(--accent);
  background:var(--soft); border:1px solid var(--accent); border-radius:9px; padding:9px; cursor:pointer;}
.ep-share-row #ep-share:hover{background:var(--accent); color:#fff;}

/* 색 조정 묶음과 그 아래(컨셉 셀렉트 등)를 나누는 구분선 */
.ep-divider{height:1px; background:var(--line); margin:16px 0 18px;}

/* 밝기·감마 슬라이더 — 팔레트 색상값 자체를 조정(스와치·HEX·데모 톤 반영) */
.ep-tone-row{display:flex; align-items:center; gap:9px; margin:0 0 10px;}
.ep-tone-row>span:first-child{flex:none; width:30px; font-size:11px; font-weight:700; color:var(--sub);}
.ep-tone-row input[type=range]{flex:1; min-width:0; height:22px; accent-color:var(--accent); cursor:pointer;}
.ep-tone-v{flex:none; width:38px; text-align:right; font-size:11px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.ep-tone-row #ep-tone-reset{flex:none; font-family:inherit; font-size:13px; color:var(--sub); background:transparent;
  border:1px solid var(--line); border-radius:8px; width:28px; height:26px; cursor:pointer;}
.ep-tone-row #ep-tone-reset:hover{border-color:var(--accent); color:var(--accent);}

.ep-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px;
  padding-bottom:16px; border-bottom:1px solid var(--line);}
.ep-nav .navbtn{font-size:12px; font-weight:700; color:var(--sub); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; background:var(--bg); flex:none;}
.ep-nav .navbtn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none;}
.ep-nav .navpos{font-size:11px; color:var(--sub); font-variant-numeric:tabular-nums; flex:none;}

.ep-head{font-size:13px; color:var(--sub); line-height:1.7; margin-bottom:14px;}
/* 카드 문구 — 볼드 펼침메뉴(기본 닫힘, ▾). 누르면 아래 편집칸이 펼쳐진다. */
.ep-cardhead{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:inherit; font-size:14px; font-weight:800; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:11px 14px; margin-top:4px; cursor:pointer; text-align:left;}
.ep-cardhead:hover{border-color:var(--accent);}
.ep-cardarrow{flex:none; font-size:12px; color:var(--sub); transition:transform .2s ease;}
.ep-cardhead.open .ep-cardarrow{transform:rotate(180deg);}
.ep-cardgrid{margin-top:10px;}
.ep-demobody{margin-top:10px;}
/* display:flex/grid가 [hidden]을 덮어써 안 숨겨지는 것 방지 — 데모 입력·카드 문구는 기본 닫힘/토글. */
.ep-cardhead[hidden]{display:none;}
.ep-cardgrid[hidden]{display:none;}
.ep-demobody[hidden]{display:none;}
@media (prefers-reduced-motion: reduce){ .ep-cardarrow{transition:none;} }
.ep-grid{display:grid; grid-template-columns:1fr; gap:10px;}
/* 라벨+입력칸을 한 줄에 둔다 — 라벨 줄 / 입력 줄로 나뉘어 2줄씩 늘어나지 않게 */
.ep-row{display:flex; flex-direction:row; align-items:center; gap:8px;}
.ep-row[hidden]{display:none;}   /* display:flex가 hidden 속성을 덮어써서 안 숨겨지는 것 방지 */
.ep-row>span{flex:none; width:64px; font-size:11px; font-weight:700; color:var(--sub); text-align:right;}
.ep-row input{flex:1; min-width:0; font-family:inherit; font-size:12.5px; font-weight:500; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 9px;}
.ep-row input:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.ep-actions{margin-top:16px;}
.ep-actions button{font-family:inherit; font-size:12px; font-weight:700; color:var(--sub); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer;}
.ep-actions button:hover{border-color:var(--accent); color:var(--accent);}

/* 화면 위쪽 양끝의 이전/다음 화살표 — 슬라이드쇼처럼 바로 넘겨볼 수 있게.
   예전엔 메뉴를 펼치면 숨겼는데(패널 안에도 이전/다음이 있어서), 펼친 채로 쓰면
   "기능이 사라졌다"고 느껴져서 **항상 보이고 항상 눌리도록** 바꿨다.
   대신 패널과 겹치지 않게, 펼쳐진 쪽 화살표만 패널 폭만큼 안쪽으로 밀어준다. */
.ep-fly{position:fixed; top:22px; z-index:55; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--card); border:2px solid var(--accent); color:var(--accent); font-size:28px; font-weight:800; line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.18); text-decoration:none;
  transition:left .32s cubic-bezier(.22,.9,.32,1), right .32s cubic-bezier(.22,.9,.32,1), transform .15s ease;}
.ep-fly:hover{background:var(--accent); color:#fff; text-decoration:none; transform:scale(1.06);}
.ep-fly-prev{left:16px;}
.ep-fly-next{right:16px;}
/* 패널이 왼쪽에 펼쳐지면 왼쪽 화살표를, 오른쪽에 펼쳐지면 오른쪽 화살표를 그만큼 비켜준다.
   패널 폭(360) + 손잡이 탭(약 32) + 여백(16) = 408 */
.ep-side.open:not(.dock-right) ~ .ep-fly-prev{left:calc(min(360px,88vw) + 48px);}
.ep-side.open.dock-right ~ .ep-fly-next{right:calc(min(360px,88vw) + 48px);}
@media (prefers-reduced-motion: reduce){ .ep-fly{transition:none;} }
@media (max-width:560px){ .ep-fly{width:46px; height:46px; font-size:23px; top:14px;} .ep-fly-prev{left:8px;} .ep-fly-next{right:8px;} }