/* ============================================================
   design.css — 올림(OLLIM) 토큰·컴포넌트 SSOT
   기준 Figma  1s7syyWQFU9euHHSluepD7 (인스타 자동 게시 웹) · 2026-09-29 조회
   변수 이름은 Figma 그대로 — "bg/surface/default" → --bg-surface-default
   색·간격을 바꿀 일이 있으면 여기만 고친다.
   ============================================================ */

@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url("../font/Pretendard-Regular.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:500;font-display:swap;src:url("../font/Pretendard-Medium.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;src:url("../font/Pretendard-SemiBold.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url("../font/Pretendard-Bold.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:800;font-display:swap;src:url("../font/Pretendard-ExtraBold.subset.woff2") format("woff2")}

:root{
  /* ── Primitives ── */
  --brand-50:#EEF2FF; --brand-100:#E0E7FF; --brand-200:#C4D0FF; --brand-300:#9DB0FF; --brand-400:#7690FF;
  --brand-500:#4F6FFF; --brand-600:#3A57E8; --brand-700:#2E45C4; --brand-800:#253A9E; --brand-900:#1F317D; --brand-950:#141E4A;
  --gray-0:#FFFFFF; --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB; --gray-400:#9CA3AF;
  --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151; --gray-800:#1F2937; --gray-900:#111827; --gray-950:#0B0F17;
  --green-50:#EDFAF3; --green-100:#D3F3E1; --green-500:#22A45D; --green-600:#178A4B; --green-700:#11703C; --green-800:#0E5A31;
  --red-50:#FEF1F1; --red-100:#FDDCDC; --red-500:#E5383B; --red-600:#C8292C; --red-700:#A61F22; --red-800:#861A1C;
  --amber-50:#FFF7E6; --amber-100:#FFEBC2; --amber-500:#F59E0B; --amber-600:#D97706; --amber-700:#B45309; --amber-800:#92400E;
  --alpha-overlay-45:rgba(17,24,39,.45); --alpha-white-16:rgba(255,255,255,.16);

  /* ── Color (semantic) ── */
  --bg-canvas:var(--gray-50);
  --bg-surface-default:var(--gray-0); --bg-surface-subtle:var(--gray-50); --bg-surface-muted:var(--gray-100); --bg-surface-hover:var(--gray-100);
  --bg-inverse:var(--gray-900); --bg-overlay:var(--alpha-overlay-45); --bg-on-inverse-subtle:var(--alpha-white-16);
  --bg-brand-default:var(--brand-600); --bg-brand-hover:var(--brand-700); --bg-brand-subtle:var(--brand-50); --bg-brand-subtle-hover:var(--brand-100); --bg-brand-disabled:var(--brand-200);
  --bg-accent-default:var(--brand-500); --bg-neutral-default:var(--gray-100);
  --bg-success-subtle:var(--green-50); --bg-warning-subtle:var(--amber-50);
  --bg-danger-default:var(--red-600); --bg-danger-hover:var(--red-700); --bg-danger-subtle:var(--red-50);
  --bg-info-subtle:var(--brand-50); --bg-disabled:var(--gray-100);
  --text-primary:var(--gray-900); --text-secondary:var(--gray-700); --text-tertiary:var(--gray-600); --text-quaternary:var(--gray-500);
  --text-placeholder:var(--gray-400); --text-disabled:var(--gray-400);
  --text-on-brand:var(--gray-0); --text-on-inverse:var(--gray-0);
  --text-brand:var(--brand-700); --text-link-default:var(--brand-700);
  --text-success:var(--green-700); --text-warning:var(--amber-800); --text-danger:var(--red-600); --text-info:var(--brand-700);
  --icon-subtle:var(--gray-300);
  --border-subtle:var(--gray-100); --border-default:var(--gray-200); --border-strong:var(--gray-300);
  --border-focus:var(--brand-500); --border-brand-default:var(--brand-500); --border-danger-default:var(--red-500); --border-disabled:var(--gray-200);

  /* ── Layout ── */
  --space-none:0; --space-2xs:2px; --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-lgx:20px;
  --space-xl:24px; --space-2xl:32px; --space-3xl:40px; --space-4xl:48px; --space-5xl:64px; --space-6xl:80px;
  --radius-none:0; --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-2xl:24px; --radius-full:999px;
  --border-width-thin:1px; --border-width-thick:2px;
  --size-icon-sm:16px; --size-icon-md:20px; --size-icon-lg:24px; --size-icon-xl:32px; --size-icon-2xl:40px;
  --size-control-sm:32px; --size-control-md:40px; --size-control-default:48px; --size-control-lg:56px;
  --size-avatar-sm:28px; --size-avatar-md:36px; --size-avatar-lg:44px;
  --layout-topbar:64px; --layout-list-pane:400px; --layout-inspector:440px; --layout-screen:1920px;

  /* ── Effects ── */
  --shadow-xs:0 1px 2px rgba(17,24,39,.06);
  --shadow-sm:0 1px 3px rgba(17,24,39,.08),0 1px 2px rgba(17,24,39,.04);
  --shadow-md:0 8px 24px rgba(17,24,39,.10);
  --shadow-lg:0 16px 48px rgba(17,24,39,.16);
  --focus-ring:0 0 0 3px rgba(79,111,255,.24);

  --font:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}

/* ── 텍스트 스타일 13종 (Figma 이름 그대로) ── */
.t-logo      {font:800 22px/1.4 var(--font);letter-spacing:0} /* 로고 글자 — 사용자가 직접 22 로 바꿈(Logo 20 스타일 해제 상태) */
.t-heading-xl{font:700 28px/1.4 var(--font);letter-spacing:-.02em}
.t-heading-lg{font:700 24px/1.4 var(--font);letter-spacing:-.02em}
.t-heading-sm{font:600 18px/1.4 var(--font);letter-spacing:-.01em}
.t-label-lg  {font:600 16px/1.5 var(--font)}
.t-label-md  {font:600 15px/1.5 var(--font)}
.t-label-smd {font:600 14px/1.5 var(--font)}
.t-label-sm  {font:600 13px/1.5 var(--font)}
.t-body-lg   {font:400 16px/1.6 var(--font)}
.t-body-md   {font:400 15px/1.6 var(--font)}
.t-body-md-m {font:500 15px/1.6 var(--font)}
.t-body-smd  {font:400 14px/1.6 var(--font)}
.t-body-sm   {font:400 13px/1.6 var(--font)}

/* ── 리셋 ── */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
html.is-fit{scrollbar-gutter:auto} /* 화면 전체가 100vh 로 고정된 페이지 — 스크롤바 자리를 비우지 않는다 */
body{margin:0;font:400 15px/1.6 var(--font);color:var(--text-primary);background:var(--bg-canvas);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img{display:block;max-width:100%}
a{color:var(--text-link-default);text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.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{position:absolute;left:var(--space-lg);top:-100px;z-index:100;padding:var(--space-sm) var(--space-md);background:var(--bg-inverse);color:var(--text-on-inverse);border-radius:var(--radius-sm)}
.skip:focus{top:var(--space-lg)}

/* ── Icon ── */
.ico{width:var(--size-icon-md);height:var(--size-icon-md);flex:none;display:block}
.ico--sm{width:var(--size-icon-sm);height:var(--size-icon-sm)}
.ico--xl{width:var(--size-icon-xl);height:var(--size-icon-xl)}
@keyframes spin{to{transform:rotate(360deg)}}
.ico--spin{animation:spin 1s linear infinite}

/* ============================================================
   🔘 Actions & Inputs
   ============================================================ */

/* Button — Variant Primary·Outline·Ghost·Danger × Size md 40 · default 48 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);flex:none;
  height:var(--size-control-md);padding:0 var(--space-lg);border-radius:var(--radius-md);
  font:600 14px/1.5 var(--font);color:var(--text-primary);white-space:nowrap;transition:background-color .12s}
.btn .ico{color:var(--text-secondary)}
.btn--lg{height:var(--size-control-default);padding:0 var(--space-lgx);font-size:15px}
.btn--primary{background:var(--bg-brand-default);color:var(--text-on-brand)}
.btn--primary .ico{color:var(--text-on-brand)}
.btn--primary:hover{background:var(--bg-brand-hover)}
.btn--outline{background:var(--bg-surface-default);box-shadow:inset 0 0 0 1px var(--border-strong)}
.btn--outline:hover{background:var(--bg-surface-hover)}
.btn--ghost:hover{background:var(--bg-surface-hover)}
.btn--danger{background:var(--bg-danger-default);color:var(--text-on-brand)}
.btn--danger:hover{background:var(--bg-danger-hover)}
.btn--block{width:100%}
.btn:disabled{cursor:not-allowed;color:var(--text-disabled)}
.btn:disabled .ico{color:var(--text-disabled)}
.btn--primary:disabled,.btn--outline:disabled,.btn--danger:disabled{background:var(--bg-disabled);box-shadow:none}
.btn--ghost:disabled{background:none}

/* Icon Button — Outline·Ghost × md 40 · default 48 */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--size-control-md);height:var(--size-control-md);
  border-radius:var(--radius-md);color:var(--text-secondary);transition:background-color .12s}
.icon-btn:hover{background:var(--bg-surface-hover)}
.icon-btn--outline{background:var(--bg-surface-default);box-shadow:inset 0 0 0 1px var(--border-strong)}
.icon-btn--lg{width:var(--size-control-default);height:var(--size-control-default)}

/* Input — Type Text·Date·Time·Select × Default·Focus·Error·Disabled */
.input{position:relative;display:flex;align-items:center;gap:var(--space-sm);height:var(--size-control-default);
  padding:0 var(--space-md) 0 var(--space-lg);background:var(--bg-surface-default);
  border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--border-strong);min-width:0}
