/* PhotoAd Pro v2 색 토큰 — WO-THEME-01 제안본 (2026-10-16).
   역할로만 이름을 짓는다. 화면 코드에는 색 값을 직접 쓰지 않고 이 토큰만 쓴다.
   라이트는 현재 화면 색을 정리한 것이고(캔바 기준, DEC-010), 다크는 같은 구조에 어두운 팔레트를 얹은 것이다.
   대표 승인 전 제안 상태.

   규칙
   - `--accent`는 **면과 링 전용**이다. 글자에는 `--accent-text`를 쓴다(라이트 accent는 bg-app 위에서 4.35:1로 글자 기준 미달).
   - 강조 면 위의 글자·글리프는 전부 `--text-on-accent`를 쓴다. `#fff`를 직접 쓰지 않는다.
   - 선(`--line`, `--*-line`, `--ruler-tick`)은 **장식**이다. 경계는 면 색 차이로 보장하고 선 대비 3:1을 요구하지 않는다.
   - 사진·영상 위에 얹히는 색(선택 상자, 손잡이, 안전 영역, 글자 편집기, 광고 스테이지 바탕)은 테마와 무관하다. 토큰으로 바꾸지 않는다. */

:root,
[data-theme='light'] {
  color-scheme: light;

  /* 면 */
  --bg-app: #eef0f5;        /* 편집 화면 바깥 바탕 */
  --bg-panel: #ffffff;      /* 상단바·패널·타임라인 */
  --bg-raised: #ffffff;     /* 카드·팝오버·떠 있는 도구막대 */
  --bg-sunken: #f6f7fa;     /* 트랙 묶음처럼 한 단계 들어간 면 */
  --bg-hover: #f2f3f7;
  --bg-selected: #e9effe;

  /* 글자 */
  --text-1: #18223b;        /* 본문·제목 */
  --text-2: #596274;        /* 보조 설명 */
  --text-3: #646b7d;        /* 힌트·비활성. 모든 면에서 4.5:1 이상 (Fable 검수 2026-10-16) */
  --text-on-accent: #ffffff;

  /* 선 */
  --line: #e7e8ed;
  --line-strong: #d7d9e2;

  /* 강조 */
  --accent: #2458ff;        /* 로고 파랑(#126DF4) 계열. 면·링 전용 */
  --accent-hover: #1a4fd6;
  --accent-weak: #e4ebff;   /* 강조 바탕 */
  --accent-text: #1a4fd6;   /* 글자로 쓸 때 (밝은 바탕에서 4.5:1 이상) */

  /* 상태 */
  --warn-bg: #fff6d8; --warn-text: #77551a; --warn-line: #f0dba8;
  --danger-bg: #fdeaea; --danger-text: #9b2c2c; --danger-line: #f3c3c3;
  --ok-bg: #e6f6ed; --ok-text: #1d5a3c; --ok-line: #b7e0c8;

  /* 타임라인 — 종류별 의미색 */
  --clip-text-bg: #c9d6ff; --clip-text-line: #aebfff; --clip-text-fg: #17306e;
  --clip-photo-label: #141a2bcc; --clip-photo-label-fg: #ffffff;
  --clip-music-bg: #d9f0e4; --clip-music-line: #a8d9bf; --clip-music-fg: #1d5a3c;
  --clip-sfx-bg: #ffebbf; --clip-sfx-line: #ecd49a; --clip-sfx-fg: #77551a;
  --cam-bg: #f2f1f8; --cam-line: #e3e1ef; --cam-fg: #4b4370;
  --cam-on-bg: #e4ebff; --cam-on-line: #c6d4fb; --cam-on-fg: #1a4fd6;
  --ruler-tick: #c9ccd6; --ruler-tick-major: #9aa0ae; --playhead: #18223b;

  /* 보조 */
  --knob: #ffffff;                 /* 스위치 손잡이처럼 항상 밝아야 하는 작은 면 */
  --tooltip-bg: #141a2bcc; --tooltip-fg: #ffffff;
  --shadow-sm: #00000022; --shadow-md: #00000055; --shadow-lg: #18223b2e;
  --focus-ring: #2458ff;           /* 포커스 링은 한 가지로. 강조 면 위에서는 offset으로 띄운다 */
  --bg-disabled: #f1f2f6; --text-disabled: #8a90a0; --line-disabled: #dfe2ea;
  --bg-backdrop: #18223b66;        /* 모달 뒤 덮개 */
  --on-media-accent: #2458ff;      /* 사진 위 선택 상자·핸들: 두 테마 같은 값 */
  --on-media-line: #ffffff;
  --bg-inverse: #242229; --text-inverse: #ffffff;
}

