/* =====================================================================
   품질 정보 사이트 — site.css (2026-11-09)
   토큰 = 프린트캔버스 × Apple 디자인 시스템 정본 v1.6 §3(tokens.css)에서 이 사이트가 쓰는 것만 옮김.
   출처 태그: [HIG] 애플 HIG · [KIT] iOS 27 키트 · [WEB] apple.com 실측 · [API] 애플 개발자 문서
             [USER] 사용자 지시 · [JUDG] Claude 판단(애플 공식 규칙 아님)
   ===================================================================== */
@font-face{font-family:"Pretendard Variable";font-weight:400 700;font-style:normal;font-display:swap;src:url("fonts/pretendard-subset.woff2") format("woff2-variations"),url("fonts/pretendard-subset.woff2") format("woff2")} /* [JUDG] 정본 §11 '폰트 셀프호스팅' — 사이트에 쓰인 글자만 남긴 서브셋 */

:root{
  color-scheme:light dark;
  /* 서체 [JUDG-FONT-01] SF는 웹 임베드 불가 → OS SF 자연 호출 → Pretendard */
  --font-sans:-apple-system,BlinkMacSystemFont,"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Segoe UI",system-ui,sans-serif;
  /* 타입 [WEB][HIG] */
  --fs-display:80px;--lh-display:88px; --fs-section:56px;--lh-section:64px; --fs-headline:48px;--lh-headline:56px;
  --fs-sub:32px;--lh-sub:38px; --fs-eyebrow:28px;--lh-eyebrow:34px; --fs-title:21px;--lh-title:26px;
  --fs-intro:21px;--lh-intro:30px; --fs-tout:19px;--lh-tout:25px; --fs-body:17px;--lh-body:26px; --fs-body-tight:17px;--lh-body-tight:22px;
  --fs-callout:16px;--lh-callout:21px; --fs-subhead:15px;--lh-subhead:20px; --fs-caption:14px;--lh-caption:20px; --fs-footnote:13px;--lh-footnote:18px; --fs-fine:12px;--lh-fine:16px;
  /* 트래킹 [JUDG-TRACK-01] */
  --ls-display:-.01em;--ls-section:-.008em;--ls-headline:-.005em;--ls-body:-.012em;--ls-callout:-.01em;--ls-subhead:-.008em;--ls-caption:-.004em;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;
  /* 간격 [WEB] */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-30:120px;--sp-40:160px;
  --margin:25px; /* [WEB] 데스크톱 마진 */
  --w-content:980px;--w-read:660px; /* [WEB] 980 · [JUDG] 가독 660 */
  /* 반경 [HIG 동심성][WEB][KIT] */
  --r-capsule:9999px;--r-card:18px;--r-tile:28px;--r-sheet:38px;--r-modal:16px;--r-toast:24px;--r-form:12px;--r-thumb:6px;
  /* 치수 [HIG][KIT][WEB] */
  --h-touch:44px;--h-btn:44px;--h-btn-lg:50px;--h-row:52px;--h-nav:44px;--h-nav-mobile:48px;
  /* 모션 [WEB][API][JUDG] — 정본 §5 */
  --dur-instant:20ms;--dur-fast:120ms;--dur-base:240ms;--dur-nav:320ms;--dur-sheet:500ms;--dur-page:700ms;
  --ease-standard:cubic-bezier(.4,0,.6,1);--ease-out:cubic-bezier(0,0,.5,1);--ease-enter:cubic-bezier(.15,0,.2,1);
  --spring-smooth:linear(0.000,0.029 4%,0.099 8%,0.189 12%,0.285 17%,0.382 21%,0.472 25%,0.554 29%,0.627 33%,0.691 38%,0.746 42%,0.793 46%,0.832 50%,0.865 54%,0.893 58%,0.915 62%,0.934 67%,0.949 71%,0.962 75%,0.972 79%,0.980 83%,0.987 88%,0.992 92%,0.997 96%,1.000); /* [API] smooth → [JUDG] linear() 근사 */
  --spring-snappy:linear(0.000,0.029 4%,0.101 8%,0.196 12%,0.301 17%,0.407 21%,0.506 25%,0.597 29%,0.677 33%,0.746 38%,0.803 42%,0.851 46%,0.889 50%,0.919 54%,0.943 58%,0.961 62%,0.974 67%,0.984 71%,0.990 75%,0.995 79%,0.998 83%,0.999 88%,1.000 92%,1.000 96%,1.000); /* [API] snappy → [JUDG] */
  --press-scale:.97;--stagger:40ms;--reveal-y:16px; /* [JUDG] */
  /* 글라스 [WEB][HIG materials][JUDG] */
  --glass-blur:20px;--glass-saturate:1.8;--glass-tint:rgba(255,255,255,.72);--glass-edge:rgba(255,255,255,.45);
  /* 라이트 컬러 [WEB][HIG] */
  --label:#1D1D1F;--label-2:#6E6E73;--label-3:#86868B;
  --bg:#FFFFFF;--bg-2:#F5F5F7;--bg-3:#FAFAFC;
  --fill:rgba(120,120,128,.20);--fill-3:rgba(118,118,128,.12);--fill-4:rgba(116,116,128,.08);
  --sep:rgba(0,0,0,.12);--sep-web:#D2D2D7;--overlay:rgba(0,0,0,.20);
  --accent:#0071E3;--accent-fg:#FFFFFF;--link:#0066CC;--focus:#0071E3; /* [USER] Accent B 애플 블루(2026-10-19) */
  --accent-btn:#0071E3; /* [JUDG] 채운 버튼 배경 — 흰 17px 글자 4.6:1. 다크에서도 같은 값(#0A84FF는 흰 글자 3.6:1로 4.5 미달) */
  /* 파우더 블루 [USER 2026-11-09 'Apple Mist Blue / Powder Blue 포인트, 남발 금지·연한 파랑 글자 금지'] 값은 [JUDG] */
  --mist:#EEF5FD;      /* 면(surface) 전용 — 판정 칩·요약 타일 원·선택 행 */
  --mist-2:#DCEAFA;    /* 누름·선택 */
  --mist-line:#B9D6F5; /* 장식 선(정보 없음) */
  --mist-ink:#0066CC;  /* mist 위 글자 = 링크 블루 (대비 5.1:1) */
  --dev-bg:#FFF4E5;--dev-ink:#8A4B00; /* [JUDG] '확인 필요' 개발용 표시 — 운영 빌드에는 없음 */
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --label:#F5F5F7;--label-2:#A1A1A6;--label-3:#86868B;
  --bg:#000000;--bg-2:#1C1C1E;--bg-3:#2C2C2E;
  --fill:rgba(120,120,128,.36);--fill-3:rgba(118,118,128,.24);--fill-4:rgba(116,116,128,.18);
  --sep:rgba(255,255,255,.17);--sep-web:#424245;--overlay:rgba(0,0,0,.48);
  --accent:#0A84FF;--link:#2997FF;--focus:#2997FF;
  --glass-tint:rgba(29,29,31,.72);--glass-edge:rgba(255,255,255,.14);
  --mist:#0B1D33;--mist-2:#12304F;--mist-line:#1D4673;--mist-ink:#6CB4FF;--dev-bg:#3A2A12;--dev-ink:#FFC46B;
}}
:root[data-theme="dark"]{
  --label:#F5F5F7;--label-2:#A1A1A6;--label-3:#86868B;
  --bg:#000000;--bg-2:#1C1C1E;--bg-3:#2C2C2E;
  --fill:rgba(120,120,128,.36);--fill-3:rgba(118,118,128,.24);--fill-4:rgba(116,116,128,.18);
  --sep:rgba(255,255,255,.17);--sep-web:#424245;--overlay:rgba(0,0,0,.48);
  --accent:#0A84FF;--link:#2997FF;--focus:#2997FF;
  --glass-tint:rgba(29,29,31,.72);--glass-edge:rgba(255,255,255,.14);
  --mist:#0B1D33;--mist-2:#12304F;--mist-line:#1D4673;--mist-ink:#6CB4FF;--dev-bg:#3A2A12;--dev-ink:#FFC46B;
}
@media (prefers-reduced-transparency:reduce){:root{--glass-blur:0px;--glass-saturate:1;--glass-tint:var(--bg)}}
@media (prefers-contrast:more){:root{--label-2:#424245;--sep:rgba(0,0,0,.4)}}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:.01ms;--dur-fast:.01ms;--dur-base:.01ms;--dur-nav:.01ms;--dur-sheet:.01ms;--dur-page:.01ms;--press-scale:1;--stagger:0ms;--reveal-y:0px}}
:root[data-motion="reduce"]{--dur-instant:.01ms;--dur-fast:.01ms;--dur-base:.01ms;--dur-nav:.01ms;--dur-sheet:.01ms;--dur-page:.01ms;--press-scale:1;--stagger:0ms;--reveal-y:0px}

/* ---------- 바탕 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--label);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;font-feature-settings:"tnum" 0}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation} /* [JUDG-TOUCH-01] */
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{display:block;max-width:100%;height:auto}
svg{display:block;flex:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px} /* [HIG-A11Y-01] 포커스 링 accent 2px */
.num{font-variant-numeric:tabular-nums} /* [JUDG] 숫자 tabular */
.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}
.skip{position:absolute;left:var(--sp-4);top:-60px;z-index:100;background:var(--label);color:var(--bg);padding:0 var(--sp-4);min-height:var(--h-touch);display:inline-flex;align-items:center;border-radius:var(--r-capsule);font-size:var(--fs-subhead)}
.skip:focus{top:var(--sp-3)}

/* ---------- 폭·섹션 [WEB] 980 / 1068·734 ---------- */
.wrap{width:100%;max-width:calc(var(--w-content) + var(--margin)*2);margin:0 auto;padding:0 var(--margin)}
.read{max-width:var(--w-read)}
.sec{padding-top:var(--sp-30)} /* [WEB] 축소 섹션 120 */
.sec:last-of-type{padding-bottom:var(--sp-30)}
@media (max-width:1068px){.sec{padding-top:var(--sp-20)}}
@media (max-width:734px){:root{--margin:20px}.sec{padding-top:var(--sp-16)}} /* [KIT] 모바일 마진 16~20 · [JUDG] QR 정보 페이지는 섹션 간 64 (모바일 스크롤 길이) */

/* ---------- 타입 ---------- */
.eyebrow{font-size:var(--fs-fine);line-height:var(--lh-fine);font-weight:var(--fw-semibold);letter-spacing:.06em;color:var(--label-2);text-transform:uppercase} /* [JUDG] 영문 대문자 아이브로우는 넓은 자간 */
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-semibold)}
.t-headline{font-size:var(--fs-headline);line-height:var(--lh-headline);letter-spacing:var(--ls-headline);font-weight:var(--fw-semibold)}
.t-sub{font-size:var(--fs-sub);line-height:var(--lh-sub);font-weight:var(--fw-semibold)}
.t-eyebrow{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);font-weight:var(--fw-semibold)}
.t-title{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--fw-semibold)}
.t-intro{font-size:var(--fs-intro);line-height:var(--lh-intro);color:var(--label-2)}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body)}
.t-callout{font-size:var(--fs-callout);line-height:var(--lh-callout);letter-spacing:var(--ls-callout)}
.t-subhead{font-size:var(--fs-subhead);line-height:var(--lh-subhead);letter-spacing:var(--ls-subhead)}
.t-caption{font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption)}
.t-foot{font-size:var(--fs-footnote);line-height:var(--lh-footnote);letter-spacing:0;color:var(--label-2)}
.t-fine{font-size:var(--fs-fine);line-height:var(--lh-fine);letter-spacing:0;color:var(--label-2)}
.muted{color:var(--label-2)}
.ab b{font-weight:inherit;color:var(--label)} .ab span{color:var(--label-2)} /* [WEB-AB-01] "A. B." 앞 검정 · 뒤 회색 */
@media (max-width:734px){
  .t-display{font-size:var(--fs-section);line-height:var(--lh-section)}      /* [WEB] 모바일 축소 · [JUDG] 메시지는 56 유지(48보다 한 단계 큼) */
  .t-headline{font-size:var(--fs-sub);line-height:var(--lh-sub)}             /* [WEB] 48→32 */
  .t-sub{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow)}          /* [WEB] 32→28 */
  .t-eyebrow{font-size:var(--fs-title);line-height:var(--lh-title)}          /* [WEB] 28→21 */
  .t-intro{font-size:var(--fs-tout);line-height:var(--lh-intro)}
}