.input__value{flex:1;min-width:0;height:100%;border:0;background:none;padding:0;outline:none;
  font:400 15px/1.6 var(--font);color:var(--text-primary);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.input__value::placeholder{color:var(--text-placeholder)}
.input .ico{color:var(--text-quaternary)}
.input:focus-within,.input.is-open{box-shadow:inset 0 0 0 2px var(--border-focus),var(--focus-ring)}
.input.is-error{box-shadow:inset 0 0 0 2px var(--border-danger-default)}
.input.is-disabled{background:var(--bg-disabled);box-shadow:inset 0 0 0 1px var(--border-disabled)}
.input.is-disabled .input__value,.input.is-disabled .ico{color:var(--text-disabled);cursor:not-allowed}
.input :focus-visible{outline:none}
button.input__value{cursor:pointer}
span.input__value{display:flex;align-items:center}
.input--date{width:200px}.input--time{width:140px}.input--select{width:200px}
.input--fill{flex:1;width:auto}

/* Textarea — Default·Focus·Error */
.textarea{display:block;width:100%;min-height:160px;padding:var(--space-md) var(--space-lg);resize:vertical;
  font:400 15px/1.6 var(--font);color:var(--text-primary);background:var(--bg-surface-default);border:0;
  border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--border-strong);outline:none}