[data-theme='dark'] {
  color-scheme: dark;

  --bg-app: #14161c;
  --bg-panel: #1b1e26;
  --bg-raised: #232733;
  --bg-sunken: #11131a;
  --bg-hover: #272c38;
  --bg-selected: #1e2440;

  --text-1: #eceef5;
  --text-2: #a7adbd;
  --text-3: #8b92a8;        /* 모든 어두운 면에서 4.5:1 이상 */
  --text-on-accent: #0a1026;  /* 다크에서는 밝은 파랑 위에 어두운 글자 */

  --line: #2b303c;
  --line-strong: #3a4050;

  --accent: #7aa2ff;        /* 어두운 바탕에서 대비를 얻으려고 라이트보다 밝게 */
  --accent-hover: #9bb9ff;
  --accent-weak: #1d2a4d;
  --accent-text: #b9ccff;

  --warn-bg: #3a2f16; --warn-text: #f3d79a; --warn-line: #5a4a24;
  --danger-bg: #3a1f1f; --danger-text: #f3b4b4; --danger-line: #5e3030;
  --ok-bg: #16322a; --ok-text: #a9e3c6; --ok-line: #2a5a45;

  --clip-text-bg: #2b3a6b; --clip-text-line: #3e5091; --clip-text-fg: #d6e0ff;
  --clip-photo-label: #0a0d15d9; --clip-photo-label-fg: #ffffff;
  --clip-music-bg: #1d3b2e; --clip-music-line: #2f6b50; --clip-music-fg: #a9e3c6;
  --clip-sfx-bg: #3a2f16; --clip-sfx-line: #5a4a24; --clip-sfx-fg: #f0cf8a;
  --cam-bg: #262a36; --cam-line: #333847; --cam-fg: #c3c8d8;
  --cam-on-bg: #24305a; --cam-on-line: #36457a; --cam-on-fg: #b9ccff;
  --ruler-tick: #3a4050; --ruler-tick-major: #6a7284; --playhead: #eceef5;

  --knob: #cdd2e0;
  --tooltip-bg: #05070ce6; --tooltip-fg: #eceef5;
  --shadow-sm: #00000066; --shadow-md: #00000099; --shadow-lg: #000000b3;
  --focus-ring: #7aa2ff;
  --bg-disabled: #23262f; --text-disabled: #767c8c; --line-disabled: #2f3440;
  --bg-backdrop: #04060ab3;
  --on-media-accent: #2458ff;
  --on-media-line: #ffffff;
  --bg-inverse: #e9ebf2; --text-inverse: #14161c;
}
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/assets/NotoSansKR-VF-k7NQXPol.ttf');
  font-weight: 100 900;
  font-display: block;
}

@font-face {
  font-family: 'Pretendard';
  src: url('/assets/PretendardVariable-Bh9nN6Cq.ttf');
  font-weight: 100 900;
  font-display: block;
}

@font-face {
  font-family: 'Black Han Sans';
  src: url('/assets/BlackHanSans-Regular-B0-nbKIc.ttf');
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: 'Anton';
  src: url('/assets/Anton-Regular-DDTWnLuj.ttf');
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/Inter-VF-VF2RPR_K.ttf');
  font-weight: 100 900;
  font-display: block;
}

@font-face{font-family:'Bebas Neue';src:url('/assets/BebasNeue-37KXJlK_.ttf') format('truetype');font-weight:100 900;font-display:block;}

@font-face{font-family:'Oswald';src:url('/assets/Oswald-Btv4ouYq.ttf') format('truetype');font-weight:100 900;font-display:block;}

@font-face{font-family:'Playfair Display';src:url('/assets/PlayfairDisplay-TAkk4TxC.ttf') format('truetype');font-weight:100 900;font-display:block;}

