/* ==========================================================================
   Params UI 표준 — 디자인 토큰 + 공통 셸
   출처: Figma 「UI 표준」 fileKey=IWss0WlxAUVodVyT2681rr
   생성: 2026-08-22 / 값은 Figma 변수 실측치와 1:1 일치
   ⚠ 이 파일이 토큰의 단일 출처다. 페이지에서 :root 재선언 금지.
   ⚠ 공개 페이지는 라이트 고정. 다크는 <html data-theme="dark">로 수동 적용.
   ========================================================================== */

/* ── Primitive (Radix 12단계 · Light) ─────────────────────────────────── */
:root{
  --slate-1:#FCFCFD; --slate-2:#F9F9FB; --slate-3:#F0F0F3; --slate-4:#E8E8EC;
  --slate-5:#E0E1E6; --slate-6:#D9D9E0; --slate-7:#CDCED6; --slate-8:#B9BBC6;
  --slate-9:#8B8D98; --slate-10:#80838D;--slate-11:#60646C;--slate-12:#1C2024;

  --blue-1:#FBFDFF;  --blue-2:#F4FAFF;  --blue-3:#E6F4FE;  --blue-4:#D5EFFF;
  --blue-5:#C2E5FF;  --blue-6:#ACD8FC;  --blue-7:#8EC8F6;  --blue-8:#5EB1EF;
  --blue-9:#0090FF;  --blue-10:#0588F0; --blue-11:#0D74CE; --blue-12:#113264;

  --green-3:#E6F6EB; --green-9:#30A46C; --green-11:#218358;
  --amber-3:#FFF7C2; --amber-9:#FFC53D; --amber-11:#AB6400;
  --red-3:#FEEBEC;   --red-9:#E5484D;   --red-11:#CE2C31;
  --indigo-11:#3A5BC7; --indigo-12:#1F2D5C;

  --shadow-base:28,32,36;
}

/* ── Semantic ─────────────────────────────────────────────────────────── */
:root{
  --color-brand-primary:var(--blue-9);
  --color-brand-primary-hover:var(--blue-10);
  --color-brand-secondary:var(--blue-11);
  --color-brand-tint:var(--blue-3);

  --color-bg-canvas:var(--slate-2);
  --color-bg-surface:var(--slate-1);
  --color-bg-surface-2:var(--slate-3);
  --color-bg-sidebar:var(--slate-12);

  --color-border:var(--slate-6);
  --color-border-strong:var(--slate-8);

  --color-text-primary:var(--slate-12);
  --color-text-secondary:var(--slate-11);
  --color-text-inverse:var(--slate-1);
  --color-text-on-sidebar:var(--slate-1);
  --color-text-on-sidebar-muted:var(--slate-9);
  --color-text-link:var(--indigo-11);
  --color-text-link-hover:var(--indigo-12);

  --color-success:var(--green-11);   --color-success-bg:var(--green-3);
  --color-warning:var(--amber-11);   --color-warning-bg:var(--amber-3);
  --color-danger:var(--red-11);      --color-danger-bg:var(--red-3);
  --color-info:var(--blue-11);       --color-info-bg:var(--blue-3);
  --color-success-solid:var(--green-9);
  --color-warning-solid:var(--amber-9);
  --color-danger-solid:var(--red-9);
  --color-info-solid:var(--blue-9);

  /* Center presence states: intentionally hue-separated on the dark sidebar. */
  --color-presence-idle:#38BDF8;
  --color-presence-working:#34D399;
  --color-presence-waiting:#A78BFA;
  --color-presence-recovering:#FB923C;
  --color-presence-failed:#FB7185;
  --color-presence-offline:#64748B;
}

/* ── 다크 섹션 고정색 ─────────────────────────────────────────────────
   모드와 무관하게 항상 어두워야 하는 섹션(히어로 다크, 시스템맵 등)에
   쓰는 값. --slate-* 를 쓰면 다크 테마에서 뒤집혀 흰 배경이 되므로
   반드시 아래 --ink-* 를 쓸 것.                                        */