.textarea::placeholder{color:var(--text-placeholder)}
.textarea:focus{box-shadow:inset 0 0 0 2px var(--border-focus),var(--focus-ring)}
.textarea.is-error{box-shadow:inset 0 0 0 2px var(--border-danger-default)}

/* Field — Label 14 SemiBold + Input + Helper */
.field{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}
.field__label{font:600 14px/1.5 var(--font);color:var(--text-tertiary)}

/* Checkbox — Checked·Unchecked·Indeterminate·Disabled Checked·Disabled */
.check{position:relative;display:inline-flex;flex:none;width:20px;height:20px}
.check input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.check__box{width:20px;height:20px;border-radius:var(--radius-xs);background:var(--bg-surface-default);
  box-shadow:inset 0 0 0 2px var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--text-on-brand)}
.check__box svg{width:12px;height:12px;display:none}
.check input:checked + .check__box,.check input:indeterminate + .check__box{background:var(--bg-brand-default);box-shadow:none}
.check input:checked + .check__box .check__tick{display:block}
.check input:indeterminate + .check__box .check__tick{display:none}
.check input:indeterminate + .check__box .check__dash{display:block}
.check input:disabled{cursor:not-allowed}
.check input:disabled + .check__box{background:var(--bg-disabled);box-shadow:inset 0 0 0 2px var(--border-disabled)}
.check input:disabled:checked + .check__box{background:var(--bg-brand-disabled);box-shadow:none}
.check input:focus-visible + .check__box{outline:2px solid var(--border-focus);outline-offset:2px}

/* Switch — On·Off·Disabled On */
.switch{position:relative;flex:none;width:44px;height:26px;border-radius:var(--radius-full);background:var(--border-strong);transition:background-color .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--bg-surface-default);transition:transform .15s}
.switch[aria-checked="true"]{background:var(--bg-brand-default)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.switch:disabled{cursor:not-allowed}
.switch:disabled[aria-checked="true"]{background:var(--bg-brand-disabled)}

/* Search — Empty·Filled */
.search{display:flex;align-items:center;gap:var(--space-sm);height:var(--size-control-md);padding-left:var(--space-md);
  background:var(--bg-surface-muted);border-radius:var(--radius-md)}
.search .ico{color:var(--text-quaternary)}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font:400 15px/1.6 var(--font);color:var(--text-primary)}
.search input::placeholder{color:var(--text-placeholder)}
.search input::-webkit-search-cancel-button{display:none}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--border-focus)}
.search .icon-btn .ico{color:var(--text-quaternary)}

/* Segment · Segmented — Filter·Channel·Settings */
.segmented{display:flex;gap:var(--space-2xs);padding:var(--space-xs);background:var(--bg-surface-muted);border-radius:var(--radius-md)}
.segmented--fill .segment{flex:1 1 0;min-width:0;padding:0}
.segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);height:36px;padding:0 var(--space-md);
  border-radius:var(--radius-sm);font:600 14px/1.5 var(--font);color:var(--text-tertiary);white-space:nowrap}