/* ---------- 상단 바 (글라스 1개) [HIG materials · WEB-NAV-01] ---------- */
.bar{position:sticky;top:0;z-index:40;height:var(--h-nav);display:flex;align-items:center;-webkit-backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));backdrop-filter:saturate(var(--glass-saturate)) blur(var(--glass-blur));background:var(--glass-tint);box-shadow:inset 0 -1px 0 var(--sep)}
.bar__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%}
.bar__back{justify-self:start;display:inline-flex;align-items:center;gap:2px;min-height:var(--h-touch);padding:0 var(--sp-2) 0 0;color:var(--link);font-size:var(--fs-callout);letter-spacing:var(--ls-callout)}
.bar__back svg{width:20px;height:20px}
.bar__title{font-size:var(--fs-subhead);font-weight:var(--fw-semibold);opacity:0;transform:translateY(4px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.bar.is-titled .bar__title{opacity:1;transform:none}
@media (max-width:734px){.bar{height:var(--h-nav-mobile)}}

/* ---------- 환영 (SECTION 01) ---------- */
/* 처음 한 화면 = 끝맺음과 같은 문법 [USER 2026-11-09 '누르자마자 첫 화면에 이렇게'] — 가운데 정렬, 파우더 블루 짧은 선 + 메시지 + 한 문장 */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-20) var(--margin) var(--sp-30)}
.hero__in{display:flex;flex-direction:column;align-items:center}
.hero__rule{margin-bottom:var(--sp-10)}
.hero__msg span{display:block}
.hero__p{margin-top:var(--sp-8);max-width:24em}
.hero__go{position:absolute;left:50%;bottom:calc(var(--sp-6) + env(safe-area-inset-bottom));transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-height:var(--h-touch);min-width:var(--h-touch);padding:var(--sp-2) var(--sp-3);color:var(--label-2);font-size:var(--fs-footnote);line-height:var(--lh-footnote);white-space:nowrap;transition:color var(--dur-fast) var(--ease-standard)}
.hero__go svg{width:18px;height:18px;color:var(--link)}
@media (hover:hover){.hero__go:hover{color:var(--label)}}
/* 첫 화면 등장은 CSS만으로(스크립트 실행 전에 그려져도 깜빡이지 않게) [JUDG-MOTION-03] — 모션 줄이기면 지연·이동 0 */
.hero__rule{transform-origin:center;animation:heroRule var(--dur-page) var(--ease-out) both}
.hero__msg{animation:heroUp var(--dur-page) var(--ease-enter) calc(var(--stagger) * 3) both}
.hero__p{animation:heroUp var(--dur-page) var(--ease-enter) calc(var(--stagger) * 6) both}
.hero__go{animation:heroFade var(--dur-page) var(--ease-enter) calc(var(--stagger) * 18) both}
@keyframes heroUp{from{opacity:0;transform:translateY(var(--reveal-y))}}
@keyframes heroRule{from{transform:scaleX(0)}}
@keyframes heroFade{from{opacity:0}}
@media (max-width:734px){.hero{padding-top:var(--sp-16);padding-bottom:var(--sp-30)}.hero__rule{margin-bottom:var(--sp-8)}.hero__p{margin-top:var(--sp-6)}}
@media (max-height:560px){.hero{min-height:0;padding-top:var(--sp-16);padding-bottom:var(--sp-20)}}

