/* 유진 Insight Lab — 디자인 토큰 · 공통 컴포넌트 (4장) */
:root{
  --blue-main:#1b74e4; --blue-point:#4dabf7; --blue-sub-1:#1c6fe6; --blue-navy:#0b2e6b; --blue-cta:#3182f6;
  --ink-900:#040505; --ink-800:#17181b; --ink-500:#6b7684;
  --gray-100:#eeeff0; --gray-200:#cfd0d3; --gray-400:#8d9299;
  --white:#fff; --border-neutral:#dde4eb; --surface-tint:#ebf0f5;
  --price-up:#e0344b; --price-down:#143f96;
  --color-primary:var(--blue-cta); --color-muted:var(--ink-500); --color-hairline:var(--border-neutral);
  --text-display:48px; --text-hero:34px; --text-title:27px; --text-lg:19px; --text-link:16px; --text-body:15px; --text-micro:12px;
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:18px; --space-xl:32px; --space-xxl:48px; --space-section:64px;
  --radius-sm:6px; --radius-chip:10px; --radius-md:14px; --radius-lg:20px; --radius-full:9999px;
  --shadow-soft:rgba(17,24,39,.04) 0 2px 8px 0,rgba(17,24,39,.04) 0 1px 2px 0;
  --shadow-pop:rgba(17,24,39,.10) 0 16px 40px -12px,rgba(17,24,39,.05) 0 4px 12px 0;
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-micro:120ms; --dur-toggle:200ms; --dur-page:300ms;
  --font-sans:"Pretendard Variable","Pretendard",-apple-system,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --nav-h:64px;
}

/* ---------- 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:1.6;color:var(--ink-800);background:var(--white);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--blue-cta);outline-offset:2px;border-radius:4px}
.num,.tabular{font-variant-numeric:tabular-nums}
.up{color:var(--price-up)} .down{color:var(--price-down)}
.muted{color:var(--color-muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
[hidden]{display:none!important}

/* ---------- 레이아웃 ---------- */
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.section{padding:var(--space-section) 0}
.section--tint{background:var(--surface-tint)}
.section--gray{background:#f6f7f9}
.sec-head{margin-bottom:var(--space-xl)}
.sec-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-micro);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue-main)}
.sec-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-cta)}
.sec-title{margin-top:8px;font-size:var(--text-title);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink-900)}
.sec-sub{margin-top:8px;color:var(--color-muted)}

/* ---------- 카드 · 배지 · 버튼 ---------- */
.card{background:var(--white);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  transition:transform var(--dur-toggle) var(--ease-out),box-shadow var(--dur-toggle) var(--ease-out)}
.card__body{padding:22px 24px}
a.card:hover,.card.is-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop)}

.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--radius-sm);
  font-size:var(--text-micro);font-weight:600;white-space:nowrap;background:var(--gray-100);color:var(--ink-500)}
