/* AXMARU components — spec §3. BEM-lite. 색은 밴드 변수만(예외: 주 버튼·오류·모노그램·입력 배경). */

/* 3.1 헤더 */
.site-header{position:fixed;top:0;inset-inline:0;height:var(--header-h);z-index:var(--z-header);background:var(--bg);border-bottom:1px solid var(--line);transition:none}
.site-header .container{height:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.site-header__actions{display:flex;align-items:center;gap:8px;justify-self:end}
.site-header__cta{display:none}
@media (min-width:768px){.site-header__cta{display:inline-flex}}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--fg);text-decoration:none;transition:opacity var(--d-hover) var(--ease)}
.logo:hover{opacity:.85}
.logo__mark{width:27px;height:27px;display:block;color:var(--fg);flex:none}
html[data-band="ink"] .logo__mark--light{display:none}
html:not([data-band="ink"]) .logo__mark--dark{display:none}
.menu .logo__mark--light{display:none}
.menu .logo__mark--dark{display:block}
.logo__text{font:800 var(--fs-wordmark-header)/1 var(--ff);letter-spacing:var(--ls-wordmark);text-transform:uppercase;color:var(--fg);padding-top:1px}
.gnb{display:none;justify-self:center}
html:not(.js) .gnb{display:block}
html:not(.js) .menu-toggle{display:none}
@media (max-width:1023px){html:not(.js) .gnb__list{flex-wrap:wrap;gap:4px 16px}}
@media (min-width:1024px){.gnb{display:block}}
.gnb__list{display:flex;gap:28px}
.gnb__link{position:relative;display:inline-block;font:500 15px/1 var(--ff);color:var(--fg);padding:10px 0}
.gnb__link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform var(--d-state) var(--ease)}
.gnb__link.is-active::after,.gnb__link[aria-current]::after,.gnb__link:hover::after{transform:scaleX(1)}
.menu-toggle{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-10px;color:var(--fg)}
@media (min-width:1024px){.menu-toggle{display:none}}
.menu-toggle__bars{display:grid;gap:6px;width:22px}
.menu-toggle__bar{display:block;height:2px;background:currentColor;transition:transform var(--d-state) var(--ease)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:#141E2B;color:#F2EDE4;display:flex;flex-direction:column;padding:0 var(--gutter) 40px;--fg:#F2EDE4;--fg-2:rgba(242,237,228,.72);--line:rgba(122,132,148,.25);--mint:#52C9B5}
.menu[hidden]{display:none}
.menu__top{height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.menu__list{margin:auto 0;display:flex;flex-direction:column;gap:8px}
.menu__link{display:inline-block;font:800 clamp(2rem,8vw,3rem)/1.15 var(--ff);letter-spacing:var(--ls-heading);color:#F2EDE4;padding:4px 0}
.menu__link:hover{color:#52C9B5}
.menu__foot{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid rgba(122,132,148,.25)}
.menu .btn--secondary{border-color:#F2EDE4;color:#F2EDE4}
body.is-menu-open{overflow:hidden}
.progress{position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none}
.progress__fill{height:100%;background:var(--mint);transform-origin:left;transform:scaleX(0)}
@media (min-width:1280px){.progress{display:none}}
.altimeter{display:none}
@media (min-width:1280px){
  .altimeter{display:block;position:fixed;left:24px;top:50%;transform:translateY(-50%);height:40vh;width:2px;background:rgba(122,132,148,.30);z-index:var(--z-altimeter)}
}
.altimeter__fill{position:absolute;inset:0;background:var(--mint);transform-origin:top;transform:scaleY(0)}
.altimeter__tick{position:absolute;left:-2px;top:var(--y,0%);width:6px;height:1px;background:var(--line)}
.altimeter__tick.is-current{background:var(--mint)}
.altimeter__peak{position:absolute;left:12px;top:-7px;font:500 var(--fs-label)/1 var(--ff);letter-spacing:var(--ls-label);color:var(--fg-2);white-space:nowrap;transition:color var(--d-state) var(--ease)}
.altimeter__peak.is-lit{color:var(--mint)}

/* 3.2 버튼·링크 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:var(--r-2);font:700 15px/1 var(--ff);gap:8px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--d-hover) var(--ease),transform var(--d-hover) var(--ease),opacity var(--d-hover) var(--ease),border-color var(--d-hover) var(--ease)}
.btn--primary{background:#3FB8A4;color:#0E2622}
.btn--primary:hover{background:#52C9B5;transform:translateY(-1px)}
.btn--primary:active{transform:none}
.btn--secondary{border:1.5px solid var(--fg);color:var(--fg);background:transparent}
.btn--secondary:hover{background:rgba(27,42,65,.06)}
[data-band="ink"] .btn--secondary:hover,html[data-band="ink"] .site-header .btn--secondary:hover,.menu .btn--secondary:hover{background:rgba(242,237,228,.08)}
.btn--sm{height:40px;padding:0 16px;position:relative}
.btn--sm::after{content:"";position:absolute;inset:-2px 0}
.btn--block{width:100%}
.link{color:var(--link);font-weight:500;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}
.link--ext::after{content:"↗";margin-left:.25em;display:inline-block;transition:transform var(--d-hover) var(--ease)}
.link--ext:hover::after{transform:translate(1px,-1px)}

/* 3.3 섹션 헤더 */
.sec-head{position:relative;margin-bottom:var(--s-8);max-width:100%}
.label{display:flex;align-items:center;gap:10px;font:500 var(--fs-label)/1.4 var(--ff);letter-spacing:var(--ls-label);color:var(--fg-2)}
.sec-head__title{margin-top:16px;max-width:18em;color:var(--fg)}
.sec-head__lead{margin-top:20px;max-width:40em;font:400 var(--fs-lead)/1.7 var(--ff);color:var(--fg-2)}
.ghost{position:absolute;left:calc(var(--gutter) * -1 + 8px);top:-.15em;font:800 var(--fs-ghost)/1 var(--ff);color:var(--c-ghost);user-select:none;pointer-events:none;letter-spacing:var(--ls-heading);z-index:var(--z-contour)}
.sec-head--ghost{padding-top:calc(var(--fs-ghost) * .06)}
@media (max-width:767px){.ghost{left:0}}
.sec-head>:not(.ghost){position:relative;z-index:var(--z-content)}

/* 3.5 점·노드·태그·칩·모노그램 */
.chip-contour{display:block;width:96px;height:12px;color:var(--fg);flex:none}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;vertical-align:middle}
.node{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--node-fill);border:1.5px solid var(--node-stroke);flex:none}
.node--lg{width:12px;height:12px}
.node.is-on{background:var(--mint);border-color:var(--mint)}
.chip{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-1);font:500 var(--fs-caption)/1.4 var(--ff);color:var(--fg-2)}
.chip__prefix{color:var(--fg-2);font-size:var(--fs-caption);margin-right:6px}
.chip__prefix::after{content:"·";margin-left:6px}
.tag{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid rgba(122,132,148,.5);border-radius:var(--r-1);font:500 var(--fs-caption)/1.4 var(--ff);color:var(--fg)}
.monogram{width:56px;height:56px;border-radius:50%;background:#1B2A41;color:#F2EDE4;font:700 18px/1 var(--ff);display:grid;place-items:center;flex:none;overflow:hidden}
.monogram--img img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* 3.4 리스트 대체 레이아웃 */
.hairlist{display:grid;gap:0}
.hairlist--cols-3{grid-template-columns:repeat(3,1fr);gap:0 32px}
.hairlist--cols-2{grid-template-columns:repeat(2,1fr);gap:0 64px}
@media (max-width:1023px){.hairlist--cols-2{grid-template-columns:1fr}}
@media (max-width:767px){.hairlist--cols-3{grid-template-columns:1fr}}
.hairlist__item{border-top:1px solid var(--line);padding:24px 0}
.hairlist__num{display:block;font:800 var(--fs-caption)/1 var(--ff);font-variant-numeric:tabular-nums;color:var(--deco);margin-bottom:12px}
[data-band="ink"] .hairlist__num{color:var(--fg-3)}
.hairlist__title{font:700 var(--fs-item)/1.35 var(--ff);color:var(--fg)}
.hairlist__desc{margin-top:8px;font:500 var(--fs-small)/1.7 var(--ff);color:var(--fg-2)}
.ledger{display:grid}
.ledger__row{display:grid;grid-template-columns:64px 1fr 1.4fr;gap:24px;padding:24px 0;border-top:1px solid var(--line);align-items:start}
.ledger__key{font:800 32px/1 var(--ff);color:#7A8494;font-variant-numeric:tabular-nums;border-right:1px solid var(--line);align-self:stretch;padding-top:2px}
.ledger__title{font:700 18px/1.4 var(--ff);color:var(--fg)}
.ledger__desc{font:500 var(--fs-small)/1.7 var(--ff);color:var(--fg-2)}
@media (max-width:767px){
  .ledger__row{grid-template-columns:40px 1fr}
  .ledger__desc{grid-column:2}
  .ledger__key{font-size:24px}
}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1023px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.bento{grid-template-columns:1fr}}
.bento__tile{padding:24px;border:1px solid var(--line);border-radius:var(--r-2);background:transparent}
.bento__tile--accent{background:#E9E5DC}
.bento__num{display:block;font:800 var(--fs-caption)/1 var(--ff);color:var(--deco);margin-bottom:12px;font-variant-numeric:tabular-nums}
.bento__title{font:700 16px/1.4 var(--ff);color:var(--fg)}
.cta-box{border:1px solid var(--line);padding:40px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media (max-width:767px){.cta-box{grid-template-columns:1fr;padding:28px 24px}}
.cta-box__title{font:700 22px/1.4 var(--ff);color:var(--fg)}
.cta-box__sub{margin-top:8px;font:500 var(--fs-small)/1.7 var(--ff);color:var(--fg-2)}

/* 3.7 폼 필드 — 문의(잉크 밴드) 전용 */
.field{display:grid;gap:8px;margin-bottom:20px}
.field__label{font:500 var(--fs-caption)/1.4 var(--ff);color:var(--fg-2)}
.field__req{color:var(--fg-2);margin-left:2px}
.field__input{width:100%;height:48px;padding:0 14px;background:#1B2A41;border:1px solid rgba(122,132,148,.40);border-radius:var(--r-2);color:#F2EDE4;font:400 16px/1.4 var(--ff);appearance:none;-webkit-appearance:none}
.field__input::placeholder{color:rgba(242,237,228,.60)}
textarea.field__input{min-height:120px;padding:12px 14px;resize:vertical;line-height:1.6}
.field__input:focus-visible{outline:2px solid #52C9B5;outline-offset:2px;border-color:#52C9B5}
.field.is-error .field__input{border-color:#B4452B;border-width:2px}
.field.is-error .checkbox__box{border-color:#B4452B;border-width:2px}
.field__error{font:500 var(--fs-caption)/1.4 var(--ff);color:var(--fg)}
.field__error:not(:empty)::before{content:"오류: ";font-weight:700}
.field__error:empty{margin:0;min-height:0}
.select{position:relative}
.select .field__input{padding-right:40px;cursor:pointer}
.select__arrow{position:absolute;right:14px;top:50%;width:12px;height:12px;transform:translateY(-50%);pointer-events:none;color:#F2EDE4}
.checkbox{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer;font:500 var(--fs-small)/1.5 var(--ff);color:#F2EDE4}
.checkbox input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.checkbox__box{width:18px;height:18px;flex:none;margin-top:2px;border:1.5px solid rgba(242,237,228,.6);border-radius:var(--r-1);display:grid;place-items:center;transition:border-color var(--d-hover) var(--ease)}
.checkbox__box svg{width:12px;height:12px;display:block;stroke:#52C9B5;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--d-hover) var(--ease)}
.checkbox input:checked+.checkbox__box{border-color:#52C9B5}
.checkbox input:checked+.checkbox__box svg{opacity:1}
.checkbox input:focus+.checkbox__box{outline:2px solid #52C9B5;outline-offset:2px}
.privacy{margin-top:8px;font:500 var(--fs-caption)/1.5 var(--ff);color:var(--fg-2)}
.privacy summary{cursor:pointer;color:var(--link);text-decoration:underline;text-underline-offset:.18em;width:max-content}
.privacy__table{width:100%;border-collapse:collapse;margin-top:12px;font-size:var(--fs-caption)}
.privacy__table th,.privacy__table td{text-align:left;padding:8px 10px;border:1px solid var(--line);vertical-align:top;font-weight:500}
.privacy__table th{width:88px;color:#F2EDE4}
.form__status{margin-top:16px;font:500 var(--fs-caption)/1.5 var(--ff);color:var(--fg-2)}
.form__status--error{color:var(--fg)}
.form__nojs{display:none;font:500 var(--fs-caption)/1.5 var(--ff);color:var(--fg-2)}
html:not(.js) .form__nojs{display:block}
html:not(.js) .form__actions{display:none}
.form__status:empty{margin-top:0}