.segment__count{font:600 13px/1.5 var(--font);color:var(--text-quaternary)}
.segment .ico{width:var(--size-icon-sm);height:var(--size-icon-sm)}
.segment[aria-selected="true"]{background:var(--bg-surface-default);color:var(--text-primary);box-shadow:var(--shadow-xs)}
.segment[aria-selected="true"] .segment__count{color:var(--text-brand)}
.segment:disabled{color:var(--text-disabled);cursor:not-allowed}
.segment:disabled .segment__count{color:var(--text-disabled)}

/* ============================================================
   📊 Data Display
   ============================================================ */

/* Badge — Neutral·Brand·Success·Warning·Danger (Status Badge 는 같은 모양, 문구 고정) */
.badge{display:inline-flex;align-items:center;gap:var(--space-xs);flex:none;height:24px;padding:var(--space-2xs) var(--space-sm);
  border-radius:var(--radius-full);font:600 13px/1.5 var(--font);white-space:nowrap;background:var(--bg-neutral-default);color:var(--text-secondary)}
.badge--brand{background:var(--bg-brand-subtle);color:var(--text-brand)}
.badge--success{background:var(--bg-success-subtle);color:var(--text-success)}
.badge--warning{background:var(--bg-warning-subtle);color:var(--text-warning)}
.badge--danger{background:var(--bg-danger-subtle);color:var(--text-danger)}

/* Avatar — md 36 · lg 44 */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--size-avatar-md);height:var(--size-avatar-md);
  border-radius:var(--radius-full);background:var(--bg-brand-subtle);color:var(--text-brand);font:600 14px/1.5 var(--font)}
.avatar--lg{width:var(--size-avatar-lg);height:var(--size-avatar-lg)}
button.avatar:hover{background:var(--bg-brand-subtle-hover)}

/* Batch Header */
.batch-head{display:flex;align-items:center;gap:var(--space-sm);height:40px;padding-left:var(--space-md)}
.batch-head__label{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0}
.batch-head__count{font:400 13px/1.6 var(--font);color:var(--text-quaternary)}

/* Item Row — Default·Hover·Selected */
.item-row{display:flex;align-items:center;gap:var(--space-md);width:100%;padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);text-align:left;transition:background-color .12s}
.item-row:hover{background:var(--bg-surface-hover)}
.item-row[aria-current="true"]{background:var(--bg-brand-subtle)}
.thumb{flex:none;width:40px;height:50px;border-radius:var(--radius-xs);object-fit:cover;box-shadow:inset 0 0 0 1px var(--border-subtle);background:var(--bg-surface-muted)}
.thumb-wrap{position:relative;flex:none;width:40px;height:50px;border-radius:var(--radius-xs);overflow:hidden}
.thumb-wrap img{width:100%;height:100%;object-fit:cover}
.thumb-wrap::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--border-subtle)}
.item-row__text{display:flex;flex-direction:column;gap:var(--space-2xs);flex:1;min-width:0}
.item-row__title{font:600 15px/1.5 var(--font);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-row__meta{font:400 13px/1.6 var(--font);color:var(--text-quaternary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Card Thumb — Selected true(파랑 2px) / false(투명도 72%) */
.card-thumb{position:relative;flex:none;width:56px;height:70px;border-radius:var(--radius-sm);overflow:hidden;opacity:.72;transition:opacity .12s}
.card-thumb:hover{opacity:1}
.card-thumb img,.card-thumb .ph{width:100%;height:100%;object-fit:cover}
.card-thumb[aria-current="true"]{opacity:1}
.card-thumb[aria-current="true"]::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--border-brand-default)}

/* Post Preview — 카드 무대 4:5 + 넘김 + 카운터 + 점 */
.post{width:480px;max-width:100%;background:var(--bg-surface-default);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--border-default),var(--shadow-sm);padding:1px;overflow:hidden}
.post__stage{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0}
.post__stage img,.post__stage .ph{width:100%;height:100%;object-fit:cover}
.post__nav{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;
  background:var(--bg-surface-default);color:var(--text-primary);box-shadow:var(--shadow-md)}
.post__nav--prev{left:var(--space-md)}.post__nav--next{right:var(--space-md)}
.post__nav:disabled{display:none}
.post__counter{position:absolute;top:var(--space-md);right:var(--space-md);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-full);
  background:var(--bg-surface-default);font:600 13px/1.5 var(--font);color:var(--text-secondary)}