.badge--brand{background:#e8f1fe;color:var(--blue-main)}
.badge--muted{background:var(--gray-100);color:var(--ink-500)}
.badge--up{background:#fdecee;color:var(--price-up)}
.badge--down{background:#e8edf7;color:var(--price-down)}
.badge--point{background:var(--blue-cta);color:var(--white)}
.badge--sample{background:#fff4e0;color:#b25e00}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 18px;border-radius:var(--radius-md);
  font-size:var(--text-body);font-weight:600;white-space:nowrap;
  transition:background var(--dur-micro),transform var(--dur-micro),box-shadow var(--dur-micro)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--blue-cta);color:var(--white)}
.btn--primary:hover{background:var(--blue-sub-1)}
.btn--secondary{background:#e8f1fe;color:var(--blue-main)}
.btn--secondary:hover{background:#dbe9fd}
.btn--text{height:auto;padding:4px 2px;color:var(--blue-main)}
.btn--text:hover{text-decoration:underline}
.btn--sm{height:34px;padding:0 12px;font-size:14px;border-radius:var(--radius-chip)}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- 탭 · 칩 · 표 ---------- */
.tabs{display:inline-flex;gap:2px;padding:4px;border-radius:var(--radius-md);background:var(--gray-100);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role=tab]{height:36px;padding:0 14px;border-radius:10px;font-weight:600;color:var(--ink-500);white-space:nowrap;
  transition:background var(--dur-toggle) var(--ease-out),color var(--dur-toggle)}
.tabs [role=tab][aria-selected=true]{background:var(--white);color:var(--ink-900);box-shadow:var(--shadow-soft)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--radius-full);border:1px solid var(--color-hairline);
  background:var(--white);font-size:14px;font-weight:500;color:var(--ink-800);transition:background var(--dur-micro),color var(--dur-micro)}
.chip:hover{border-color:var(--gray-200)}
.chip.is-active{background:var(--ink-900);border-color:var(--ink-900);color:var(--white)}

.tbl-wrap{position:relative;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{padding:10px 12px;text-align:left;font-size:var(--text-micro);font-weight:600;color:var(--ink-500);border-bottom:1px solid var(--color-hairline);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--gray-100)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tbody tr{transition:background var(--dur-micro)}
.tbl tbody tr.is-link{cursor:pointer}
.tbl tbody tr.is-link:hover{background:#f6f8fb}

/* ---------- AI 요약 · 토스트 · FAB ---------- */
.ai-summary{display:flex;gap:10px;padding:14px 16px;border-radius:var(--radius-md);background:linear-gradient(135deg,#eef5ff,#f5f0ff);font-size:14px;line-height:1.65}
.ai-summary::before{content:"✦";flex:none;color:var(--blue-cta);font-size:16px;line-height:1.4}

.toast{position:fixed;left:50%;bottom:32px;z-index:1000;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:var(--radius-md);
  background:rgba(23,24,27,.94);color:var(--white);font-size:14px;box-shadow:var(--shadow-pop);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity var(--dur-toggle),transform var(--dur-page) var(--ease-out)}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

.fab{position:fixed;right:20px;bottom:24px;z-index:80;width:44px;height:44px;border-radius:50%;background:var(--white);
  box-shadow:var(--shadow-pop);display:grid;place-items:center;font-size:18px;color:var(--ink-800);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--dur-toggle),transform var(--dur-toggle) var(--ease-out)}
.fab.is-show{opacity:1;transform:none;pointer-events:auto}

/* 시연 표시 — 모든 페이지 왼쪽 아래 */
.demo-flag{position:fixed;left:12px;bottom:12px;z-index:90;padding:5px 10px;border-radius:var(--radius-full);
  background:rgba(4,5,5,.72);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em;pointer-events:none;backdrop-filter:blur(6px)}

/* ---------- 모달 ---------- */
.modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:16px;background:rgba(4,5,5,.45);
  opacity:0;transition:opacity var(--dur-toggle)}
.modal.is-open{opacity:1}
.modal__box{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:var(--white);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:28px 24px;transform:translateY(8px);transition:transform var(--dur-page) var(--ease-out)}
.modal.is-open .modal__box{transform:none}
.modal__close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;font-size:20px;color:var(--ink-500)}
.modal__close:hover{background:var(--gray-100)}
.modal__title{font-size:var(--text-lg);font-weight:700;margin-bottom:6px}

/* ---------- 폼 ---------- */
.field{display:block;margin-bottom:14px}
.field__label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.input{width:100%;height:46px;padding:0 14px;border:1px solid var(--color-hairline);border-radius:var(--radius-md);background:var(--white);
  transition:border-color var(--dur-micro),box-shadow var(--dur-micro)}
.input:focus{outline:0;border-color:var(--blue-cta);box-shadow:0 0 0 3px rgba(49,130,246,.15)}
.form-note{font-size:13px;color:var(--color-muted)}

/* ---------- 상단 메뉴 (partials.js) ---------- */
.gnb{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--color-hairline)}
.gnb__in{display:flex;align-items:center;gap:24px;height:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:center;gap:10px;flex:none;font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink-900)}
.logo__mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--blue-main),var(--blue-navy));display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:800}
.logo__bar{width:1px;height:14px;background:var(--gray-200)}
.logo__sub{font-weight:600;color:var(--blue-main)}
.gnb__menu{display:flex;gap:4px}
.gnb__menu a{height:36px;padding:0 14px;display:inline-flex;align-items:center;border-radius:var(--radius-full);font-weight:600;color:var(--ink-500);
  transition:background var(--dur-micro),color var(--dur-micro)}
