/* 컴포넌트 표면 스타일. 값은 전부 토큰을 참조합니다.
   호버에 이동·확대는 없습니다. 배경색 또는 글자색만 바뀝니다.
   눌림에만 scale 0.99 / 90ms 를 씁니다. */

/* ── Button ─────────────────────────────────────────────── */
.nu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-family:var(--font-sans);font-weight:var(--weight-semibold);border-radius:var(--radius-btn);user-select:none;text-align:center;transition:background-color var(--dur-hover) var(--ease-ui),transform var(--dur-hover) var(--ease-ui)}
.nu-btn:active{transition-duration:var(--dur-press);transition-timing-function:var(--ease-press);transform:scale(var(--press-scale))}
.nu-btn[disabled],.nu-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.nu-btn--primary{background:var(--action-bg);color:var(--text-on-accent)}
.nu-btn--primary:hover{background:var(--action-bg-hover);color:var(--text-on-accent)}
.nu-btn--primary:active{background:var(--action-bg-press)}
.nu-btn--secondary{background:var(--action-secondary-bg);color:var(--text-strong)}
.nu-btn--secondary:hover{background:var(--action-secondary-bg-hover);color:var(--text-strong)}
.nu-btn--secondary:active{background:var(--action-secondary-bg-hover)}
.nu-btn--sm{height:var(--control-sm);padding:0 16px;font-size:var(--text-caption)}
.nu-btn--md{height:var(--control-md);padding:0 24px;font-size:var(--text-body-m)}
.nu-btn--lg{height:var(--control-lg);padding:0 28px;font-size:var(--text-body-m)}
.nu-btn--hero{min-height:var(--control-hero);padding:16px 24px;font-size:var(--text-body-m)}
.nu-btn--block{width:100%}
@media (min-width:768px){
  .nu-btn--lg{height:var(--control-lg-md);padding:0 32px;font-size:var(--text-body)}
  .nu-btn--hero{min-height:var(--control-hero-md);padding:16px 32px;font-size:var(--text-body)}
}

/* ── TextLink — 밑줄은 호버에서만 나타납니다 ─────────────── */
.nu-link{display:inline-flex;align-items:center;gap:4px;font-weight:var(--weight-semibold);color:var(--text-body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:transparent;transition:color var(--dur-link) var(--ease-ui),text-decoration-color var(--dur-link) var(--ease-ui)}
.nu-link:hover{color:var(--text-strong);text-decoration-color:currentColor}
.nu-link--strong{color:var(--text-strong);text-decoration-color:currentColor}

/* ── SectionLabel — 영문 장식 소제목은 쓰지 않습니다 ─────── */
.nu-label{margin:0;font-size:var(--text-label-m);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-weight:var(--weight-semibold);color:var(--text-body)}
@media (min-width:768px){.nu-label{font-size:var(--text-label)}}

/* ── Layout ─────────────────────────────────────────────── */
.nu-container{margin:0 auto;width:100%;max-width:var(--shell-max);padding-left:var(--shell-pad);padding-right:var(--shell-pad)}
@media (min-width:768px){.nu-container{padding-left:var(--shell-pad-md);padding-right:var(--shell-pad-md)}}
.nu-section{padding-top:var(--section-y);padding-bottom:var(--section-y);background:var(--surface-page)}
.nu-section--file{background:var(--surface-alt)}
@media (min-width:768px){.nu-section{padding-top:var(--section-y-md);padding-bottom:var(--section-y-md)}}

/* ── Header — 숨기지 않고, 불투명 흰색 고정. 블러 없음 ───── */
.nu-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--paper);border-bottom:var(--border-width) solid transparent;transition:border-color var(--dur-header) var(--ease-ui)}
.nu-header--scrolled{border-bottom-color:var(--border-hairline)}
.nu-header__row{display:flex;height:100%;align-items:center;justify-content:space-between;gap:12px}
.nu-header__brand{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-body-m);font-weight:var(--weight-bold);letter-spacing:-0.02em;color:var(--text-heading);text-decoration:none}
.nu-header__brand img{height:26px;width:auto}
.nu-header__actions{display:flex;align-items:center;gap:8px}
.nu-header__tel{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 8px;border-radius:var(--radius-btn);font-size:var(--text-caption);font-weight:var(--weight-semibold);color:var(--text-body);text-decoration:none;transition:color var(--dur-link) var(--ease-ui)}
.nu-header__tel:hover{color:var(--text-strong)}
@media (min-width:768px){.nu-header{height:var(--header-h-md)}.nu-header__brand{font-size:var(--text-body)}.nu-header__tel{padding:0 12px;font-size:var(--text-label)}.nu-header__actions{gap:12px}}