.post__dots{display:flex;justify-content:center;gap:var(--space-xs);padding:var(--space-md) 0}
.post__dots i{width:6px;height:6px;border-radius:50%;background:var(--border-strong)}
.post__dots i.is-on{background:var(--bg-brand-default)}
/* 카드 이미지가 없는 목업 카드 — 자리표시 */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);background:var(--bg-surface-muted);color:var(--text-quaternary);font:600 13px/1.5 var(--font)}

/* Channel Row — On·Off·Disabled */
.channel{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg) 0;border-bottom:1px solid var(--border-subtle)}
.channel__head{display:flex;align-items:center;gap:var(--space-sm);min-height:23px}
.channel__head .ico{color:var(--text-primary)}
.channel__name{flex:1;min-width:0;font:600 15px/1.5 var(--font);color:var(--text-primary)}
.channel__note{font:400 14px/1.6 var(--font);color:var(--text-quaternary)}
.channel.is-disabled .channel__name,.channel.is-disabled .ico{color:var(--text-disabled)}
.channel__when{display:flex;gap:var(--space-sm)}
label.channel__head{cursor:pointer}

/* Bulk Row — Available·Unavailable */
.bulk-row{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-md) 0;border-bottom:1px solid var(--border-subtle)}
.bulk-row:last-child{border-bottom:0}
.bulk-row__main{display:flex;align-items:center;gap:var(--space-lg)}
.bulk-row__text{display:flex;flex-direction:column;gap:var(--space-2xs);flex:1;min-width:0}
.bulk-row__title{font:600 15px/1.5 var(--font);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-row.is-off .bulk-row__title{color:var(--text-tertiary)}
.bulk-row__meta{font:400 13px/1.6 var(--font);color:var(--text-quaternary)}
.bulk-row__why{display:flex;align-items:center;gap:var(--space-sm);font:400 14px/1.6 var(--font);color:var(--text-tertiary)}
.bulk-row .alert{padding-left:calc(20px + var(--space-lg))}

/* Summary Row */
.summary-row{display:flex;align-items:center;gap:var(--space-lg);min-height:44px;padding:var(--space-sm) 0;border-bottom:1px solid var(--border-subtle)}
.summary-row__label{flex:none;min-width:96px;font:400 14px/1.6 var(--font);color:var(--text-tertiary)}
.summary-row__value{flex:1;min-width:0;font:600 14px/1.5 var(--font);color:var(--text-primary)}

/* Setting Row — Trailing Button·Switch·Badge·None·Select */
.setting-group{display:flex;flex-direction:column}
.setting-group__title{font:600 13px/1.5 var(--font);color:var(--text-quaternary)}
.setting-row{display:flex;align-items:center;gap:var(--space-lg);min-height:72px;padding:var(--space-md) 0;border-bottom:1px solid var(--border-subtle)}
.setting-row__text{display:flex;flex-direction:column;gap:var(--space-2xs);flex:1;min-width:0}
.setting-row__label{font:600 15px/1.5 var(--font);color:var(--text-primary)}
.setting-row__sub{font:400 14px/1.6 var(--font);color:var(--text-tertiary)}

/* Progress Step — Done·Now·Todo */
.progress{display:flex;flex-direction:column;gap:var(--space-md)}
.progress-step{display:flex;align-items:center;gap:var(--space-md);font:400 15px/1.6 var(--font);color:var(--text-tertiary)}
.progress-step .ico{color:var(--text-quaternary)}
.progress-step.is-done{color:var(--text-primary)}
.progress-step.is-done .ico{color:var(--text-success)}
.progress-step.is-now{color:var(--text-primary);font-weight:500}
.progress-step.is-now .ico{color:var(--text-brand);animation:spin 1s linear infinite}

/* User Row — Manage·Self·Read */
.user-row{display:flex;align-items:center;gap:var(--space-md);min-height:64px;padding:var(--space-sm) 0;border-bottom:1px solid var(--border-subtle)}
.user-row__text{display:flex;flex-direction:column;gap:var(--space-2xs);flex:1;min-width:0}
.user-row__email{display:flex;align-items:center;gap:var(--space-sm);font:600 15px/1.5 var(--font);color:var(--text-primary);min-width:0}
.user-row__email span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-row__meta{font:400 13px/1.6 var(--font);color:var(--text-quaternary)}
.user-row .input--select{width:120px}

/* Empty state — Pane·Inline */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-5xl) var(--space-xl);text-align:center}
.empty--inline{padding:var(--space-2xl) var(--space-lg);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--border-default)}
.empty__icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--radius-full);background:var(--bg-surface-muted);color:var(--text-quaternary)}
.empty__texts{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}
.empty__title{font:600 16px/1.5 var(--font);color:var(--text-primary)}
.empty__text{font:400 14px/1.6 var(--font);color:var(--text-tertiary)}