/* ---------- 버튼 [HIG buttons · WEB-BTN-01 · JUDG-MOTION-03] ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h-btn);padding:0 var(--sp-5);border-radius:var(--r-capsule);font-size:var(--fs-body-tight);line-height:1.1;font-weight:var(--fw-regular);white-space:nowrap;position:relative;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-sheet) var(--spring-snappy)}
.btn:active{transform:scale(var(--press-scale));transition-duration:var(--dur-instant)}
.btn svg{width:17px;height:17px}
.btn--prominent{background:var(--accent-btn);color:var(--accent-fg)}
.btn--bordered{background:var(--fill-4);color:var(--label)}
.btn--plain{color:var(--link);padding:0 var(--sp-2)}
.btn--sm{min-height:36px;padding:0 14px;font-size:var(--fs-caption)}
.btn--sm::after{content:"";position:absolute;inset:-4px -2px;border-radius:inherit} /* [HIG] 히트 44 확보 */
@media (hover:hover){.btn--prominent:hover{filter:brightness(1.08)}.btn--bordered:hover{background:var(--fill-3)}.btn--plain:hover{text-decoration:underline;text-underline-offset:3px}}

/* ---------- 옷 고르기 (그룹 리스트) [HIG lists · KIT 행 52] ---------- */
.find__head{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.group{background:var(--bg);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--sep-web) inset;overflow:hidden}
.pick{display:flex;align-items:center;gap:var(--sp-4);min-height:68px;padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-4);position:relative;width:100%;text-align:left;transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-sheet) var(--spring-snappy)}
.pick + .pick::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--sep)} /* [HIG lists] inset 분리선 */
.pick:active{background:var(--mist);transition-duration:var(--dur-instant)}
.pick:active .pick__ic{background:var(--mist-2);transition-duration:var(--dur-instant)} /* 누르면 행이 mist가 되므로 타일은 한 단계 진하게 */
.pick__ic{width:40px;height:40px;border-radius:12px;background:var(--mist);display:grid;place-items:center;color:var(--accent);transition:background-color var(--dur-fast) var(--ease-standard)} /* QIS-KICK-01 [USER] 전체 블루 + 미스트 타일 — 대비 라이트 #0071E3/#EEF5FD, 다크 #0A84FF/#0B1D33 */
.pick__ic svg{width:30px;height:30px}
.pick__t{flex:1;min-width:0;font-size:var(--fs-body-tight);line-height:var(--lh-body-tight)}
.pick__s{display:block;font-size:var(--fs-subhead);line-height:var(--lh-subhead);color:var(--label-2);margin-top:2px}
.pick__go{color:var(--label-3)}
.pick__go svg{width:16px;height:16px}
@media (hover:hover){.pick:hover{background:var(--bg-3)}}
.recent{margin-bottom:var(--sp-4)}
.recent[hidden]{display:none}
.notice{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border-radius:var(--r-card);background:var(--mist);color:var(--label);margin-bottom:var(--sp-6)}
.notice svg{width:20px;height:20px;color:var(--mist-ink);margin-top:2px}
.notice[hidden]{display:none}
@media (min-width:1069px){.find .group{display:grid;grid-template-columns:1fr 1fr}.find .pick:nth-child(2)::before{display:none}.find .pick:nth-child(odd):not(:first-child)::before{left:68px}.find .pick:nth-child(even){box-shadow:inset 1px 0 0 var(--sep)}}