:root{
  --ink-bg:#1C2024;
  --ink-bg-2:#111113;
  --ink-text:#FCFCFD;
  --ink-text-muted:#8B8D98;
  --ink-border:rgba(255,255,255,.1);
  --ink-surface:rgba(255,255,255,.04);
  --ink-accent:#5EB1EF;
}

/* ── Spacing (4의 배수만) ─────────────────────────────────────────────── */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
}

/* ── Radius ───────────────────────────────────────────────────────────── */
:root{
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
}

/* ── Typography ───────────────────────────────────────────────────────── */
:root{
  --text-xs-size:12px;   --text-xs-line:16px;
  --text-sm-size:13px;   --text-sm-line:18px;
  --text-base-size:15px; --text-base-line:22px;
  --text-lg-size:18px;   --text-lg-line:26px;
  --text-xl-size:22px;   --text-xl-line:30px;
  --text-2xl-size:28px;  --text-2xl-line:36px;

  /* 한글 우선 스택 — Inter는 한글 글리프가 없어 본문용으로 쓰지 않는다 */
  --font-sans:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",
              system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",Consolas,"Courier New",monospace;
}

/* ── Shadow ───────────────────────────────────────────────────────────── */
:root{
  --shadow-sm:0 1px 2px rgba(var(--shadow-base),.05);
  --shadow-md:0 4px 12px rgba(var(--shadow-base),.08);
  --shadow-lg:0 12px 24px rgba(var(--shadow-base),.12);
}

/* ── Layout ───────────────────────────────────────────────────────────── */
:root{
  --layout-content-max:1280px;
  --layout-header-height:64px;
  --layout-sidebar-width:240px;
  --layout-recordroom-rail-width:48px;
  --layout-recordroom-list-width:450px;
  --layout-recordroom-list-min-width:360px;
  --layout-recordroom-viewer-min-width:320px;
  --layout-recordroom-splitter-width:6px;
  --layout-recordroom-divider-width:1px;
  --bp-tablet:768px; --bp-desktop:1024px; --bp-wide:1440px;

  --utilbar-height:36px;
  --gnb-height:72px;
}

/* ── Dark theme (수동 opt-in) ─────────────────────────────────────────
   공개 페이지는 라이트 고정이므로 prefers-color-scheme 을 쓰지 않는다.
   관리자 화면 등에서 필요할 때만 <html data-theme="dark"> 로 켠다.     */
:root[data-theme="dark"]{
  --slate-1:#111113; --slate-2:#18191B; --slate-3:#212225; --slate-4:#272A2D;
  --slate-5:#2E3135; --slate-6:#363A3F; --slate-7:#43484E; --slate-8:#5A6169;
  --slate-9:#696E77; --slate-10:#777B84;--slate-11:#B0B4BA;--slate-12:#EDEEF0;

  --blue-1:#0D1520;  --blue-2:#111927;  --blue-3:#0D2847;  --blue-4:#003362;
  --blue-5:#004074;  --blue-6:#104D87;  --blue-7:#205D9E;  --blue-8:#2870BD;
  --blue-9:#0090FF;  --blue-10:#3B9EFF; --blue-11:#70B8FF; --blue-12:#C2E6FF;

  --green-3:#132D21; --green-9:#30A46C; --green-11:#3DD68C;
  --amber-3:#302008; --amber-9:#FFC53D; --amber-11:#FFCA16;
  --red-3:#3B1219;   --red-9:#E5484D;   --red-11:#FF9592;
  --indigo-11:#9EB1FF; --indigo-12:#D6E1FF;

  --shadow-base:0,0,0;
  --color-text-inverse:var(--slate-12);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-base-size);
  line-height:1.7;
  color:var(--color-text-primary);
  background:var(--color-bg-surface);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--color-brand-primary);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--space-4);top:-100px;z-index:200;
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);
  background:var(--color-brand-primary);color:#fff;font-weight:600;
  transition:top .15s ease;
}
.skip-link:focus{top:var(--space-4)}

.container{
  width:min(var(--layout-content-max),calc(100% - var(--space-12)));
  margin-inline:auto;
}