/* ============================================================
   💬 Feedback
   ============================================================ */

/* Alert — Tone 5 × Style Filled·Plain */
.alert{display:flex;align-items:flex-start;gap:var(--space-xs);font:400 14px/1.6 var(--font);color:var(--text-secondary)}
.alert .ico{width:var(--size-icon-sm);height:var(--size-icon-sm);margin-top:3px}
.alert--filled{gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);background:var(--bg-surface-muted);font:500 15px/1.6 var(--font)}
.alert--filled .ico{width:var(--size-icon-md);height:var(--size-icon-md);margin-top:2px}
.alert--danger{color:var(--text-danger)}.alert--danger.alert--filled{background:var(--bg-danger-subtle)}
.alert--warning{color:var(--text-warning)}.alert--warning.alert--filled{background:var(--bg-warning-subtle)}
.alert--success{color:var(--text-success)}.alert--success.alert--filled{background:var(--bg-success-subtle)}
.alert--info{color:var(--text-info)}.alert--info.alert--filled{background:var(--bg-info-subtle)}
.alert:empty{display:none}

/* Status Panel — Info·Success·Danger·Warning */
.status-panel{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-xl);border-radius:var(--radius-lg);background:var(--bg-info-subtle)}
.status-panel__eyebrow{display:flex;align-items:center;gap:var(--space-xs);font:600 13px/1.5 var(--font);color:var(--text-info)}
.status-panel__eyebrow .ico{width:var(--size-icon-sm);height:var(--size-icon-sm)}
.status-panel__texts{display:flex;flex-direction:column;gap:var(--space-xs)}
.status-panel__title{font:600 18px/1.4 var(--font);letter-spacing:-.01em;color:var(--text-primary)}
.status-panel__text{font:400 14px/1.6 var(--font);color:var(--text-secondary)}
.status-panel__meta{font:400 14px/1.6 var(--font);color:var(--text-tertiary)}
.status-panel__actions{display:flex;gap:var(--space-sm)}
.status-panel__actions .btn{flex:1}
.status-panel--success{background:var(--bg-success-subtle)}.status-panel--success .status-panel__eyebrow{color:var(--text-success)}
.status-panel--danger{background:var(--bg-danger-subtle)}.status-panel--danger .status-panel__eyebrow{color:var(--text-danger)}
.status-panel--warning{background:var(--bg-warning-subtle)}.status-panel--warning .status-panel__eyebrow{color:var(--text-warning)}

/* Reschedule — 상태 알림 안에서 펼침 */
.reschedule{display:flex;flex-direction:column;gap:var(--space-sm)}
.reschedule__when,.reschedule__actions{display:flex;gap:var(--space-sm)}
.reschedule__actions .btn{flex:1}

/* Toast — Success·Error·Undo. 화면 아래 가운데 24, 쌓이면 위로 8 */
.toast-area{position:fixed;left:50%;bottom:var(--space-xl);transform:translateX(-50%);z-index:90;display:flex;flex-direction:column-reverse;align-items:center;gap:var(--space-sm);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl) var(--space-md) var(--space-lgx);border-radius:var(--radius-md);
  background:var(--bg-inverse);color:var(--text-on-inverse);box-shadow:var(--shadow-lg);pointer-events:auto;
  opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s}
.toast.is-show{opacity:1;transform:none}
.toast__msg{display:flex;align-items:center;gap:var(--space-sm);font:500 15px/1.6 var(--font);white-space:nowrap}
.toast--error{background:var(--bg-danger-default)}
.toast--undo{padding:var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lgx)}
.toast__undo{height:40px;padding:0 var(--space-lg);border-radius:var(--radius-sm);background:var(--bg-on-inverse-subtle);color:var(--text-on-inverse);font:600 14px/1.5 var(--font)}

/* Tooltip — 폭 280, 대상 아래 8, 오른쪽 끝 맞춤 */
.tip{position:relative;display:inline-flex}
.tooltip{position:absolute;top:calc(100% + var(--space-sm));right:0;z-index:60;width:280px;padding:var(--space-md) var(--space-lg);
  border-radius:var(--radius-sm);background:var(--bg-inverse);color:var(--text-on-inverse);box-shadow:var(--shadow-md);
  font:400 14px/1.6 var(--font);text-align:left;white-space:normal;visibility:hidden;opacity:0;transition:opacity .12s}
.tip:hover .tooltip,.tip:focus-within .tooltip{visibility:visible;opacity:1}