/* ---------- 신뢰 문단 ---------- */
.about{display:grid;gap:var(--sp-6);grid-template-columns:repeat(3,1fr)}
.about__i{display:flex;flex-direction:column;gap:var(--sp-2)}
.about__i svg{width:24px;height:24px;color:var(--label)}
@media (max-width:734px){.about{grid-template-columns:1fr;gap:var(--sp-5)}}

/* ---------- 제품 머리 (SECTION 02) ---------- */
.head{padding-top:var(--sp-16)}
.head__msg{margin-bottom:var(--sp-3)}
.head__sub{margin-top:var(--sp-3)}
@media (max-width:734px){.head{padding-top:var(--sp-10)}}

/* 요약 네 칸 */
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-10)}
.mark{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--r-card);background:var(--bg-2);min-height:var(--h-touch);transition:transform var(--dur-sheet) var(--spring-snappy),background-color var(--dur-fast) var(--ease-standard)}
.mark:active{transform:scale(var(--press-scale));transition-duration:var(--dur-instant)}
.mark__ic{position:relative;width:44px;height:44px;border-radius:50%;background:var(--mist);display:grid;place-items:center;color:var(--label)}
.mark__ic svg{width:22px;height:22px}
.mark__ok{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg-2)}
.mark__ok svg{width:11px;height:11px;stroke-width:3}
.mark__n{font-size:var(--fs-subhead);line-height:var(--lh-subhead);color:var(--label-2)}
.mark__v{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--fw-semibold);color:var(--label)}
.marks__note{margin-top:var(--sp-3)}
@media (hover:hover){.mark:hover{background:var(--fill-4)}}
@media (max-width:734px){.marks{grid-template-columns:1fr 1fr;margin-top:var(--sp-8)}.mark{padding:var(--sp-4)}.mark__v{font-size:var(--fs-tout);line-height:var(--lh-tout)}}