/* ==========================================================================
   Portal/UtilityBar  (Figma 39:2 · 1440x36)
   ========================================================================== */
.utilbar{
  height:var(--utilbar-height);
  background:var(--color-bg-surface-2);
  border-bottom:1px solid var(--color-border);
  font-size:var(--text-xs-size);
  line-height:var(--text-xs-line);
}
.utilbar-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.utilbar a{color:var(--color-text-secondary)}
.utilbar a:hover{color:var(--color-text-primary)}
.utilbar-right{display:flex;align-items:center;gap:var(--space-3)}
.utilbar-sep{width:1px;height:12px;background:var(--color-border)}
.utilbar .is-strong{color:var(--color-text-primary);font-weight:600}
.utilbar .is-brand{color:var(--color-brand-primary);font-weight:600}
.util-drop{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--color-text-secondary)}
.util-drop svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.2;
               stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   Portal/GNB  (Figma 40:2 · 1440x72)
   ========================================================================== */
.gnb{
  position:sticky;top:0;z-index:50;
  height:var(--gnb-height);
  background:var(--color-bg-surface);
  border-bottom:1px solid var(--color-border);
}
.gnb-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.gnb-left{display:flex;align-items:center;gap:var(--space-12);height:100%}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);
       font-size:var(--text-xl-size);line-height:1;font-weight:700;
       letter-spacing:-.03em;color:var(--color-text-primary)}
.brand-logo{height:36px;width:auto;display:block}
.brand-fallback{display:none}

.gnb-menu{display:flex;align-items:center;gap:var(--space-8);height:100%}
.gnb-item{position:relative;height:100%;display:flex;align-items:center}
.gnb-link,.gnb-trigger{
  display:inline-flex;align-items:center;gap:var(--space-1);height:100%;
  font-size:var(--text-base-size);font-weight:500;color:var(--color-text-primary);
  border-bottom:2px solid transparent;
}
.gnb-link:hover,.gnb-trigger:hover,.gnb-item:hover .gnb-trigger{
  color:var(--color-brand-primary);border-bottom-color:var(--color-brand-primary);
}
.gnb-trigger svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.2;
                 stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.gnb-item[data-open="true"] .gnb-trigger svg{transform:rotate(180deg)}

.submenu{
  display:none;position:absolute;top:100%;left:0;min-width:224px;
  padding:var(--space-2);
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  z-index:80;
}
.gnb-item:hover .submenu,
.gnb-item:focus-within .submenu,
.gnb-item[data-open="true"] .submenu{display:block}
.submenu a{
  display:flex;align-items:center;min-height:38px;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm-size);color:var(--color-text-primary);white-space:nowrap;
}
.submenu a:hover{background:var(--color-bg-surface-2)}

.gnb-right{display:flex;align-items:center;gap:var(--space-4)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;
          width:36px;height:36px;border-radius:var(--radius-pill);color:var(--color-text-primary)}
.icon-btn:hover{background:var(--color-bg-surface-2)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;
              stroke-linecap:round}

/* ==========================================================================
   Button  (Figma 01.Atoms — Primary / Secondary / Ghost)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:1px solid transparent;border-radius:var(--radius-sm);
  font-weight:600;white-space:nowrap;transition:background .15s ease,border-color .15s ease;
}
.btn-sm{min-height:34px;padding:0 var(--space-3);font-size:var(--text-xs-size)}
.btn-md{min-height:42px;padding:0 var(--space-4);font-size:var(--text-sm-size)}
.btn-lg{min-height:50px;padding:0 var(--space-6);font-size:var(--text-base-size)}
.btn-primary{background:var(--color-brand-primary);color:#fff}
.btn-primary:hover{background:var(--color-brand-primary-hover)}
.btn-secondary{background:var(--color-bg-surface);color:var(--color-text-primary);
               border-color:var(--color-border-strong)}
.btn-secondary:hover{background:var(--color-bg-surface-2)}
.btn-ghost{background:transparent;color:var(--color-text-primary)}
.btn-ghost:hover{background:var(--color-bg-surface-2)}

/* ==========================================================================
   Portal/Hero  (Figma 42:3 · 1440x480)
   ========================================================================== */