/* Modal — sm 400 · md 560, 딤은 bg/overlay 한 겹 */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--space-xl);background:var(--bg-overlay)}
.modal__panel{display:flex;flex-direction:column;gap:var(--space-xl);width:400px;max-width:100%;max-height:calc(100vh - 48px);padding:var(--space-xl);
  border-radius:var(--radius-2xl);background:var(--bg-surface-default);box-shadow:var(--shadow-lg);overflow:auto}
.modal--md .modal__panel{width:560px}
.modal__head{display:flex;align-items:flex-start;gap:var(--space-md)}
.modal__titles{display:flex;flex-direction:column;gap:var(--space-xs);flex:1;min-width:0}
.modal__title{font:600 18px/1.4 var(--font);letter-spacing:-.01em;color:var(--text-primary)}
.modal__desc{font:400 15px/1.6 var(--font);color:var(--text-tertiary)}
.modal__head .icon-btn{margin-top:0}
.modal__content{display:flex;flex-direction:column;gap:var(--space-lg)}
.modal__content > .segmented{align-self:flex-start}
.modal__foot{display:flex;gap:var(--space-sm)}
.modal--sm .modal__foot .btn{flex:1}
.modal--md .modal__foot{justify-content:flex-end}
.modal--md .modal__foot .btn{min-width:96px}
.modal--md .modal__foot .btn--primary,.modal--md .modal__foot .btn--danger{min-width:120px}

/* Popover — 데이트피커·셀렉트 펼침. Figma 에 열린 상태가 없어 User menu 면 처리(흰 면·border/default·radius/lg·shadow/md)를 따름 */
.popover{position:fixed;z-index:85;background:var(--bg-surface-default);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--border-default),var(--shadow-md)}
.menu{padding:var(--space-xs);max-height:288px;overflow:auto}
.menu__opt{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);width:100%;height:40px;padding:0 var(--space-md);
  border-radius:var(--radius-sm);font:400 15px/1.6 var(--font);color:var(--text-primary);text-align:left;white-space:nowrap}
.menu__opt:hover,.menu__opt.is-active{background:var(--bg-surface-hover)}
.menu__opt[aria-selected="true"]{color:var(--text-brand);font-weight:600}
.menu__opt .ico{color:var(--text-brand)}
.cal{padding:var(--space-lg);width:312px}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-sm)}
.cal__month{font:600 15px/1.5 var(--font)}
.cal__grid{display:grid;grid-template-columns:repeat(7,40px)}
.cal__wd{height:32px;display:flex;align-items:center;justify-content:center;font:600 13px/1.5 var(--font);color:var(--text-quaternary)}
.cal__day{width:40px;height:40px;border-radius:var(--radius-sm);font:400 14px/1.6 var(--font);color:var(--text-primary)}
.cal__day:hover{background:var(--bg-surface-hover)}
.cal__day.is-today{color:var(--text-brand);font-weight:600}
.cal__day[aria-selected="true"]{background:var(--bg-brand-default);color:var(--text-on-brand);font-weight:600}
.cal__day:disabled{color:var(--text-disabled);background:none;cursor:not-allowed}

/* ============================================================
   🧭 Navigation
   ============================================================ */

/* Logo — 사용자가 로고를 글자 "OLLIM" 만으로 바꿈(심볼 없음). 되돌리지 않는다 */
.logo{font:800 22px/1.4 var(--font);letter-spacing:0;color:var(--text-primary)}

/* Top bar — 높이 64 */
.topbar{display:flex;align-items:center;gap:var(--space-lg);height:var(--layout-topbar);padding:0 var(--space-xl);
  background:var(--bg-surface-default);border-bottom:1px solid var(--border-default)}
.topbar__spacer{flex:1}
.topbar__right{display:flex;align-items:center;gap:var(--space-md)}
.topbar__sync{display:flex;align-items:center;gap:var(--space-xs);font:400 14px/1.6 var(--font);color:var(--text-tertiary);white-space:nowrap}
.topbar__sync .ico{width:var(--size-icon-sm);height:var(--size-icon-sm);color:var(--text-success)}
.topbar__divider{width:1px;height:24px;background:var(--border-default)}

/* User menu — 280 */
.user-menu{position:absolute;top:calc(100% + var(--space-sm));right:0;z-index:70;width:280px;display:flex;flex-direction:column;gap:var(--space-md);
  padding:var(--space-lg);border-radius:var(--radius-lg);background:var(--bg-surface-default);box-shadow:inset 0 0 0 1px var(--border-default),var(--shadow-md)}
.user-menu__who{display:flex;align-items:center;gap:var(--space-md)}
.user-menu__text{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0}
.user-menu__name{font:600 15px/1.5 var(--font)}
.user-menu__email{font:400 14px/1.6 var(--font);color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis}
.user-menu__divider{height:1px;background:var(--border-subtle)}
.user-menu .btn{justify-content:flex-start}

