/* B&VIIT content pages (10/29) — shared component layer.
   Source of truth: bnviit-local-site-20261015/components/README.md (tokens, type scale, hover rules).
   10/28: form/button/label/tab/dialog/location values re-matched to the final site (major6 fork, 5199):
   apps/bnviit-service-pages-20261021/app/src/{demo.css,service.css,shell-base.css} +
   apps/bnviit-component-demo-20261020/app/src/{consistency-1027.css,disabled-fields.css,paired-actions.css,text-button-sizing.css}.
   Rules: radius 0 everywhere · mint only for actions/indicators · black text on mint ·
   hover = invert (bordered) or surface (transparent) · no translate/opacity hovers · pointer on all clickables. */
:root{--ink:#111110;--mint:#0FDFDD;--mint-light:#BAFDFE;--mint-wash:#e7fbfb;--text-strong:#323232;--text-2:#6f6e69;--text-3:#8a8984;--line:#e5e5e5;--line-2:#d6d5d0;--surface:#f5f5f5;--surface-2:#ebebe8;--placeholder:#f0efec;--focus:#087b85;--error:#d9442f;--warn-bg:#fde8ea;--shadow-panel:0 16px 40px rgba(17,17,16,.14),0 2px 6px rgba(17,17,16,.06);--ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.2,.8,.2,1);--ease-in:cubic-bezier(.16,1,.3,1);--w-wide:1200px;--w-dock:1044px;--w-text:960px;--gutter:clamp(36px,5.6vw,80px);--sec:clamp(96px,12vw,168px);--grid-col:clamp(16px,2.6vw,32px);--grid-row:clamp(28px,2.8vw,40px)}

/* --cp-main-pt = top padding under the fixed GNB. Groups that pull a hero up under the GNB use
   margin-top:calc(-1 * var(--cp-main-pt)) so they follow every padding change.
   10/29: pages with a GNB subnav (data-subnav; the location row moved from the body into the header card, 40px taller)
   keep the service pages' header–title gap (PC 108, mobile 24; header card bottom 144 / 112). */
.cp-main{--cp-main-pt:clamp(132px,13vw,176px);font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--ink);letter-spacing:-.01em;padding:var(--cp-main-pt) 0 var(--sec)}
.cp-main[data-subnav]{--cp-main-pt:252px}
.cp-main *,.cp-main *::before,.cp-main *::after{box-sizing:border-box;border-radius:0}
:where(.cp-main) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
:where(.cp-main) :where(ul,ol){padding:0;list-style:none}
:where(.cp-main) img{display:block;max-width:100%}
.cp-main :where(a,button,[role=button],summary,label[for],select){cursor:pointer}
:where(.cp-main) a{color:inherit;text-decoration:none}
:where(.cp-main) :where(button){font:inherit;color:inherit;background:none;border:0;padding:0}
.cp-main :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.cp-main :is(a[href],button:not(:disabled)):active{scale:.98;transition:scale .12s var(--ease)}
.cp-main :is(button:disabled,[aria-disabled=true]){opacity:.35;cursor:default}

/* hidden must win over display rules (flex/grid components) */
.cp-main [hidden],.cp-main [data-more-hidden]{display:none!important}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Layout */
.cp-wrap{width:min(var(--w-wide),calc(100% - var(--gutter)));margin-inline:auto}
.cp-wrap[data-width=dock]{width:min(var(--w-dock),calc(100% - var(--gutter)))}
.cp-wrap[data-width=text]{width:min(var(--w-text),calc(100% - var(--gutter)))}
.cp-section{margin-top:clamp(72px,9vw,120px)}
.cp-section:first-child{margin-top:0}
.cp-stack{display:flex;flex-direction:column;gap:16px}
.cp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cp-between{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}