.hero{
  padding-block:var(--space-12);
  background:var(--color-bg-surface);
  text-align:center;
}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill);
  background:var(--color-brand-tint);
  color:var(--color-brand-primary);
  font-size:var(--text-xs-size);line-height:var(--text-xs-line);font-weight:500;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.hero h1{
  font-size:clamp(var(--text-2xl-size),4vw,44px);
  line-height:1.3;letter-spacing:-.035em;font-weight:700;
  max-width:20ch;
}
.hero .lead{
  max-width:60ch;
  font-size:var(--text-lg-size);line-height:var(--text-lg-line);
  color:var(--color-text-secondary);
}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}

/* ==========================================================================
   Section / Card  (Figma Portal/Card/Feature 44:5)
   ========================================================================== */
.section{padding-block:var(--space-12)}
.section-head{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-8)}
.section-head h2{font-size:var(--text-xl-size);line-height:var(--text-xl-line);
                 font-weight:700;letter-spacing:-.02em}
.section-head p{font-size:var(--text-sm-size);line-height:var(--text-sm-line);
                color:var(--color-text-secondary)}

.card-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(4,1fr)}
.card{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-5);
  background:var(--color-bg-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:border-color .15s ease,box-shadow .15s ease;
}
a.card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}
.card-label{font-size:var(--text-xs-size);line-height:var(--text-xs-line);
            font-weight:600;color:var(--color-brand-primary)}
.card-title{font-size:var(--text-base-size);line-height:var(--text-base-line);font-weight:600}
.card-desc{font-size:var(--text-sm-size);line-height:var(--text-sm-line);
           color:var(--color-text-secondary)}
.card-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:auto;padding-top:var(--space-2)}
.tag{
  display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2);
  border-radius:var(--radius-pill);background:var(--color-bg-surface-2);
  color:var(--color-text-secondary);font-size:var(--text-xs-size);
}

/* ==========================================================================
   Portal/Footer  (Figma 41:3)
   ========================================================================== */
.footer{
  background:var(--color-bg-surface-2);
  border-top:1px solid var(--color-border);
  padding-block:var(--space-12) var(--space-10);
}
.footer-inner{display:flex;flex-direction:column;gap:var(--space-10)}
.footer-upper{display:flex;justify-content:space-between;gap:var(--space-10);flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.footer-brand strong{font-size:var(--text-lg-size);line-height:var(--text-lg-line);font-weight:700}
.footer-brand p{font-size:var(--text-sm-size);line-height:var(--text-sm-line);
                color:var(--color-text-secondary)}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col h3{font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:600}
.footer-col a{font-size:var(--text-sm-size);line-height:var(--text-sm-line);
              color:var(--color-text-secondary)}
.footer-col a:hover{color:var(--color-text-primary)}
.footer-divider{height:1px;background:var(--color-border)}
.footer-info{display:flex;flex-direction:column;gap:var(--space-2)}
.footer-info p{font-size:var(--text-xs-size);line-height:var(--text-xs-line);
               color:var(--color-text-secondary)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .gnb-left{gap:var(--space-8)}
  .gnb-menu{gap:var(--space-6)}
}
@media (max-width:768px){
  .container{width:min(var(--layout-content-max),calc(100% - var(--space-6)))}
  .utilbar .util-hide-sm{display:none}
  .gnb{height:auto;position:static}
  .gnb-inner{flex-direction:column;align-items:flex-start;gap:var(--space-3);
             padding-block:var(--space-3)}
  .gnb-left{flex-direction:column;align-items:flex-start;gap:var(--space-3);height:auto;width:100%}
  .gnb-menu{flex-wrap:wrap;gap:var(--space-4);height:auto}
  .gnb-item{height:auto}
  .gnb-link,.gnb-trigger{height:auto;min-height:36px}
  .submenu{position:static;margin-top:var(--space-1);box-shadow:none}
  .gnb-right{width:100%;justify-content:flex-start}
  .card-grid{grid-template-columns:1fr}
  .footer-cols{gap:var(--space-8)}
}