/* ── Footer — 장식이 아니라 검증 도구입니다 ─────────────── */
.nu-footer{background:var(--surface-alt);border-top:var(--border-width) solid var(--border-hairline)}
.nu-footer__inner{padding-top:56px;padding-bottom:56px}
.nu-footer__top{display:flex;flex-direction:column;gap:40px}
.nu-footer__name{margin:0;font-size:var(--text-body);font-weight:var(--weight-bold);color:var(--text-heading)}
.nu-footer__tag{margin:12px 0 0;font-size:var(--text-caption);color:var(--text-caption)}
.nu-footer__dl{display:grid;gap:12px 32px;margin:0;font-size:var(--text-caption)}
.nu-footer__dl>div{display:flex;gap:12px}
.nu-footer__dl dt{flex-shrink:0;color:var(--text-body);margin:0}
.nu-footer__dl dd{margin:0;font-weight:var(--weight-semibold);color:var(--text-strong)}
.nu-footer__fine{margin-top:48px;border-top:var(--border-width) solid var(--border-hairline);padding-top:32px}
.nu-footer__fine p{margin:0;font-size:var(--text-caption);color:var(--text-caption)}
.nu-footer__fine p+p{margin-top:16px}
@media (min-width:640px){.nu-footer__dl{grid-template-columns:1fr 1fr}}
@media (min-width:768px){.nu-footer__inner{padding-top:80px;padding-bottom:80px}.nu-footer__top{flex-direction:row;justify-content:space-between;gap:64px}.nu-footer__name{font-size:var(--text-lead)}.nu-footer__fine{margin-top:64px}}

/* ── Card / NoticePanel ─────────────────────────────────── */
.nu-card{border-radius:var(--radius-card);background:var(--surface-card);padding:var(--card-pad)}
.nu-card--alt{background:var(--surface-card-alt)}
@media (min-width:768px){.nu-card{padding:var(--card-pad-md)}}
.nu-notice__title{margin:0;font-size:var(--text-body-m);font-weight:var(--weight-semibold);color:var(--text-strong)}
.nu-notice__body{margin:20px 0 0;font-size:var(--text-body-m);color:var(--text-body)}
.nu-notice__list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:var(--text-body-m);color:var(--text-body)}
.nu-notice__hint{margin:24px 0 0;font-size:var(--text-caption);color:var(--text-caption)}
.nu-notice__hint code{font-family:var(--font-sans);font-weight:var(--weight-semibold);color:var(--text-strong)}
@media (min-width:768px){.nu-notice__title,.nu-notice__body,.nu-notice__list{font-size:var(--text-body)}}

/* ── Fields ─────────────────────────────────────────────── */
.nu-field{margin-top:24px}
.nu-field:first-child{margin-top:0}
.nu-field__label{display:block;font-size:var(--text-body-m);font-weight:var(--weight-semibold);color:var(--text-strong)}
.nu-input{margin-top:12px;height:var(--input-h);width:100%;border:0;border-radius:var(--radius-btn);background:var(--surface-card);padding:0 16px;font-family:var(--font-sans);font-size:var(--text-body-m);color:var(--text-strong)}
.nu-input::placeholder{color:var(--text-caption)}
.nu-input--textarea{height:auto;padding:16px;line-height:1.7;resize:vertical}
.nu-input--onfile{background:var(--surface-input)}
.nu-field__error{margin:8px 0 0;font-size:var(--text-caption);font-weight:var(--weight-semibold);color:var(--text-strong)}

