/* Premier: a quiet, shared visual system for the research workspace. */
/* PremiereSans is declared in /static/vendor/fonts/pretendard-v1.3.9/premiere-sans.css, which every page links next to
   this sheet: Pretendard in unicode-range slices, so a page downloads only the slices for the characters it draws.
   The wordmark draws Latin only. --p-display names no PremiereSans, so Hangul set in it falls to the system serif, as
   it did when the wordmark was the whole TrueType font. */
@font-face{font-family:PremierWordmark;src:url('/static/vendor/fonts/CormorantGaramond-Medium-latin.woff2?v=efc7354a675f') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+20-7e}
:root{
  color-scheme:light;
  --p-bg:#EFEFEF;--p-surface:#FFFFFF;--p-surface-2:#F4F4F4;--p-text:#171717;
  --p-muted:#6B6B6B;--p-line:#DCDCDC;--p-accent:#4338CA;--p-accent-soft:#EEEEFA;
  --p-red:#DC2626;--p-up:#059669;--p-down:#DC2626;--p-hold:#B45309;--p-well:#E8E8E8;--p-shadow:0 1px 3px 0 rgba(0,0,0,.06);--p-radius:var(--md-shape-l);
  --p-font:PremiereSans,'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --p-mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --p-display:PremierWordmark,'Cormorant Garamond',Georgia,serif;
  --p-inverse:#fff;--p-focus:#4338CA;--p-topbar:rgba(255,255,255,.92);

  /* ── Material 3 활자 척도 ───────────────────────────────────────────────
     역할로 부르지 크기로 부르지 않는다. 이전에는 스타일시트마다 크기를 새로 지어내
     10~12px 사이에만 여덟 가지가 생겼고, 라벨·값·본문이 서로 구별되지 않았다.
     자간은 0 으로 둔다: M3 의 양수 자간은 Roboto/라틴 기준이고, 한글에서는
     같은 값이 낱자를 흩어 가독성을 떨어뜨린다. 이것이 이 시스템의 유일한 변형이다. */
  --md-display-l:400 57px/64px var(--p-font);
  --md-display-m:400 45px/52px var(--p-font);
  --md-display-s:400 36px/44px var(--p-font);
  --md-headline-l:400 32px/40px var(--p-font);
  --md-headline-m:500 28px/36px var(--p-font);
  --md-headline-s:600 24px/32px var(--p-font);
  --md-title-l:650 22px/28px var(--p-font);
  --md-title-m:650 16px/24px var(--p-font);
  --md-title-s:650 14px/20px var(--p-font);
  --md-body-l:400 16px/26px var(--p-font);
  --md-body-m:400 14px/22px var(--p-font);
  --md-body-s:400 13px/19px var(--p-font);
  --md-label-l:600 14px/20px var(--p-font);
  --md-label-m:600 12px/16px var(--p-font);
  --md-label-s:600 11px/16px var(--p-font);
  --md-label-track:.06em;  /* 라벨만 자간을 벌린다: 글이 아니라 이름표로 읽혀야 한다 */

  /* ── 4dp 간격 격자 ─────────────────────────────────────────────────────
     6·7·9·11·18·22 같은 값이 파일마다 흩어져 있어 어느 간격도 다른 간격과
     관계를 맺지 못했다. 한 격자 위에 올리면 간격 자체가 위계를 만든다. */
  --md-space-1:4px;--md-space-2:8px;--md-space-3:12px;--md-space-4:16px;
  --md-space-5:20px;--md-space-6:24px;--md-space-7:28px;--md-space-8:32px;
  --md-space-10:40px;--md-space-12:48px;

  /* ── 형태 척도 ─────────────────────────────────────────────────────────
     반지름도 5·6·8·9·11·14·16 이 뒤섞여 있었다. */
  --md-shape-xs:4px;--md-shape-s:8px;--md-shape-m:12px;
  --md-shape-l:16px;--md-shape-xl:28px;--md-shape-full:999px;

  /* ── 고도 ──────────────────────────────────────────────────────────────
     M3 는 그림자를 임의로 쓰지 않고 여섯 단으로 정한다. 단이 곧 높이의 뜻이다. */
  --md-elev-0:none;
  --md-elev-1:0 1px 2px 0 var(--md-shadow-key),0 1px 3px 1px var(--md-shadow-ambient);
  --md-elev-2:0 1px 2px 0 var(--md-shadow-key),0 2px 6px 2px var(--md-shadow-ambient);
  --md-elev-3:0 1px 3px 0 var(--md-shadow-key),0 4px 8px 3px var(--md-shadow-ambient);
  --md-elev-4:0 2px 3px 0 var(--md-shadow-key),0 6px 10px 4px var(--md-shadow-ambient);
  --md-elev-5:0 4px 4px 0 var(--md-shadow-key),0 8px 12px 6px var(--md-shadow-ambient);
  --md-shadow-key:rgba(0,0,0,.18);--md-shadow-ambient:rgba(0,0,0,.08);

  /* ── 상태 레이어 ───────────────────────────────────────────────────────
     hover 에서 배경색을 통째로 바꾸면 요소마다 다른 색이 된다. M3 는 같은 글자색을
     정해진 불투명도로 덮어, 어떤 표면 위에서도 같은 세기의 반응이 나온다. */
  --md-state-hover:.08;--md-state-focus:.10;--md-state-press:.10;

  /* ── 밀도 ──────────────────────────────────────────────────────────────
     리서치 도구다. 토스증권은 카드 UI 를 버리고 리스트로 갔고("카드였다면 불필요한 여백과
     복잡함이 생겼을 것"), 간격 척도의 최대값이 16px, 본문 행간이 1.45 다. 이 사이트는
     패널 28px 안에 카드 24px 안에 카드 16px 이 겹쳐 글이 시작되기 전에 68px 을 썼고,
     본문 행간은 1.8~2.05 였다. 한 화면에 들어갈 것이 두 화면으로 늘어난 이유다. */
  --dz-pad:16px;       /* 패널·카드 안쪽 여백의 상한 */
  --dz-pad-tight:12px;
  --dz-gap:12px;       /* 이웃한 카드 사이 */
  --dz-stack:16px;     /* 구획 사이 */
  --dz-lead:1.5;       /* 읽는 글의 행간. 토스 1.45, 여기는 측정폭이 넓어 1.5 */

  /* ── 표면 색조 층 ──────────────────────────────────────────────────────
     이 사이트는 지금까지 흰 바탕을 1px 회색 선으로 나눠 왔다 — 주요 스타일시트에만
     실선 테두리가 110 개다. 그래서 정돈해도 와이어프레임처럼 읽힌다. M3 는 선이 아니라
     강조색을 미량 섞은 다섯 단의 표면으로 나눈다. 깊이가 색으로 보이고, 선이 사라진다. */
  --md-surf-lowest:var(--p-surface);
  --md-surf-low:color-mix(in srgb,var(--p-text) 3%,var(--p-surface));
  --md-surf:color-mix(in srgb,var(--p-text) 5%,var(--p-surface));
  --md-surf-high:color-mix(in srgb,var(--p-text) 8%,var(--p-surface));
  --md-surf-highest:color-mix(in srgb,var(--p-text) 11%,var(--p-surface));
  /* 강조색 위의 은은한 통 — M3 의 secondary-container 자리 */
  --md-tonal:color-mix(in srgb,var(--p-accent) 7%,var(--p-surface));
  --md-tonal-ink:var(--p-text);
  --md-outline:color-mix(in srgb,var(--p-text) 14%,transparent);

  /* ── 카드 처방 ─────────────────────────────────────────────────────────
     M3 카드는 elevated / filled / outlined 세 종류이고, 같은 층위의 것들끼리는
     하나만 골라 써야 한다. 이 사이트는 outlined 하나로 간다: 흰 표면, 1px 외곽선,
     같은 모서리, 그림자 없음. filled(강조색 4% 색조)를 먼저 시도했으나 흰 데스크 위에서
     경계가 보이지 않아 글이 메모장에 적힌 것처럼 읽혔다. 토스증권·shadcn 이 흰 캔버스에
     쓰는 것도 얇은 선이다. 고도는 진짜로 떠 있는 것(대화상자·메뉴·조판대)에만 남긴다. */
  --md-card-bg:var(--p-surface);
  --md-card-border:1px solid var(--md-outline);
  --md-card-radius:var(--md-shape-m);
  /* 같은 카드인데 뜻만 다른 경우 — 색상만 바꾸고 밝기 단은 유지한다 */
  --md-card-caution:color-mix(in srgb,var(--p-red) 8%,var(--p-surface));
  --md-card-accent:color-mix(in srgb,var(--p-accent) 10%,var(--p-surface));
  --bg:var(--p-bg);--surface:var(--p-surface);--surface-2:var(--p-surface-2);--text:var(--p-text);--muted:var(--p-muted);
  --line:var(--p-line);--line-strong:var(--p-line);--bg-soft:var(--p-surface-2);--faint:var(--p-muted);--accent:var(--p-accent);--accent-soft:var(--p-accent-soft);
  --sans:var(--p-font);--mono:var(--p-mono);--display:var(--p-display);
}
:root[data-theme=dark]{
  color-scheme:dark;--p-bg:#0F0F0F;--p-surface:#1C1C1C;--p-surface-2:#232323;--p-text:#F2F2F2;
  --p-muted:#9C9C9C;--p-line:rgba(255,255,255,.10);--p-accent:#818CF8;--p-accent-soft:rgba(129,140,248,.16);
  --p-red:#F87171;--p-up:#34D399;--p-down:#F87171;--p-hold:#FBBF24;--p-well:#111111;--p-shadow:0 1px 3px 0 rgba(0,0,0,.5);--p-inverse:#0F0F0F;--p-focus:#A5B4FC;--p-topbar:rgba(15,15,15,.94);
  --md-shadow-key:rgba(0,0,0,.50);--md-shadow-ambient:rgba(0,0,0,.34);
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){
  color-scheme:dark;--p-bg:#0F0F0F;--p-surface:#1C1C1C;--p-surface-2:#232323;--p-text:#F2F2F2;
  --p-muted:#9C9C9C;--p-line:rgba(255,255,255,.10);--p-accent:#818CF8;--p-accent-soft:rgba(129,140,248,.16);
  --p-red:#F87171;--p-up:#34D399;--p-down:#F87171;--p-hold:#FBBF24;--p-well:#111111;--p-shadow:0 1px 3px 0 rgba(0,0,0,.5);--p-inverse:#0F0F0F;--p-focus:#A5B4FC;--p-topbar:rgba(15,15,15,.94);
  --md-shadow-key:rgba(0,0,0,.50);--md-shadow-ambient:rgba(0,0,0,.34);
}}
html{scroll-padding-top:90px}
body.premier-ui{margin:0;min-height:100dvh;background:var(--p-bg);color:var(--p-text);font:var(--md-body-l);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
.premier-ui *,.premier-ui *::before,.premier-ui *::after{box-sizing:border-box}
:where(.premier-ui) :where(h1,h2,h3,p){margin:0}
.premier-ui h1,.premier-ui h2,.premier-ui h3{line-height:1.3;letter-spacing:-.04em;text-wrap:balance;word-break:keep-all}
.premier-ui a{color:inherit}
:where(.premier-ui) :where(button,input,select,textarea){font:inherit}
.premier-ui button,.premier-ui a,.premier-ui input,.premier-ui select,.premier-ui summary{ -webkit-tap-highlight-color:transparent}
.premier-ui :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--p-focus);outline-offset:4px}
.premier-ui ::selection{background:var(--p-accent);color:var(--p-inverse)}
.premier-ui ::placeholder{color:var(--p-muted);opacity:1}
.premier-ui [hidden]{display:none!important}
.p-skip,.premier-ui .skip{position:fixed;z-index:50;top:-100px;left:var(--md-space-5);padding:var(--md-space-3) var(--md-space-5);border-radius:var(--md-shape-s);background:var(--p-accent);color:var(--p-inverse);text-decoration:none}
.p-skip:focus,.premier-ui .skip:focus{top:12px}
.p-topbar{position:sticky;top:0;z-index:20;min-height:72px;display:flex;align-items:center;gap:40px;padding:0 max(28px,calc((100vw - 1376px)/2));border-bottom:1px solid var(--p-line);background:var(--p-topbar);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.p-brand{flex-shrink:0;display:inline-flex;align-items:baseline;gap:14px;font:500 37px/1 var(--p-display);letter-spacing:-1.8px;text-decoration:none;color:var(--p-text)}
.p-brand small{font:var(--md-label-s);letter-spacing:.14em;color:var(--p-muted)}
.p-nav{display:flex;align-items:center;gap:8px;align-self:stretch}
.p-navlink{position:relative;display:inline-flex;align-items:center;gap:var(--md-space-2);white-space:nowrap;padding:0 var(--md-space-4);min-height:48px;border:0;background:transparent;cursor:pointer;font:var(--md-title-s);text-decoration:none;color:var(--p-muted)!important;transition:color .18s,background .18s}
.p-navlink:hover{color:var(--p-accent)!important;background:var(--p-accent-soft)}
.p-navlink[aria-current]{color:var(--p-text)!important}
.p-navlink[aria-current]::after{position:absolute;content:'';height:3px;border-radius:3px 3px 0 0;bottom:0;left:16px;right:16px;background:var(--p-accent)}
.p-tools{display:flex;align-items:center;gap:12px;margin-left:auto}
.p-icon-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;gap:var(--md-space-2);min-height:40px;min-width:40px;padding:0 var(--md-space-3);border:1px solid var(--p-line);border-radius:var(--md-shape-full);color:var(--p-muted);background:transparent;cursor:pointer;white-space:nowrap;transition:color .18s}
.p-icon-btn:hover{color:var(--p-text)}
.p-icon-btn [data-theme-label]{font-size:11px}
/* M3 버튼: 알약 형태, 40dp, label-large. 상태는 배경색을 갈아치우지 않고 같은 글자색을
   정해진 불투명도로 덮는다 — 그래야 어떤 표면 위에서도 반응의 세기가 같다. */