/* 사실 목록 (그룹 리스트) */
.facts{margin-top:var(--sp-8)}
.fact{display:grid;grid-template-columns:7.5em 1fr;gap:var(--sp-4);padding:var(--sp-4);min-height:var(--h-row);align-items:baseline;position:relative}
.fact + .fact::before{content:"";position:absolute;top:0;left:var(--sp-4);right:0;height:1px;background:var(--sep)}
.fact dt{color:var(--label-2);font-size:var(--fs-subhead);line-height:var(--lh-subhead)}
.fact dd{font-size:var(--fs-body-tight);line-height:var(--lh-body-tight)}
.fact__note{display:block;margin-top:var(--sp-1);font-size:var(--fs-footnote);line-height:var(--lh-footnote);color:var(--label-2)}
.codes{border-top:0}
.codes summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);color:var(--link);min-height:var(--h-touch);font-size:var(--fs-body-tight)}
.codes summary::-webkit-details-marker{display:none}
.codes summary svg{width:14px;height:14px;transition:transform var(--dur-base) var(--ease-out)}
.codes[open] summary svg{transform:rotate(90deg)}
.codes ul{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-1) 0 var(--sp-2)}
.codes li{font-size:var(--fs-footnote);line-height:var(--lh-footnote);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-thumb);background:var(--bg-2);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- 섹션 머리 ---------- */
.sh{margin-bottom:var(--sp-8)}
.sh__p{margin-top:var(--sp-3);max-width:var(--w-read)}