/* ── SegmentedRadio ─────────────────────────────────────── */
.nu-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;border-radius:var(--radius-btn);background:var(--surface-input);padding:6px}
.nu-seg--onfile{background:var(--surface-card)}
.nu-seg__btn{height:48px;border:0;cursor:pointer;border-radius:var(--radius-inner);background:transparent;font-family:var(--font-sans);font-size:var(--text-body-m);font-weight:var(--weight-semibold);color:var(--text-body);transition:background-color var(--dur-hover) var(--ease-ui),color var(--dur-hover) var(--ease-ui)}
.nu-seg__btn:hover{color:var(--text-strong)}
.nu-seg__btn[aria-checked="true"]{background:var(--surface-inverse);color:var(--text-on-inverse)}

/* ── RangeSlider — 썸 28px. 60대 이상 조작 여유 ──────────── */
.nu-range{-webkit-appearance:none;appearance:none;width:100%;height:var(--slider-thumb);background:transparent;cursor:pointer}
.nu-range:focus{outline:none}
.nu-range:focus-visible{outline:var(--border-width-strong) solid var(--focus-ring);outline-offset:6px;border-radius:14px}
.nu-range::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--seal) 0%,var(--seal) var(--fill,0%),var(--line) var(--fill,0%),var(--line) 100%)}
.nu-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--slider-thumb);height:var(--slider-thumb);margin-top:-11px;border-radius:var(--radius-pill);background:var(--seal);border:3px solid var(--paper)}
.nu-range::-moz-range-track{height:6px;border-radius:var(--radius-pill);background:var(--line)}
.nu-range::-moz-range-progress{height:6px;border-radius:var(--radius-pill);background:var(--seal)}
.nu-range::-moz-range-thumb{width:22px;height:22px;border-radius:var(--radius-pill);background:var(--seal);border:3px solid var(--paper)}
.nu-range__scale{margin-top:12px;display:flex;justify-content:space-between;font-size:var(--text-caption);color:var(--text-caption)}
.nu-no-spinner::-webkit-outer-spin-button,.nu-no-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.nu-no-spinner[type="number"]{-moz-appearance:textfield;appearance:textfield}

/* ── ConsentCheckbox ───────────────────────────────────── */
.nu-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.nu-check input{margin-top:4px;height:24px;width:24px;flex-shrink:0;accent-color:var(--seal)}
.nu-check span{font-size:var(--text-caption);color:var(--text-body)}

/* ── FormulaRow ─────────────────────────────────────────── */
.nu-formula dt{margin:0;font-size:var(--text-caption);color:var(--text-body)}
.nu-formula dd{margin:4px 0 0;font-size:var(--text-caption);font-weight:var(--weight-semibold);color:var(--text-strong)}

/* ── SitesMap ───────────────────────────────────────────── */
.nu-map{margin:0}
.nu-map__frame{margin:0 auto;width:100%;max-width:420px}
.nu-map__caption{margin:24px 0 0;font-size:var(--text-caption);color:var(--text-caption)}

/* ── 타입 유틸 (카드·UI 킷에서 씁니다) ──────────────────── */
.nu-display{margin:0;font-size:var(--text-display-m);line-height:var(--lh-display-m);letter-spacing:var(--ls-display-m);font-weight:var(--weight-bold);color:var(--text-heading)}
.nu-h1{margin:0;font-size:var(--text-h1-m);line-height:var(--lh-h1-m);letter-spacing:var(--ls-h1-m);font-weight:var(--weight-bold);color:var(--text-heading)}
.nu-h2{margin:0;font-size:var(--text-h2-m);line-height:var(--lh-h2-m);letter-spacing:var(--ls-h2);font-weight:var(--weight-bold);color:var(--text-heading)}
.nu-lead{margin:0;font-size:var(--text-lead-m);line-height:var(--lh-lead-m);letter-spacing:var(--ls-lead-m);color:var(--text-body)}
.nu-body{margin:0;font-size:var(--text-body-m);line-height:var(--lh-body);letter-spacing:var(--ls-body-m);color:var(--text-body)}
.nu-caption{margin:0;font-size:var(--text-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption);color:var(--text-caption)}
@media (min-width:768px){
  .nu-display{font-size:var(--text-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
  .nu-h1{font-size:var(--text-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
  .nu-h2{font-size:var(--text-h2);line-height:var(--lh-h2)}
  .nu-lead{font-size:var(--text-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead)}
  .nu-body{font-size:var(--text-body);letter-spacing:var(--ls-body)}
}