/* ============================================================
   셸 — 화면 틀 (🖥 PC 화면 ①~⑥ 공통). 기준 1920×1080
   목록 400 · 가운데 무대 · 오른쪽 게시 패널 440
   ============================================================ */
.app{display:flex;flex-direction:column;height:100vh;min-width:1280px}
.app__body{flex:1;display:flex;min-height:0}

.list-pane{flex:none;width:var(--layout-list-pane);display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);
  background:var(--bg-surface-default);border-right:1px solid var(--border-default);min-height:0}
.list-pane__scroll{flex:0 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--space-lg);margin:0 calc(-1 * var(--space-lg));padding:0 var(--space-lg)}
.group{display:flex;flex-direction:column;gap:var(--space-2xs)}
.group + .group{border-top:1px solid var(--border-default);padding-top:var(--space-lg)}

.stage-pane{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column;gap:var(--space-xl);padding:var(--space-2xl)}
.stage-head{display:flex;align-items:flex-start;gap:var(--space-lg)}
.stage-head__titles{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);flex:1;min-width:0}
.stage-head__title{font:700 24px/1.4 var(--font);letter-spacing:-.02em}
.stage-head__meta{font:400 14px/1.6 var(--font);color:var(--text-tertiary)}
.stage{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-2xl)}
.preview-col{flex:none;width:480px;max-width:100%;display:flex;flex-direction:column;gap:var(--space-md)}
.card-thumbs{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.content-col{flex:1;min-width:360px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-lg)}
.content-col > *{align-self:stretch}
.content-col > .segmented{align-self:flex-start}
.caption-head{display:flex;align-items:center;gap:var(--space-sm);min-height:24px}
.caption-head__title{font:600 16px/1.5 var(--font)}
.caption-head__count{flex:1;font:400 13px/1.6 var(--font);color:var(--text-quaternary)}
.caption-head__count .over{color:var(--text-danger)}
.caption{font:400 16px/1.6 var(--font);color:var(--text-secondary);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.caption .tag{color:var(--text-link-default)}
.caption-edit{display:flex;flex-direction:column;gap:var(--space-sm)}
.caption-edit .textarea{min-height:312px}
.caption-edit__foot{display:flex;align-items:center;gap:var(--space-sm)}
.caption-edit__foot .caption-head__count{flex:1}

.panel{flex:none;width:var(--layout-inspector);display:flex;flex-direction:column;gap:var(--space-xl);padding:var(--space-xl);
  background:var(--bg-surface-default);border-left:1px solid var(--border-default);overflow:auto}
.panel__title{font:600 18px/1.4 var(--font);letter-spacing:-.01em}
.panel__list{display:flex;flex-direction:column}
.panel__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-md);padding-top:var(--space-lg);border-top:1px solid var(--border-subtle)}
.panel__sum{display:flex;align-items:center;gap:var(--space-sm);font:600 14px/1.5 var(--font)}
.panel__sum > span:first-child{flex:1;min-width:0}

.card{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-xl);background:var(--bg-surface-default);
  border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--border-default)}
.card__head{display:flex;align-items:center;gap:var(--space-lg)}
.card__title{font:600 16px/1.5 var(--font)}
.card__aside{font:400 14px/1.6 var(--font);color:var(--text-tertiary)}
.rule{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-md)}
.rule .input{width:200px}

/* ① 로그인 — 왼쪽 그림 1200 · 오른쪽 폼 720 */
.login{display:flex;min-height:100vh;background:var(--bg-surface-default)}
.login__show{flex:0 0 62.5%;background:var(--bg-surface-muted) url("../image/login-bg.webp") center/cover no-repeat}
.login__pane{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-xl)}
.login__form{width:400px;max-width:100%;display:flex;flex-direction:column;gap:var(--space-xl)}
.login__heading{display:flex;flex-direction:column;gap:var(--space-sm)}
.login__heading h1{font:700 28px/1.4 var(--font);letter-spacing:-.02em}
.login__heading p{font:400 15px/1.6 var(--font);color:var(--text-tertiary)}
.login__heading b{font-weight:600;color:var(--text-primary)}
.or{display:flex;align-items:center;gap:var(--space-md);font:400 13px/1.6 var(--font);color:var(--text-quaternary)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border-default)}
@media (max-width:900px){.login__show{display:none}}
.modal__content--xl{gap:var(--space-xl)}
.modal__help{font:400 14px/1.6 var(--font);color:var(--text-tertiary)}
.contents{display:contents}
.add-row{display:flex;gap:var(--space-sm)}
.input--role{width:120px}