.gnb__menu a:hover{color:var(--ink-900);background:var(--gray-100)}
.gnb__menu a[aria-current=page]{background:var(--blue-cta);color:#fff}
.gnb__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.gnb__desk{font-weight:600;color:var(--ink-800);font-size:14px}
.gnb__desk:hover{color:var(--blue-main)}
.gnb__me{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 4px;border-radius:var(--radius-full);background:var(--gray-100);font-size:14px;font-weight:600}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue-navy);color:#fff;font-size:12px;font-weight:700;flex:none}
.gnb__out{font-size:13px;color:var(--ink-500)}
.gnb__out:hover{color:var(--ink-900)}
.gnb__burger{display:none;width:40px;height:40px;margin-left:auto;border-radius:10px;font-size:20px}

/* 다크 메뉴 (홈 히어로) */
body[data-nav=dark] .gnb{background:rgba(6,16,38,.72);border-bottom-color:rgba(255,255,255,.08)}
body[data-nav=dark] .logo,body[data-nav=dark] .gnb__desk,body[data-nav=dark] .gnb__burger{color:#fff}
body[data-nav=dark] .logo__sub{color:var(--blue-point)}
body[data-nav=dark] .gnb__menu a{color:rgba(255,255,255,.66)}
body[data-nav=dark] .gnb__menu a:hover{background:rgba(255,255,255,.08);color:#fff}
body[data-nav=dark] .gnb__me{background:rgba(255,255,255,.1);color:#fff}
body[data-nav=dark] .gnb__out{color:rgba(255,255,255,.6)}

/* 드로어 */
.drawer{position:fixed;inset:0;z-index:300;visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer__dim{position:absolute;inset:0;background:rgba(4,5,5,.4);opacity:0;transition:opacity var(--dur-toggle)}
.drawer.is-open .drawer__dim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(300px,84vw);background:#fff;padding:20px;display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);transition:transform var(--dur-page) var(--ease-out)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--gray-100)}
.drawer__close{margin-left:auto;width:36px;height:36px;border-radius:50%;font-size:20px}
.drawer__panel a,.drawer__panel .drawer__out{display:flex;align-items:center;height:48px;padding:0 12px;border-radius:var(--radius-md);font-weight:600;text-align:left}
.drawer__panel a[aria-current=page]{background:#e8f1fe;color:var(--blue-main)}
.drawer__out{color:var(--ink-500);margin-top:auto}

/* 브레드크럼 · 헤더 밴드 */
.crumb{max-width:1040px;margin:0 auto;padding:16px 24px 0;font-size:13px;color:var(--ink-500);display:flex;gap:6px;align-items:center}
.crumb a:hover{color:var(--ink-900)}
.crumb b{color:var(--ink-800);font-weight:600}
.band{max-width:1040px;margin:0 auto;padding:28px 24px 8px;display:flex;align-items:flex-end;gap:24px}
.band__eyebrow{font-size:var(--text-micro);font-weight:700;letter-spacing:.1em;color:var(--blue-main);text-transform:uppercase}
.band__title{margin-top:6px;font-size:var(--text-hero);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--ink-900)}
.band__desc{margin-top:10px;max-width:640px;color:var(--color-muted)}
.band__home{margin-left:auto;flex:none;font-size:14px;font-weight:600;color:var(--ink-500)}
.band__home:hover{color:var(--blue-main)}

/* 푸터 */
.foot{margin-top:var(--space-section);padding:36px 0 56px;background:#f6f7f9;border-top:1px solid var(--color-hairline);font-size:12.5px;color:var(--ink-500);line-height:1.7}
.foot__flag{display:inline-block;margin-bottom:10px;padding:3px 8px;border-radius:var(--radius-sm);background:#fff4e0;color:#b25e00;font-weight:700}

/* 영역 전환 */
.fade-up{animation:fadeUp .36s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .gnb__in{gap:16px}
  .gnb__desk,.gnb__out{display:none}
}
@media (max-width:768px){
  :root{--text-display:36px;--text-hero:28px;--text-title:23px;--space-section:48px;--nav-h:auto}
  .wrap{padding:0 16px}
  .gnb{height:auto}
  .gnb__in{flex-wrap:wrap;gap:0;padding:0 16px}
  .logo{height:52px}
  .gnb__burger{display:grid;place-items:center}
  .gnb__right{display:none}
  .gnb__menu{order:3;width:100%;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}
  .gnb__menu::-webkit-scrollbar{display:none}
  .gnb__menu a{flex:none;height:32px;padding:0 12px;font-size:14px}
  .crumb{padding:12px 16px 0}
  .band{padding:20px 16px 4px;flex-direction:column;align-items:flex-start;gap:12px}
  .band__home{margin-left:0}
  .card__body{padding:18px}
  .modal__box{padding:24px 18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}