/* Page head — site .service-heading: h1 38/28 · 500 · -.03em · 1.4, 12px to the lead (19/16, text-2, 1.85) */
.cp-head{margin-bottom:clamp(40px,5vw,64px)}
.cp-eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--text-3);margin-bottom:14px}
.cp-head h1{font-size:clamp(28px,2.7vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.4}
.cp-lead{margin-top:12px;font-size:clamp(16px,1.35vw,19px);line-height:1.85;color:var(--text-2);max-width:42em}
.cp-h2{font-size:clamp(26px,2.25vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.35}
.cp-h3{font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.03em;line-height:1.5}
.cp-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:40px}
.cp-body{font-size:clamp(15px,1.15vw,17px);line-height:1.85;color:var(--text-strong)}
.cp-body p+p{margin-top:1em}
.cp-sub{font-size:14px;line-height:1.7;color:var(--text-2)}
.cp-meta{font-size:13px;line-height:1.6;color:var(--text-3)}
.cp-count{font-size:14px;color:var(--text-2)}.cp-count b{color:var(--ink);font-weight:600}

/* Buttons — radius 0. Outline = site .bv-hours-btn (46, 14/600, invert hover).
   Primary = site service Main .primary-button (52, 17/600, mint → ink hover, no shadow).
   The mint glow is the consultation CTA only (components/README.md §2-1): opt in with data-glow. */
.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px 0 16px;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;border:1px solid var(--ink);background:#fff;color:var(--ink);transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.cp-btn:not(:disabled,[aria-disabled=true]):hover,.cp-btn:focus-visible{background:var(--ink);color:#fff}
.cp-btn[data-variant=primary]{gap:12px;min-height:52px;padding:0 30px;font-size:17px;background:var(--mint);border-color:var(--mint);color:var(--ink)}
.cp-btn[data-variant=primary]:not(:disabled,[aria-disabled=true]):hover,.cp-btn[data-variant=primary]:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
.cp-btn[data-variant=primary][data-glow]{box-shadow:0 12px 30px rgba(15,223,221,.38),0 3px 8px rgba(15,223,221,.22)}
.cp-btn[data-variant=primary][data-glow]:not(:disabled):hover,.cp-btn[data-variant=primary][data-glow]:focus-visible{box-shadow:0 12px 30px rgba(17,17,16,.32),0 3px 8px rgba(17,17,16,.2)}
/* Not a site component (site uses Outline + Main only). Kept so existing markup does not break. */
.cp-btn[data-variant=dark]{background:var(--ink);color:#fff}
.cp-btn[data-variant=dark]:not(:disabled,[aria-disabled=true]):hover,.cp-btn[data-variant=dark]:focus-visible{background:#fff;color:var(--ink)}
.cp-btn[data-size=lg]{min-height:56px;padding:0 32px;font-size:17px}
.cp-btn[data-size=sm]{gap:8px;min-height:40px;padding:0 16px;font-size:13px}
.cp-btn[data-block]{width:100%}
/* Text button — site .original-text-button + .bv-textbtn: content width, 14/700, 38px face that grows in on hover. */
.cp-textbtn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;width:fit-content;max-width:100%;min-height:38px;padding:7px 14px;margin:-7px -14px;font-size:14px;font-weight:700;line-height:1.7;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.cp-textbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(17,17,16,.08);opacity:0;transform:scale(.9);transition:opacity .25s var(--ease),transform .3s var(--ease-out)}
.cp-textbtn:not(:disabled,[aria-disabled=true]):hover::before,.cp-textbtn:focus-visible::before{opacity:1;transform:scale(1)}
.cp-textbtn[data-tone=muted]{color:var(--text-2)}
/* The service shell's a:not(.original-text-button):hover{color:inherit} would give link text buttons the parent's color on hover. */
a.cp-textbtn:hover{color:var(--ink)}a.cp-textbtn[data-tone=muted]:hover{color:var(--text-2)}
/* Square icon button — site 네모 아이콘 (.b-icon: 40px, 1px ink line, invert hover). Placed right after a .cp-input
   (search submit) it becomes part of the field: 46px box with the field line colour #e5e5e5. */
.cp-icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;flex:none;border:1px solid var(--ink);background:#fff;color:var(--ink);transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.cp-input+.cp-icon-btn{width:46px;height:46px;border-color:var(--line)}
.cp-icon-btn:not(:disabled):hover,.cp-icon-btn:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
.cp-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.cp-actions[data-align=center]{justify-content:center}
.cp-actions[data-align=end]{justify-content:flex-end}
/* Paired actions — site paired-actions.css: one Outline + one Main, equal width (the longer label),
   right-aligned (data-align=center → centred), 52px, 17/600/1.35, gap 16. Mobile: full width, two equal columns.
   .cp-pair is always a pair; .cp-actions / .cp-dialog-actions become one when they hold exactly Outline + Main. */
.cp-pair,
:is(.cp-actions,.cp-dialog-actions):has(>.cp-btn[data-variant=primary]):has(>.cp-btn:not([data-variant])):not(:has(>:nth-child(3))){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:max-content;max-width:100%;min-width:0;gap:16px;align-items:stretch;margin-left:auto}
.cp-pair[data-align=center],.cp-actions[data-align=center]:has(>.cp-btn[data-variant=primary]):has(>.cp-btn:not([data-variant])):not(:has(>:nth-child(3))){margin-right:auto}
.cp-pair[data-align=start]{margin-left:0}
.cp-pair>.cp-btn,
:is(.cp-actions,.cp-dialog-actions):has(>.cp-btn[data-variant=primary]):has(>.cp-btn:not([data-variant])):not(:has(>:nth-child(3)))>.cp-btn{width:100%;min-width:0;max-width:100%;height:auto;min-height:52px;padding:10px 30px;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em;white-space:normal;overflow-wrap:anywhere}

/* Chips / filters (hover = invert) */
.cp-chips{display:flex;flex-wrap:wrap;gap:8px}
.cp-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-2);background:#fff;font-size:14px;font-weight:500;color:var(--text-strong);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.cp-chip:not(:disabled):hover,.cp-chip[aria-pressed=true],.cp-chip[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
/* Keyboard focus uses the global 2px ring only — never the inverted face, which means "selected". */
/* Selected choice is also bold (site review choice / in-page tab rule) */
.cp-chip[aria-pressed=true],.cp-chip[aria-selected=true]{font-weight:600}
.cp-chip small{margin-left:6px;font-size:12px;opacity:.7}

/* Tabs — site tabs (demo.css [data-slot=tabs-*], member recovery): 1px line rail, 10px padding,
   inactive 400 text-2, selected 600 ink + 2px mint bar above the rail, no hover colour change. */
.cp-tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cp-tab{position:relative;flex:none;padding:10px 0 12px;font-size:clamp(15px,1.2vw,17px);font-weight:400;line-height:1.75;color:var(--text-2);transition:color .25s var(--ease)}
.cp-tab:is([aria-selected=true],[aria-pressed=true],[aria-current=page],[aria-current=true]){color:var(--ink);font-weight:600}
.cp-tab:is([aria-selected=true],[aria-pressed=true],[aria-current=page],[aria-current=true])::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mint)}
/* Roving tablists (role=tab: focus moves with the selection) drop the ring like the site tabs; filter tabs keep it */
.cp-main .cp-tab[role=tab]:focus-visible{outline:none}
.cp-tabpanel[hidden]{display:none}