.p-button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;gap:var(--md-space-2);min-height:40px;padding:0 var(--md-space-6);background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--md-shape-full);color:var(--p-text);font:var(--md-label-l);text-decoration:none;cursor:pointer;transition:box-shadow .18s,border-color .18s}
.p-button::before,.p-icon-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:0;transition:opacity .18s}
.p-button:hover::before,.p-icon-btn:hover::before{opacity:var(--md-state-hover)}
.p-button:focus-visible::before,.p-icon-btn:focus-visible::before{opacity:var(--md-state-focus)}
.p-button:active::before,.p-icon-btn:active::before{opacity:var(--md-state-press)}
.p-button.primary{background:var(--p-accent);border-color:transparent;color:var(--p-inverse)}
.p-button.primary:hover{box-shadow:var(--md-elev-1)}
.p-button:disabled,.p-icon-btn:disabled{opacity:.38;cursor:not-allowed}
.p-button:disabled::before,.p-icon-btn:disabled::before{opacity:0}
.p-icon{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.p-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.p-page{width:min(1376px,100%);padding:20px 24px 40px;margin:auto}
.p-eyebrow{font:var(--md-label-s);letter-spacing:var(--md-label-track);color:var(--p-accent);text-transform:uppercase}
.p-muted{color:var(--p-muted)}
.p-skeleton{border-radius:var(--md-shape-s);background:var(--p-surface-2);animation:p-breathe 1.4s ease-in-out infinite alternate}
@keyframes p-breathe{to{opacity:.45}}
@media(max-width:800px){.p-topbar{gap:18px;padding-inline:22px}.p-brand{font-size:33px}.p-brand small{display:none}.p-navlink{padding-inline:12px}.p-navlink[aria-current]::after{left:12px;right:12px}.p-tools{gap:8px}.p-icon-btn [data-theme-label]{display:none}}
@media(max-width:540px){.p-topbar{min-height:64px;padding-inline:18px;gap:12px;flex-wrap:wrap}.p-brand{font-size:32px}.p-nav{order:3;width:calc(100% + 36px);margin-inline:-18px;justify-content:center;min-height:43px;border-top:1px solid var(--p-line)}.p-navlink{justify-content:center;flex:1;padding-inline:12px;font-size:13px;min-height:43px}.p-tools{margin-block:12px}.p-page{padding:16px 16px 32px}.p-navlink .p-icon{width:17px;height:17px}.p-navlink[aria-current]::after{left:22px;right:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.premier-ui *, .premier-ui *::before,.premier-ui *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}