@font-face{font-family:'Lora';src:url('/assets/Lora-C1B0tkav.ttf') format('truetype');font-weight:100 900;font-display:block;}
/* 계정 메뉴·아바타·토스트: 홈과 스튜디오가 같은 메뉴를 쓰므로 공용 파일로 둔다(WO-THEME-01 후속, 2026-10-16). */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #16203955;
  display: grid;
  place-items: center;
  z-index: 100;
}
.modal-backdrop section {
  background:var(--bg-raised);
  padding: 32px;
  border-radius: 18px;
  width: 470px;
  line-height: 1.7;
}
.account-root{margin-top:auto;padding:12px 0;position:relative}
.rail .avatar,.avatar{border-radius:50%;background:var(--accent);color:var(--text-on-accent);width:40px;height:40px;display:inline-grid;place-items:center;font-weight:700}
.account-popover{position:absolute;bottom:8px;left:66px;width:284px;max-height:80vh;overflow:auto;z-index:150;background:var(--bg-raised);box-shadow:0 8px 40px var(--shadow-sm);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left;color:var(--text-1)}
.account-popover button,.account-popover summary{display:block;width:100%;text-align:left;padding:9px;border:0;border-radius:6px;background:var(--bg-raised);cursor:pointer}
.account-popover button:hover,.account-popover summary:hover{background:var(--bg-sunken)}
.account-popover small{display:block;color:var(--text-3);font-size:11px}
.account-identity{display:flex;gap:12px;align-items:center;margin:12px 0}
.language-options{padding-left:12px}
.prototype-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--bg-inverse);color:var(--text-inverse);border-radius:8px;padding:14px 20px;z-index:400}
.account-popover{overflow:visible}
.account-popover button,.account-popover summary{font-size:14px;font-weight:400;line-height:20px}
.account-flyout-row{position:relative}
.account-flyout{position:absolute;left:100%;bottom:-12px;width:245px;background:var(--bg-raised);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 8px 30px var(--shadow-sm);z-index:160}
.account-flyout.language-options{padding:8px}
/* 설정 모달: 홈의 설정 페이지를 대신한다(2026-10-16 대표 지시로 홈 설정 페이지 제거). */
.settings-dialog{width:min(460px,92vw);text-align:left}
.settings-dialog h2{margin:0 0 12px;font-size:17px}
.settings-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:2px}
.settings-list li{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.settings-list li:last-child{border-bottom:0}
.settings-list li>div{flex:1;min-width:0}
.settings-list b{display:block;font-size:13px}
.settings-list small{display:block;font-size:11px;color:var(--text-2);line-height:1.45}
.settings-list select{border:1px solid var(--line-strong);background:var(--bg-raised);color:var(--text-1);border-radius:8px;padding:7px 9px;font-size:12px}
.settings-list .ia-soon{font-size:11px;color:var(--text-2);background:var(--bg-sunken);border-radius:999px;padding:3px 9px;white-space:nowrap}
/* WO-EDITOR-V3-POLISH-01 X1: Settings dialog left navigation (Shop profile · General). */
.modal-backdrop .settings-dialog{display:flex;gap:0;padding:0;overflow:hidden;width:min(980px,94vw);max-height:min(760px,92vh);line-height:1.4}
.settings-nav{width:200px;flex:none;display:flex;flex-direction:column;gap:4px;padding:20px 12px;background:var(--bg-sunken);border-right:1px solid var(--line)}
.settings-nav h2{margin:0 8px 12px}
.settings-nav button{text-align:left;padding:9px 12px;border-radius:9px}
.settings-nav button.on{background:var(--accent-soft,#eaf0ff);color:var(--accent);font-weight:600}
.settings-body{flex:1;min-width:0;overflow:auto;padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.settings-body .settings-close{align-self:flex-end}
.settings-shop-profile .settings-close{display:none}
.settings-body .v3-mbody{padding:0}
/* DEC-050: the shared profile now lives in both topbars and bottom rails. Portal placement is viewport based,
   not the former sidebar-only left:66px/bottom:8px. These panels must not establish a transformed block. */
.account-popover[data-account-floating],.account-flyout[data-account-floating]{box-sizing:border-box;max-width:calc(100vw - 16px);overflow:auto;overscroll-behavior:contain;transform:none;inset:auto;z-index:450}
.account-popover[data-account-floating]{width:284px}
.account-flyout[data-account-floating]{width:245px;z-index:451;text-align:left;color:var(--text-1)}
.account-flyout[data-account-floating] button{display:block;width:100%;text-align:left;padding:9px;border:0;border-radius:6px;background:var(--bg-raised);color:var(--text-1);cursor:pointer;font-size:14px;font-weight:400;line-height:20px}
.account-flyout[data-account-floating] button:hover{background:var(--bg-sunken)}
.account-flyout[data-account-floating] small{display:block;color:var(--text-3);font-size:11px}