/* Labels & badges — site AuxiliaryLabel (.auxiliary-label): 22px (5/9 padding), 12/500/1, surface + text-2.
   Required/optional markers use this label, never "*":
   field   <label for="x">이메일 (선택)</label>   ← 10/29: 선택은 라벨 뒤 '(선택)' 일반 텍스트(서비스 '내용 (선택)'과 같음), 배지 쓰지 않음
   consent <label class="cp-check"><input …><span><span class="cp-consent-flag" data-required>[필수]</span> 문장</span></label>
   ← 10/30: 동의 항목은 서비스(회원가입·예약)와 같은 앞쪽 [필수]/[선택] 굵은 표기, [선택]은 회색 */
.cp-label{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:5px 9px;font-size:12px;font-weight:500;line-height:1;letter-spacing:-.01em;background:var(--surface);color:var(--text-2);white-space:nowrap;vertical-align:middle}
.cp-label[data-tone=current]{background:var(--mint-light);color:var(--ink)}
.cp-label[data-tone=complete]{background:var(--surface);color:var(--ink)}
.cp-label[data-tone=mint]{background:var(--mint-light);color:var(--ink)}
.cp-label[data-tone=ink]{background:var(--ink);color:#fff}
.cp-label[data-tone=line]{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.cp-label[data-tone=warn]{background:var(--warn-bg);color:var(--error)}
.cp-label[data-tone=muted]{background:var(--surface);color:var(--text-3)}
.cp-check>span>.cp-label{margin-left:8px}
.cp-consent-flag{font-weight:600;white-space:nowrap}
.cp-consent-flag:not([data-required]){color:var(--text-2)}

/* Cards */
.cp-grid{display:grid;gap:var(--grid-row) var(--grid-col);grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.cp-grid[data-cols="4"]{--cols:4}.cp-grid[data-cols="2"]{--cols:2}
.cp-card{display:flex;flex-direction:column;min-width:0}
.cp-card-media{position:relative;aspect-ratio:var(--ratio,4/3);overflow:hidden;background:var(--placeholder);outline:1px solid rgba(17,17,16,.06);outline-offset:-1px}
.cp-card-media img{width:100%;height:100%;object-fit:cover}
.cp-card-body{padding-top:16px;display:flex;flex-direction:column;gap:8px}
.cp-card-title{font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.03em;line-height:1.5}
a.cp-card{transition:background-color .25s var(--ease)}
a.cp-card:hover .cp-card-title,a.cp-card:focus-visible .cp-card-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cp-panel{background:var(--surface);padding:clamp(24px,3vw,40px)}
.cp-box{border:1px solid var(--line);padding:clamp(20px,2.4vw,32px);background:#fff}

/* Lists (board rows) */
.cp-list{border-top:1px solid var(--ink)}
.cp-list>li{border-bottom:1px solid var(--line)}
.cp-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 24px;padding:22px clamp(8px,1.2vw,16px);transition:background-color .25s var(--ease)}
a.cp-list-row:hover,a.cp-list-row:focus-visible{background:var(--surface)}
.cp-list-title{font-size:clamp(15px,1.2vw,17px);font-weight:500;line-height:1.6;letter-spacing:-.02em}
.cp-list-side{font-size:14px;color:var(--text-3);white-space:nowrap}

/* Definition / table */
.cp-dl{display:grid;grid-template-columns:minmax(96px,160px) minmax(0,1fr);border-top:1px solid var(--ink)}
.cp-dl>dt,.cp-dl>dd{padding:18px 16px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7}
.cp-dl>dt{color:var(--text-2);background:var(--surface);font-weight:500}
.cp-table-scroll{overflow-x:auto;border-top:1px solid var(--ink)}
.cp-table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px;line-height:1.6}
.cp-table th,.cp-table td{padding:16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cp-table thead th{background:var(--surface);font-weight:600;font-size:14px;color:var(--text-strong);white-space:nowrap}
.cp-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Accordion */
.cp-acc{border-top:1px solid var(--ink)}
.cp-acc>details{border-bottom:1px solid var(--line)}
.cp-acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 8px;list-style:none;font-size:clamp(15px,1.2vw,17px);font-weight:500;line-height:1.5;transition:background-color .25s var(--ease)}
.cp-acc summary::-webkit-details-marker{display:none}
.cp-acc summary:hover{background:var(--surface)}
.cp-acc summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -3px;transition:rotate .4s var(--ease)}
.cp-acc details[open] summary::after{rotate:225deg;translate:0 3px}
.cp-acc-body{padding:0 8px 24px;font-size:15px;line-height:1.85;color:var(--text-strong)}

/* Forms — site generic fields (service demo.css .generic-field, disabled-fields.css, consistency-1027.css):
   46px one-line boxes, 1px #e5e5e5, 16px/1.7 text, mint caret, focus = mint border (no ring/shadow),
   no hover change, error border #d9442f (kept while focused), disabled = white box + 35% text,
   textarea 136px fixed with inner scroll. */
.cp-form{display:flex;flex-direction:column;gap:24px}
.cp-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.cp-field>label,.cp-field>.cp-field-label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;font-weight:500;line-height:1.75;color:var(--ink)}
.cp-input,.cp-select,.cp-textarea{display:block;width:100%;min-width:0;height:46px;padding:10px 12px;border:1px solid var(--line);background:#fff;font:inherit;font-size:16px;font-weight:400;line-height:1.7;letter-spacing:-.01em;color:var(--ink);caret-color:var(--mint);transition:border-color .25s var(--ease)}
.cp-textarea{height:136px;min-height:136px;resize:none;overflow-y:auto}
/* Long body (e.g. 후기 본문 1500자, 상담 문의내용): content-layer variant, same fixed-height + inner-scroll rule */
.cp-textarea[data-size=lg]{height:240px;min-height:240px}
.cp-input::placeholder,.cp-textarea::placeholder{color:var(--text-3);opacity:1}
/* Native select (fallback before/without content.js): same box + lucide chevron-down 16px at 15px from the right */
select.cp-select{appearance:none;-webkit-appearance:none;padding:10px 43px 10px 12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23111110'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") no-repeat right 15px center/16px 16px;cursor:pointer}
select.cp-select:has(option[value=""]:checked){color:var(--text-3)}
select.cp-select option{color:var(--ink)}
/* Enhanced select: the native element stays in the form (value, validation, events) but is visually hidden */
select.cp-select[data-cp-enhanced]{position:absolute!important;width:1px!important;min-width:0!important;height:1px!important;padding:0!important;margin:-1px 0 0!important;border:0!important;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%)}
/* Custom select trigger (site .generic-select-trigger) */
.cp-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px 10px 12px;text-align:left;cursor:pointer}
.cp-select-trigger[data-placeholder]{color:var(--text-3)}
.cp-select-value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-select-chevron{flex:none;width:16px;height:16px;color:var(--ink);transition:transform .2s ease;pointer-events:none}
.cp-select-trigger[aria-expanded=true] .cp-select-chevron{transform:rotate(180deg)}
.cp-select-trigger:disabled .cp-select-chevron{color:inherit}
.cp-main .cp-select-trigger:active{scale:none}
/* Panel (site .generic-select-content): trigger width, 4px gap, 4px padding, 1px line, shadow-panel, radius 0 */
.cp-select-panel{position:fixed;z-index:2000;box-sizing:border-box;max-width:calc(100vw - 32px);max-height:320px;overflow-x:hidden;overflow-y:auto;padding:4px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-panel);scrollbar-width:thin;overscroll-behavior:contain}
/* Option rows: 40px, 15/1.4, padding 0 36 0 12, hover/keyboard #f5f5f5, selected 600 + 10px ink square at right 16 */
.cp-select-opt{position:relative;display:flex;align-items:center;min-height:40px;padding:0 36px 0 12px;font-size:15px;font-weight:400;line-height:1.4;letter-spacing:-.01em;color:var(--ink);word-break:keep-all;cursor:pointer;user-select:none}
.cp-select-opt[data-highlighted]{background:var(--surface)}
.cp-select-opt[aria-selected=true]{font-weight:600}
.cp-select-opt[aria-disabled=true]{cursor:default}
.cp-select-ind{position:absolute;top:50%;right:16px;width:16px;height:16px;margin-top:-8px;color:var(--ink);visibility:hidden}
.cp-select-opt[aria-selected=true]>.cp-select-ind{visibility:visible}
/* States (after the global focus ring so they win on equal specificity) */
.cp-main :is(.cp-input,.cp-textarea,.cp-select):is(:focus,:focus-visible){outline:none;border-color:var(--mint);box-shadow:none}
.cp-main .cp-select-trigger[aria-expanded=true]{border-color:var(--line)}
.cp-main .cp-field[data-error] :is(.cp-input,.cp-select,.cp-textarea),.cp-main :is(.cp-input,.cp-select,.cp-textarea)[aria-invalid=true]{border-color:var(--error)}
.cp-main :is(.cp-input,.cp-textarea,.cp-select):disabled{opacity:1;background-color:#fff;border-color:var(--line);color:color-mix(in srgb,var(--ink) 35%,transparent);-webkit-text-fill-color:color-mix(in srgb,var(--ink) 35%,transparent);cursor:default}
.cp-main :is(.cp-input,.cp-textarea):disabled::placeholder{color:rgb(138 137 132/35%);-webkit-text-fill-color:rgb(138 137 132/35%)}
.cp-main .cp-select-trigger[data-placeholder]:disabled{color:rgb(138 137 132/35%);-webkit-text-fill-color:rgb(138 137 132/35%)}
.cp-main :is(.cp-input,.cp-textarea,.cp-select,.cp-check input){scroll-margin-top:140px}
.cp-error{margin:0;font-size:13px;line-height:1.5;color:var(--error)}
.cp-help{font-size:13px;line-height:1.7;color:var(--text-2)}
.cp-counter{align-self:flex-end;font-size:13px;line-height:1.7;color:var(--text-2);font-variant-numeric:tabular-nums}
.cp-textarea+.cp-counter{margin-top:-8px}
.cp-fields-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
/* Checkbox / radio — site [data-slot=checkbox] / [data-slot=radio-group-item]: 20px square, 1px ink border.
   Checkbox checked = mint fill + mint border + ink check (lucide check 15px). Radio = square + 10px ink square. */
.cp-check{display:inline-flex;align-items:flex-start;gap:12px;min-height:28px;font-size:15px;line-height:1.7;cursor:pointer}
.cp-check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:3px 0 0;border:1px solid var(--ink);background:#fff;display:grid;place-items:center;color:var(--ink);cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.cp-check input[type=checkbox]:checked{background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23111110'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") no-repeat center/16px 16px;border-color:var(--mint)}
.cp-check input[type=checkbox]:indeterminate{background:var(--mint);border-color:var(--mint)}
.cp-check input[type=checkbox]:indeterminate::after{content:"";width:10px;height:2px;background:var(--ink)}
.cp-check input[type=radio]:checked{background:#fff;border-color:var(--ink)}
.cp-check input[type=radio]:checked::after{content:"";width:10px;height:10px;background:var(--ink)}
.cp-check input:disabled{opacity:.35;cursor:default}
.cp-check:has(input:disabled){cursor:default}
.cp-main .cp-field[data-error] .cp-check input:not(:checked),.cp-main .cp-check input[aria-invalid=true]{border-color:var(--error)}
/* Consent row — site .consent-row: checkbox + sentence + 필수/선택 label, text button (내용보기) at the right,
   optional inline content below. */
.cp-consents{display:grid;gap:16px}
.cp-consent{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-width:0}
.cp-consent>.cp-check{grid-column:1;grid-row:1;min-width:0;min-height:38px;align-items:center}
.cp-consent>.cp-check>input{margin-top:0}
.cp-consent>.cp-check>span{min-width:0;white-space:normal}
.cp-consent>.cp-textbtn{grid-column:2;grid-row:1;min-width:53px;margin:0}
.cp-consent>.cp-consent-body{grid-column:1/-1;min-width:0;padding:16px 0;font-size:14px;line-height:1.8;color:var(--text-2)}
.cp-consent>.cp-error{grid-column:1/-1}
.cp-file{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px dashed var(--line-2);background:var(--surface)}

/* Lock (non-member blur) */
.cp-lock{position:relative}
.cp-lock-content{filter:blur(7px);user-select:none;pointer-events:none}
.cp-lock-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.85) 40%)}
.cp-lock-card{max-width:440px;width:100%;text-align:center;background:#fff;padding:clamp(28px,3vw,40px);box-shadow:0 16px 40px rgba(17,17,16,.14),0 2px 6px rgba(17,17,16,.06)}
.cp-lock-card h2{font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.45}
.cp-lock-card p{margin-top:10px;font-size:15px;line-height:1.7;color:var(--text-2)}
.cp-lock-card .cp-pair{margin-top:24px;margin-inline:auto}

/* Empty / notice — notice = site .notice-surface (surface, 15/1.8 text-2; strong text in ink) */
.cp-empty{padding:72px 16px;text-align:center;color:var(--text-2);font-size:15px;line-height:1.7;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.cp-notice{display:flex;gap:12px;padding:20px 24px;background:var(--surface);font-size:15px;line-height:1.8;color:var(--text-2)}
.cp-notice :is(strong,b){color:var(--ink);font-weight:600}
.cp-notice[data-tone=mint]{background:var(--mint-wash)}

/* Placeholder for missing copy / assets — visible on purpose */
.cp-todo{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;font-size:12px;font-weight:600;line-height:1.6;color:var(--focus);background:var(--mint-wash);border:1px dashed var(--focus);vertical-align:middle;white-space:nowrap}
.cp-todo::before{content:"✎"}
.cp-dummy{position:relative;outline:1px dashed rgba(8,123,133,.45);outline-offset:4px}
.cp-ph{display:grid;place-items:center;width:100%;height:100%;min-height:120px;background:var(--placeholder);color:var(--text-3);font-size:13px;text-align:center;padding:12px}

/* Pager / more */
.cp-more{display:flex;justify-content:center;margin-top:48px}
.cp-pager{display:flex;justify-content:center;gap:4px;margin-top:48px}
.cp-pager a,.cp-pager button{min-width:40px;height:40px;display:inline-grid;place-items:center;font-size:14px;color:var(--text-2);transition:background-color .25s var(--ease),color .25s var(--ease)}
.cp-pager :is(a,button):hover{background:var(--surface);color:var(--ink)}
.cp-pager [aria-current=page]{background:var(--ink);color:#fff}

/* Dialog — site .service-dialog: 480 wide, 32px padding (mobile 24), no shadow, backdrop ink 40%,
   ink text, h2 26/500/1.45, text 15/1.8 text-2 with 20px rhythm, actions right-aligned 52px (Outline + Main = pair). */
dialog.cp-dialog{width:min(480px,calc(100% - 40px));max-height:85dvh;overflow:auto;border:0;padding:0;background:#fff;color:var(--ink);box-shadow:none}
dialog.cp-dialog::backdrop{background:rgba(17,17,16,.4)}
.cp-dialog-body{padding:32px 32px 0}
.cp-dialog-body h2{font-size:26px;font-weight:500;letter-spacing:-.03em;line-height:1.45}
.cp-dialog-body p:not([class]){font-size:15px;line-height:1.8;color:var(--text-2)}
.cp-dialog-body>p:not([class]){margin-top:20px}
.cp-dialog-body>p:not([class]):first-child{margin-top:0}
.cp-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px;padding:28px 32px 32px}
.cp-dialog-actions>.cp-btn{height:auto;min-height:52px;padding-block:10px;line-height:1.35;white-space:normal}

/* Toast */
.cp-toast{position:fixed;left:50%;bottom:32px;translate:-50% 0;z-index:200;padding:14px 20px;background:var(--ink);color:#fff;font-size:14px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.cp-toast[data-show]{opacity:1}

/* Review floating marker (not part of the real page) */
.cp-review{position:fixed;left:16px;bottom:16px;z-index:150;display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:calc(100vw - 32px);padding:8px;background:rgba(17,17,16,.88);color:#fff;font:500 12px/1 'Pretendard Variable',Pretendard,system-ui,sans-serif;box-shadow:0 16px 40px rgba(17,17,16,.2)}
.cp-review p{padding:0 6px;color:var(--mint)}
.cp-review a{padding:7px 9px;color:#fff;text-decoration:none}
.cp-review a:hover{background:rgba(255,255,255,.16)}
.cp-review .cp-review-hub{color:var(--text-3)}

/* Review hub */
.cp-hub-group{margin-top:56px}.cp-hub-group h2{font-size:20px;font-weight:600;margin-bottom:16px}
.cp-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.cp-hub article{padding:20px;background:var(--surface)}
.cp-hub article>p{font-size:12px;color:var(--text-3);margin-bottom:8px}
.cp-hub-primary{font-size:16px;font-weight:600}
.cp-hub-primary:hover{text-decoration:underline}
.cp-hub ul{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--text-2)}
.cp-hub ul a:hover{color:var(--ink);text-decoration:underline}

/* Responsive */
@media (max-width:1000px){.cp-grid[data-cols="4"]{--cols:3}}
@media (max-width:799px){
  .cp-main{--cp-main-pt:112px}
  .cp-main[data-subnav]{--cp-main-pt:136px}
  .cp-wrap,.cp-wrap[data-width]{width:calc(100% - 36px)}
  .cp-grid{--cols:2}.cp-grid[data-cols="4"]{--cols:2}.cp-grid[data-cols="2"]{--cols:1}
  .cp-fields-2{grid-template-columns:1fr}
  .cp-dl{grid-template-columns:1fr}.cp-dl>dt{padding-bottom:8px;border-bottom:0}
  .cp-list-row{grid-template-columns:1fr;padding:18px 4px}
  .cp-sec-head{margin-bottom:28px}
  .cp-tabs{gap:24px}
  .cp-notice{padding:16px 20px}
  /* Pair: full width, two equal columns (every cp-btn has a 1px border, so 13px keeps the site's 52px) */
  .cp-pair,
  :is(.cp-actions,.cp-dialog-actions):has(>.cp-btn[data-variant=primary]):has(>.cp-btn:not([data-variant])):not(:has(>:nth-child(3))){width:100%}
  .cp-pair>.cp-btn,
  :is(.cp-actions,.cp-dialog-actions):has(>.cp-btn[data-variant=primary]):has(>.cp-btn:not([data-variant])):not(:has(>:nth-child(3)))>.cp-btn{padding:13px 24px}
  .cp-dialog-body{padding:24px 24px 0}
  .cp-dialog-actions{padding:28px 24px 24px}
}
@media (max-width:599px){
  .cp-consent>.cp-check{align-items:flex-start;padding-block:6px}
  .cp-consent>.cp-check>input{margin-top:3px}
}
@media (max-width:560px){.cp-grid:not([data-cols-mobile="2"]){--cols:1}}
@media (max-width:399px){.cp-btn:where(:not([data-variant=primary],[data-size=lg])){font-size:13px}}
@media (max-width:359px){
  .cp-btn:is([data-variant=primary],[data-size=lg]),
  .cp-pair>.cp-btn,
  :is(.cp-actions,.cp-dialog-actions):has(>.cp-btn[data-variant=primary]):has(>.cp-btn:not([data-variant])):not(:has(>:nth-child(3)))>.cp-btn{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.cp-main *,.cp-main *::before,.cp-main *::after{transition:none!important;animation:none!important}}