/* ---------- 성적서 카드 (SECTION 03) ---------- */
.reports{display:grid;gap:var(--sp-6)}
.rep{border-radius:var(--r-tile);background:var(--bg-2);padding:var(--sp-10);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--sp-10)}
.rep__kind{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-fine);line-height:var(--lh-fine);font-weight:var(--fw-semibold);letter-spacing:.02em;color:var(--label-2)}
.rep__t{margin-top:var(--sp-2)}
.verdict{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-4);padding:6px 12px 6px 8px;border-radius:var(--r-capsule);background:var(--mist);color:var(--mist-ink);font-size:var(--fs-subhead);line-height:var(--lh-subhead);font-weight:var(--fw-semibold)}
.verdict svg{width:16px;height:16px;stroke-width:2.4}
.meta{margin-top:var(--sp-6);display:grid;gap:0}
.meta div{display:grid;grid-template-columns:6.5em 1fr;gap:var(--sp-3);padding:var(--sp-3) 0;box-shadow:inset 0 -1px 0 var(--sep);align-items:baseline}
.meta div:last-child{box-shadow:none}
.meta dt{font-size:var(--fs-footnote);line-height:var(--lh-footnote);color:var(--label-2)}
.meta dd{font-size:var(--fs-subhead);line-height:var(--lh-subhead);display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--sp-2)}
.copy{display:inline-flex;align-items:center;gap:4px;min-height:var(--h-touch);margin:-12px 0;color:var(--link);font-size:var(--fs-footnote);padding:0 var(--sp-1)}
.copy svg{width:14px;height:14px}
.doc{display:flex;gap:var(--sp-4);align-items:flex-start;margin-top:var(--sp-6)}
.req{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-6)}
.doc__thumb{width:84px;flex:none;aspect-ratio:595/842;border-radius:var(--r-thumb);background:var(--bg);box-shadow:0 0 0 1px var(--sep),0 4px 14px rgba(0,0,0,.06);overflow:hidden;position:relative}
.doc__thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-base) var(--ease-standard)}
.doc__thumb img.is-loaded{opacity:1}
.doc__thumb.is-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,var(--fill-4) 50%,transparent 70%);background-size:200% 100%;animation:sk 1.4s linear infinite} /* [JUDG-MOTION-04] 스켈레톤 1.4s — 필요한 곳(문서 미리보기)만 */
@keyframes sk{from{background-position:120% 0}to{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){.doc__thumb.is-loading::after{animation:none}}
:root[data-motion="reduce"] .doc__thumb.is-loading::after{animation:none}
.doc__act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0}
.doc__size{font-size:var(--fs-footnote);color:var(--label-2)}
.doc__missing{font-size:var(--fs-subhead);color:var(--label-2)}
.ext svg{width:14px;height:14px}
.res{border-radius:var(--r-card);background:var(--bg);overflow:hidden}
.res table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.res caption{text-align:left;padding:var(--sp-4) var(--sp-4) var(--sp-2);font-size:var(--fs-subhead);line-height:var(--lh-subhead);font-weight:var(--fw-semibold)}
.res caption span{display:block;font-weight:var(--fw-regular);font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--label-2);margin-top:2px}
.res th,.res td{text-align:left;padding:10px var(--sp-4);font-size:var(--fs-subhead);line-height:var(--lh-subhead);vertical-align:baseline;border-top:1px solid var(--sep)}
.res thead th{font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--label-2);font-weight:var(--fw-regular);border-top:0;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.res td.c{color:var(--label-2)}
.res th[scope=row]{font-weight:var(--fw-regular)}
@media (min-width:735px){.res td.r,.res td.c{white-space:nowrap}}
.res .sub{display:block;font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--label-2)}
.res + .res{margin-top:var(--sp-3)}
.swap{margin-top:var(--sp-4);padding:var(--sp-4);border-radius:var(--r-form);background:var(--bg);font-size:var(--fs-footnote);line-height:var(--lh-footnote);color:var(--label-2)}
.swap b{color:var(--label);font-weight:var(--fw-semibold)}
.empty{border-radius:var(--r-tile);background:var(--bg-2);padding:var(--sp-10);display:flex;gap:var(--sp-5);align-items:flex-start}
.empty svg{width:28px;height:28px;color:var(--label-2)}
@media (max-width:1068px){.rep{grid-template-columns:minmax(0,1fr);gap:var(--sp-8);padding:var(--sp-8)}}
@media (max-width:734px){.rep{padding:var(--sp-6) var(--sp-5);border-radius:var(--r-card);gap:var(--sp-6)}.empty{padding:var(--sp-6) var(--sp-5);border-radius:var(--r-card)}.res th,.res td{padding:10px var(--sp-3)}.res caption{padding:var(--sp-3) var(--sp-3) var(--sp-2)}}

/* ---------- 생활의 말 (SECTION 04) ---------- */
.life{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4)}
.life__i{padding:var(--sp-8);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--sep-web) inset;display:flex;flex-direction:column;gap:var(--sp-3);scroll-margin-top:72px}
@media (min-width:735px){#life-safety{grid-column:1/-1}}
.life__i:target{box-shadow:0 0 0 2px var(--accent) inset}
.life__k{font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--label-2);font-weight:var(--fw-semibold)}
.life__d{color:var(--label-2);font-size:var(--fs-subhead);line-height:var(--lh-subhead)}
.meter{margin-top:var(--sp-2)}
.meter__track{position:relative;height:8px;border-radius:var(--r-capsule);background:var(--fill-3)}
.meter__fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 100%);border-radius:inherit;background:var(--accent);transform-origin:left center;transform:scaleX(var(--p,1));transition:transform var(--dur-page) var(--ease-out)}
.meter__crit{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;left:calc(var(--c) * 100%);background:var(--label);border-radius:1px}
.meter__band{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);background:var(--mist-line);border-radius:inherit}
.meter__dot{position:absolute;top:50%;left:calc(var(--v) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg);transform:scale(var(--p,1));transition:transform var(--dur-sheet) var(--spring-snappy)}
.meter__scale{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--label-2)}
.meter__legend{margin-top:var(--sp-1);font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--label-2)}
.life__v{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.life__v strong{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--fw-semibold)}
.life__v span{font-size:var(--fs-subhead);color:var(--label-2)}
.fabric{margin-top:var(--sp-10);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-10);align-items:start}
.build{display:grid;gap:0}
.build li{padding:var(--sp-4) 0;box-shadow:inset 0 -1px 0 var(--sep);display:grid;gap:4px}
.build li:first-child{padding-top:0}
.build b{font-weight:var(--fw-semibold);font-size:var(--fs-body-tight);line-height:var(--lh-body-tight)}
.build span{color:var(--label-2);font-size:var(--fs-subhead);line-height:var(--lh-subhead)}
.tag{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 8px;border-radius:var(--r-capsule);font-size:var(--fs-fine);line-height:var(--lh-fine);font-weight:var(--fw-semibold);vertical-align:2px;background:var(--dev-bg);color:var(--dev-ink)} /* 개발용 샘플 표시 — 운영 빌드에서는 이 요소 자체가 없음 */
@media (max-width:734px){.life{grid-template-columns:1fr;gap:var(--sp-3)}.life__i{padding:var(--sp-6) var(--sp-5)}.fabric{grid-template-columns:1fr;gap:var(--sp-8)}}

/* ---------- 끝맺음 (SECTION 05) ---------- */
.end{padding-top:var(--sp-40);padding-bottom:var(--sp-20);text-align:center}
.end__msg span{display:block}
.end__p{margin:var(--sp-6) auto 0;max-width:28em}
.end__go{margin-top:var(--sp-8)}
.end__rule{width:40px;height:4px;border-radius:var(--r-capsule);background:var(--mist-line);margin:0 auto var(--sp-8)} /* 장식 — 정보 없음 */
@media (max-width:734px){.end{padding-top:var(--sp-30);padding-bottom:var(--sp-16)}}

/* ---------- 푸터 [WEB-FOOT-01] ---------- */
.foot{padding:var(--sp-6) 0 calc(var(--sp-10) + env(safe-area-inset-bottom));border-top:1px solid var(--sep)}
.foot p{font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--label-2)}
.foot p + p{margin-top:var(--sp-1)}
.foot .foot__credit{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-footnote);line-height:var(--lh-footnote)} /* [USER] 만든 곳 — 작게, 버튼 아님 */
.foot__credit a{display:inline-flex;align-items:center;gap:2px;min-height:var(--h-touch);color:var(--label);font-weight:var(--fw-semibold);letter-spacing:.06em;font-size:var(--fs-fine)}
.foot__credit a svg{width:12px;height:12px;color:var(--label-2)}
@media (hover:hover){.foot__credit a:hover{text-decoration:underline;text-underline-offset:3px}}

/* ---------- 등장 [WEB 타일 등장 · JUDG-MOTION-03] ---------- */
.js .reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--dur-page) var(--ease-enter),transform var(--dur-page) var(--ease-out);transition-delay:calc(var(--stagger) * var(--i,0))}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal .meter__fill{--p:0}
.js .reveal.is-in .meter__fill{--p:1;transition-delay:calc(var(--stagger) * var(--i,0) + 120ms)}

/* ---------- 시트 [HIG sheets/modality · KIT 38/16 · JUDG-MOTION-02] ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:var(--overlay);opacity:0;transition:opacity var(--dur-nav) var(--ease-standard)}
.scrim.is-open{opacity:1}
.sheet{position:fixed;z-index:80;background:var(--bg);color:var(--label);display:flex;flex-direction:column;outline:none;left:50%;top:50%;width:min(520px,calc(100% - 48px));max-height:calc(100vh - 80px);transform:translate(-50%,-50%) scale(.96);opacity:0;border-radius:var(--r-modal);box-shadow:0 24px 80px rgba(0,0,0,.24);transition:transform var(--dur-nav) var(--ease-enter),opacity var(--dur-nav) var(--ease-enter)}
.sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
.sheet.is-closing{transition-duration:calc(var(--dur-nav) * .6);transition-timing-function:ease-in}
.sheet[hidden],.scrim[hidden]{display:none}
.sheet__grab{display:none;width:36px;height:5px;border-radius:var(--r-capsule);background:var(--fill);margin:8px auto 0}
.sheet__head{display:flex;align-items:center;gap:var(--sp-3);min-height:52px;padding:0 var(--sp-2) 0 var(--sp-6)}
.sheet__title{flex:1;min-width:0;font-size:var(--fs-title);line-height:var(--lh-title);font-weight:var(--fw-semibold)}
.sheet__x{width:var(--h-touch);height:var(--h-touch);border-radius:50%;display:grid;place-items:center;color:var(--label-2)}
.sheet__x span{width:30px;height:30px;border-radius:50%;background:var(--fill-3);display:grid;place-items:center}
.sheet__x svg{width:14px;height:14px;stroke-width:2.4}
.sheet__body{overflow:auto;padding:var(--sp-2) var(--sp-6) var(--sp-6);-webkit-overflow-scrolling:touch}
.sheet__q{font-size:var(--fs-body-tight);line-height:var(--lh-body-tight);font-weight:var(--fw-semibold)}
.sheet__note{margin-top:var(--sp-1)}
.carelabel{margin:var(--sp-5) 0;display:flex;justify-content:center}
.carelabel svg{width:180px;height:auto;color:var(--label-2)}
.sheet .group{margin-top:var(--sp-2)}
@media (max-width:734px){
  .sheet{left:0;right:0;top:auto;bottom:0;width:100%;max-height:calc(100% - 40px);border-radius:var(--r-sheet) var(--r-sheet) 0 0;transform:translateY(100%);opacity:1;transition:transform var(--dur-sheet) var(--spring-smooth);padding-bottom:env(safe-area-inset-bottom)}
  .sheet.is-open{transform:translateY(var(--drag,0px))}
  .sheet.is-closing{transition:transform calc(var(--dur-sheet) * .6) ease-in}
  .sheet__grab{display:block}
  .sheet__head{padding-left:var(--sp-5)}
  .sheet__body{padding:var(--sp-2) var(--sp-5) var(--sp-6)}
}

/* ---------- 토스트 [HIG feedback · JUDG-MOTION-04] ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--sp-6) + env(safe-area-inset-bottom));z-index:90;transform:translate(-50%,12px);opacity:0;display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-btn-lg);padding:0 var(--sp-2) 0 var(--sp-5);border-radius:var(--r-toast);background:var(--label);color:var(--bg);font-size:var(--fs-subhead);line-height:var(--lh-subhead);box-shadow:0 12px 32px rgba(0,0,0,.24);max-width:calc(100% - 32px);transition:transform var(--dur-nav) var(--ease-enter),opacity var(--dur-nav) var(--ease-enter);pointer-events:none}
.toast.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast__x{width:var(--h-touch);height:var(--h-touch);display:grid;place-items:center;color:inherit;opacity:.8}
.toast__x svg{width:14px;height:14px}

/* ---------- 페이지 전환 [JUDG] 뷰 트랜지션 크로스페이드 320ms ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-nav);animation-timing-function:var(--ease-standard)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- 404 ---------- */
.nf{padding-top:var(--sp-30);padding-bottom:var(--sp-10)}
@media (max-width:734px){.nf{padding-top:var(--sp-16);padding-bottom:var(--sp-8)}}

/* ---------- 인쇄 ---------- */
@media print{.bar,.toast,.sheet,.scrim,.end__go,.hero__go,.copy{display:none!important}.rep,.mark,.empty{background:none;box-shadow:0 0 0 1px #ccc inset}body{background:#fff;color:#000}.js .reveal{opacity:1;transform:none}}