/* 0928-8 새 화면(/new) 공통 모양 — 시안(00_디자인_넘겨주기_0928 · 화면_열어보기 · 부품모음) 크기·색 그대로. 색은 tokens.css 이름으로 씀
 * 간편 모드(기본): 누르는 곳 56~72px · 글자 17~22px  /  전문가 모드: 44·36px · 13~15px  (html[data-mode])
 * 폭: ≥1280 왼쪽 메뉴 248 · 768~1279 아이콘 줄 76 · ≤767 아래 5칸(02 Mobile)  /  창 높이 ≤1159: 메뉴 압축(메뉴 줄 46px — 시안 1024 높이 그대로) */
@font-face { font-family: "Gothic A1"; src: url(/fonts/GothicA1-Bold.ttf) format("truetype"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Noto Sans KR"; src: url(/fonts/NotoSansKR-Bold.otf) format("opentype"); font-weight: 700 900; font-display: swap; }

:root { --btn-h: var(--tap-min); --btn-h-big: var(--tap-primary); --btn-h-xl: var(--tap-max); --btn-h-small: var(--tap-min); --t-body: var(--fs-body); --t-min: var(--fs-body-min); --t-l: var(--fs-body-l); --t-title: var(--fs-title); --t-big: var(--fs-title-l); --t-display: var(--fs-display); --main-pad: 26px 40px; --nav-item: var(--tap-min); --beige-2: #EDE8DD; }
html[data-mode="expert"] { --btn-h: 44px; --btn-h-big: 44px; --btn-h-xl: 44px; --btn-h-small: 36px; --t-body: 15px; --t-min: 13px; --t-l: 15px; --t-title: 17px; --t-big: 20px; --t-display: 22px; --main-pad: 20px 28px; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; font-weight: 400; }
b, strong { font-weight: 600; }   /* 1013 N31 본문 안 강조는 600 — 굵게는 제목 · 위계에만 */
h1, h2, h3 { margin: 0; color: inherit; }
h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--t-big); }
h2 { font-size: var(--t-title); font-weight: 600; }
h3 { font-size: var(--t-l); font-weight: 600; }
p { margin: 0; }
a { color: var(--teal-link); text-decoration: none; }
button { font-family: inherit; }
svg.i { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.skip { position: fixed; left: 8px; top: -80px; z-index: 1000; background: var(--ink); color: var(--surface); padding: 12px 16px; border-radius: var(--radius-m); }
.skip:focus { top: 8px; }
.hide { display: none !important; }
.muted { color: var(--muted); } .ink2 { color: var(--ink-2); } .accent-t { color: var(--accent); }
.min { font-size: var(--t-min); }
.m-only { display: none; }

/* ───────── 뼈대 ───────── */
.app { display: flex; min-height: 100vh; }
.nav { width: var(--nav-w); flex: 0 0 var(--nav-w); background: var(--nav-bg); color: var(--nav-text); display: flex; flex-direction: column; padding: 10px 14px; gap: 3px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.nav .logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; min-height: 56px; color: #FAFAF9; }
.nav .logo .sq { width: 32px; height: 32px; border-radius: 8px; background: var(--teal); display: flex; align-items: center; justify-content: center; color: var(--surface); }
.nav .logo .sq svg { width: 18px; height: 18px; }
.nav .logo b { font-family: var(--font-heading); font-weight: 700; font-size: 19px; }
.nav .kit { display: flex; align-items: center; gap: 10px; min-height: 56px; background: var(--nav-surface); color: #FAFAF9; border: 1px solid var(--nav-line); border-radius: 10px; padding: 0 12px; margin: 4px 0; }
.nav .kit .sw { width: 24px; height: 24px; border-radius: 6px; background: var(--brand-example); flex-shrink: 0; }
.nav .kit .t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav .kit .t span { font-size: 13px; color: var(--subtle); } .nav .kit .t b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .grp { font-size: 13px; font-weight: 600; color: var(--subtle); padding: 6px 12px 0; }
.nav a.it { display: flex; align-items: center; gap: 12px; min-height: var(--nav-item); padding: 0 12px; border-radius: 10px; font-size: 17px; color: var(--nav-text); position: relative; }
.nav a.it:hover { background: var(--nav-surface); }
.nav a.it[aria-current="page"] { background: var(--teal); color: var(--surface); font-weight: 600; }
.nav a.it.soon { color: var(--subtle); } .nav .new.soonb { background: var(--nav-surface); color: var(--nav-text); font-weight: 500; }
.nav .new { margin-left: auto; background: var(--accent); color: var(--surface); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.nav .badge { margin-left: auto; min-width: 26px; height: 26px; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.nav .sep { flex: 1; min-height: 8px; }
.nav hr { border: 0; border-top: 1px solid var(--nav-line); width: 100%; margin: 6px 0; }
.nav .acct { display: flex; align-items: center; gap: 10px; padding: 6px 2px 2px; }
.nav .acct .av { width: 32px; height: 32px; border-radius: 999px; background: var(--teal); color: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav .acct .av svg { width: 18px; height: 18px; }
.nav .acct .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.nav .acct .t b { font-size: 16px; color: #FAFAF9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav .acct .t span { font-size: 13px; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .acct button { min-height: 56px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--nav-line); background: transparent; color: var(--nav-text); font-size: 14px; cursor: pointer; }
.nav .mob { display: none; }
@media (max-height: 1159px) and (min-width: 768px) { :root { --nav-item: 46px; } .nav { gap: 2px; } .nav .logo { min-height: 40px; } .nav .kit, .nav .acct button { min-height: 48px; } }   /* 시안(1024 높이) 모양 그대로 — 메뉴만 압축 */

.body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hdr { min-height: var(--header-h); display: flex; align-items: center; gap: 24px; padding: 0 40px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.hdr .back { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--ink); min-height: 56px; }
.hdr .back svg { width: 20px; height: 20px; }
.hdr .ttl { font-family: var(--font-heading); font-weight: 700; font-size: var(--t-title); }
.hdr .ttl .n { color: var(--accent); }
.hdr .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.hdr .note-r { margin-left: auto; font-size: 17px; color: var(--ink-2); }
.hdr .bell { position: relative; width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.hdr .bell .nb { position: absolute; top: -6px; right: -6px; background: var(--accent); color: var(--surface); font-size: 15px; font-weight: 600; border-radius: 999px; padding: 0 7px; min-width: 24px; text-align: center; }
.steps { margin: 0 0 0 auto; padding: 0; list-style: none; display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps .c { width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--subtle); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.steps li.now { color: var(--teal); font-weight: 600; } .steps li.now .c { background: var(--teal); border-color: var(--teal); color: var(--surface); }
.steps li.done { color: var(--teal); } .steps li.done .c { background: var(--teal); border-color: var(--teal); color: var(--surface); } .steps li.done .c svg { width: 16px; height: 16px; }
.steps .ln { width: 40px; height: 2px; background: var(--line-2); } .steps .ln.on { background: var(--teal); }
.view { padding: var(--main-pad); flex: 1; display: flex; flex-direction: column; gap: 20px; }
.view:focus, .view:focus-visible { outline: none; box-shadow: none; }
.narrow { width: 100%; max-width: 880px; margin: 22px auto 0; display: flex; flex-direction: column; gap: 36px; }
.cols { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.cols.r400 { grid-template-columns: minmax(0, 1fr) clamp(400px, 33.8%, 680px); }
.cols.l400 { grid-template-columns: clamp(400px, 33.8%, 680px) minmax(0, 1fr); }

/* 768~1279 아이콘 줄 */
@media (max-width: 1279px) and (min-width: 768px) {
  .nav { width: var(--nav-rail-w); flex-basis: var(--nav-rail-w); padding: 10px 6px; align-items: center; }
  .nav .logo b, .nav .kit, .nav .grp, .nav .lbl, .nav .new, .nav .acct .t, .nav .acct button { display: none; }
  .nav a.it { width: 64px; justify-content: center; padding: 0; }
  .nav .badge { position: absolute; top: 2px; right: 2px; min-width: 22px; height: 22px; font-size: 13px; padding: 0 5px; }
  .cols, .cols.r400, .cols.l400 { grid-template-columns: minmax(0, 1fr); }
  .hdr, .view { padding-left: 24px; padding-right: 24px; }
}
/* ≤767 아래 5칸 (02 Mobile) */
@media (max-width: 767px) {
  .app { flex-direction: column; }
  /* 0928-10 확정목록 v3 값 그대로 — 메뉴 76px + 아이폰 홈 막대 자리(env) · 마지막 카드 아래 16px 늘 보임 */
  .nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: calc(76px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); flex-direction: row; gap: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line); overflow: visible; }
  .nav > :not(.mob) { display: none !important; }
  .nav .mob { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 76px; min-height: 64px; font-size: 16px; color: var(--ink-2); position: relative; }
  .nav .mob[aria-current="page"] { color: var(--teal); font-weight: 600; }
  .body { padding-bottom: calc(76px + 16px + env(safe-area-inset-bottom)); }
  .hdr { padding: 8px 16px; gap: 12px; min-height: 64px; }
  .hdr.home { display: none; }
  .hdr .steps .t, .hdr .note-r { display: none; }
  .view { padding: 16px; gap: 12px; }
  .cols, .cols.r400, .cols.l400 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .narrow { margin-top: 0; gap: 24px; }
  .m-only { display: flex; } .pc-only { display: none !important; }
}

/* ───────── 단추 (부품 1) ───────── */
.btn { font: 600 18px/1.2 var(--font-body); min-height: var(--btn-h); padding: 0 22px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-align: center; }
html[data-mode="expert"] .btn { font-size: 14px; padding: 0 14px; border-radius: 10px; }
.btn.big { min-height: var(--btn-h-big); font-size: 20px; }
.btn.xl { min-height: var(--btn-h-xl); font-size: 20px; padding: 0 48px; border-radius: 16px; }
.btn.primary { background: var(--teal); border-color: var(--teal); color: var(--surface); }
.btn.primary:active { background: var(--teal-press); border-color: var(--teal-press); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn.accent:active { background: var(--accent-press); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn.danger-t { color: var(--accent-press); border-color: var(--accent-line); }
.btn.danger { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn.beige { background: var(--bg); border-color: var(--line-2); font-weight: 500; }
.btn.ondark { background: transparent; border-color: var(--nav-line); color: #FAFAF9; font-weight: 500; }
.btn.wide { width: 100%; }
.btn.sm { min-height: var(--btn-h-small); font-size: 17px; padding: 0 16px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--disabled); border-color: var(--disabled); color: var(--disabled-ink); cursor: not-allowed; }
.btn .soon { font-size: 14px; font-weight: 500; }
.btn[aria-busy="true"]::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::before { animation: none; } }
.lnk { display: inline-flex; align-items: center; gap: 6px; min-height: 56px; font-size: 18px; font-weight: 600; color: var(--teal-link); background: none; border: 0; cursor: pointer; padding: 0; }
.costline { display: flex; flex-direction: column; gap: 4px; font-size: 17px; color: var(--ink-2); }
.costline .s { color: var(--muted); }
.gobar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ───────── 카드 (부품 2) ───────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.card.pad { padding: 24px; }
.card.dark { background: var(--ink); border-color: var(--ink); color: #FAFAF9; padding: 24px; gap: 12px; }
.card.dark h2 { font-family: var(--font-heading); font-weight: 700; font-size: 23px; }
.card.warm { border-color: var(--accent-line); }
.card.dash { border: 1px dashed var(--line-2); background: transparent; flex-direction: row; align-items: center; min-height: 84px; color: var(--ink); cursor: pointer; text-align: left; font: inherit; width: 100%; }
.card.dash .t { display: flex; flex-direction: column; flex: 1; } .card.dash b { font-size: 18px; } .card.dash span { font-size: 17px; color: var(--muted); }
.sec-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-h .r { margin-left: auto; }

/* 홈 */
.hero { background: var(--ink); color: #FAFAF9; border-radius: 22px; padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; }
.hero h1 { font-size: var(--t-display); color: #FAFAF9; }
.hero .row1 { display: flex; gap: 12px; }
.hero .inp-w { flex: 1; display: flex; align-items: center; background: var(--surface); border-radius: 14px; padding: 0 20px; min-height: 64px; }
.hero .inp-w input { border: 0; outline: 0; flex: 1; font: 20px var(--font-body); color: var(--ink); background: transparent; min-width: 0; }
.hero .row2 { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 18px; color: #D6D3D1; }
.hero .bund { min-height: 56px; padding: 0 18px; border-radius: 14px; background: var(--nav-surface); border: 1px solid var(--muted); color: var(--surface); font-size: 18px; display: inline-flex; align-items: center; gap: 8px; }
.hero .go { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 17px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile { min-height: 104px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; color: var(--ink); }
.tile .ic { width: 52px; height: 52px; border-radius: 12px; background: var(--teal-light); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tile b { font-size: 20px; } .tile span.s { font-size: 17px; color: var(--muted); }
.tile.shop { background: var(--accent-light); border-color: var(--accent-line); } .tile.shop .ic { background: #FFE4D1; color: var(--accent); }
.home2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.cont { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--track); }
.cont .th { width: 52px; height: 64px; border-radius: 8px; background: var(--ink-2); flex-shrink: 0; object-fit: cover; }
.cont .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cont .t b { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cont .t span { font-size: 17px; color: var(--muted); }
.run { border-top: 1px solid var(--track); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 767px) {
  .mtop { justify-content: space-between; align-items: center; }
  .mtop .kitpill { min-height: 56px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); padding: 0 16px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
  .mtop .kitpill .sw { width: 22px; height: 22px; border-radius: 6px; background: var(--brand-example); }
  .hero { padding: 18px 16px; border-radius: 18px; gap: 12px; } .hero h1 { font-size: 20px; }
  .hero .row1 { flex-direction: column; }
  .hero .row2 { font-size: 17px; } .hero .go { margin-left: 0; width: 100%; align-items: stretch; } .hero .go .btn { width: 100%; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tile { flex-direction: column; justify-content: center; min-height: 88px; padding: 10px 4px; gap: 6px; text-align: center; }
  .tile .ic { width: 32px; height: 32px; background: transparent; } .tile b { font-size: 17px; } .tile span.s { display: none; }
  .home2 { grid-template-columns: minmax(0, 1fr); } .home2 > .warm { order: -1; }
}

/* ───────── 입력칸 (부품 3) ───────── */
label.big, .qtitle { font-family: var(--font-heading); font-weight: 700; font-size: 26px; }
.inp { width: 100%; min-height: 64px; border-radius: 14px; border: 2px solid var(--line-2); padding: 0 20px; font: 20px var(--font-body); background: var(--surface); color: var(--ink); }
.inp.strong { min-height: 72px; border-color: var(--ink); font-size: 20px; }
.inp:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-light); outline: none; }
select.inp { font-size: 18px; } textarea.inp { min-height: 120px; padding: 14px 20px; }
.lbl2 { font-size: 17px; font-weight: 600; display: block; margin-bottom: 6px; }
.err { color: var(--accent-press); font-weight: 600; font-size: 17px; }
.search { display: flex; align-items: center; gap: 12px; min-height: 64px; border: 2px solid var(--line-2); border-radius: 14px; background: var(--surface); padding: 0 20px; }
.search input { border: 0; outline: 0; flex: 1; font: 20px var(--font-body); color: var(--ink); background: transparent; min-width: 0; }
.search svg { color: var(--muted); }
details.adv { border-top: 1px solid var(--line); padding-top: 16px; }
details.adv summary { font-size: 17px; font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 56px; display: flex; align-items: center; }
.advgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 8px; }

/* 고르기 칩·카드 (부품 7) */
.pills { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill { min-height: 56px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 17px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; }
.pill[aria-checked="true"], .pill[aria-pressed="true"], [data-rctabs] .pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
.chip { min-height: 56px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 18px var(--font-body); cursor: pointer; }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { border: 3px solid var(--teal); background: var(--teal-light); font-weight: 600; padding: 0 20px; }
.choices { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { text-align: left; padding: 22px; border-radius: 16px; border: 2px solid var(--line-2); background: var(--surface); display: flex; flex-direction: column; gap: 8px; color: var(--ink); cursor: pointer; position: relative; font: inherit; min-height: 56px; }
.choice b { font-size: 20px; display: flex; align-items: center; gap: 8px; } .choice span.s { font-size: 17px; color: var(--muted); }
.choice[aria-checked="true"] { border: 3px solid var(--teal); background: var(--teal-light); padding: 21px; } .choice[aria-checked="true"] span.s { color: var(--ink-2); }
.choice .rec { position: absolute; top: -13px; left: 18px; background: var(--teal); color: var(--surface); font-size: 17px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.choice .ck { display: none; } .choice[aria-checked="true"] .ck { display: inline; color: var(--teal); }
.swatches { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.swatch { padding: 12px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--surface); display: flex; flex-direction: column; gap: 8px; align-items: center; font: 17px var(--font-body); color: var(--ink); cursor: pointer; }
.swatch .sq { width: 100%; height: 72px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--teal-link); font-size: 17px; }
.swatch[aria-checked="true"] { border: 3px solid var(--teal); padding: 11px; font-weight: 600; }
.voice { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 92px; padding: 0 18px; border-radius: 16px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); font: 18px var(--font-body); cursor: pointer; }
.voice[aria-checked="true"] { border: 3px solid var(--teal); font-weight: 600; padding: 0 17px; }
.voice .play { width: 56px; height: 56px; border-radius: 999px; background: var(--teal); color: var(--surface); display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; flex-shrink: 0; }
.voice .play.teal { background: var(--teal); } .voice .play svg { width: 18px; height: 18px; fill: currentColor; }
.onoff { min-height: 56px; min-width: 96px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: 700 18px var(--font-body); cursor: pointer; padding: 0 24px; }
.onoff[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--surface); }
.seg { display: inline-flex; background: var(--beige-2); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { min-height: 56px; min-width: 78px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: 18px var(--font-body); cursor: pointer; padding: 0 16px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); font-weight: 600; }

/* 진행 (Blog2 · Vertical2) */
.bigt { font-family: var(--font-heading); font-weight: 700; font-size: var(--t-display); }
.stepcard { display: flex; flex-direction: column; gap: 12px; min-height: 72px; justify-content: center; padding: 14px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.stepcard .r { display: flex; align-items: center; gap: 14px; font-size: 20px; }
.stepcard .dot { width: 36px; height: 36px; border-radius: 999px; border: 2px solid var(--subtle); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--surface); }
.stepcard .st { margin-left: auto; font-size: 17px; color: var(--muted); }
.stepcard.done .dot { background: var(--teal); border-color: var(--teal); } .stepcard.done .dot svg { width: 18px; height: 18px; }
.stepcard.done .r { font-weight: 600; } .stepcard.done .st { color: var(--teal); font-weight: 600; }
.stepcard.now { border: 2px solid var(--teal); padding: 13px 19px; } .stepcard.now .r { font-weight: 600; } .stepcard.now .st { color: var(--ink); font-weight: 600; }
.stepcard.now .dot { border: 3px solid var(--teal); } .stepcard.now .dot::after { content: ""; width: 12px; height: 12px; border-radius: 999px; background: var(--teal); }
.stepcard.wait .r { color: var(--ink-2); }
.stepcard.err { border: 2px solid var(--accent-line); } .stepcard.err .st { color: var(--accent-press); font-weight: 600; }
.bar { height: 10px; background: var(--track); border-radius: 5px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--teal); width: 0; transition: width .3s; }
.bar.warm > i { background: var(--brand-example); }
.notebox { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: 14px; background: var(--accent-light); border: 1px solid var(--accent-line); font-size: 17px; color: var(--ink); }
.notebox svg { color: var(--accent); }
.notebox.info { background: var(--teal-light); border-color: var(--teal-light); color: var(--teal-link); }
.notebox.warn { background: var(--warn-bg); border-color: var(--warn-bg); color: var(--warn-ink); }
.preview .lab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 17px; font-weight: 600; color: var(--teal-link); }
.preview .pt { font-family: var(--font-heading); font-weight: 700; font-size: 22px; }
.ph { border-radius: 12px; background: var(--beige-2); min-height: 200px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 17px; overflow: hidden; }
.ph img { width: 100%; display: block; }
.skel { height: 14px; border-radius: 7px; background: var(--beige-2); }
.preview p { font-size: 18px; line-height: 1.8; color: var(--ink-2); }

/* 완성 (Blog3 · Vertical3) */
.tabs { display: flex; gap: 8px; }
.tabs [role="tab"] { min-height: 56px; padding: 0 28px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 18px var(--font-body); cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 40px 44px; display: flex; flex-direction: column; gap: 14px; }
.doc h1 { font-size: 26px; } .doc h2 { font-size: 20px; margin-top: 12px; } .doc p { font-size: 19px; line-height: 1.9; color: var(--ink-2); }
.fig { position: relative; border-radius: 12px; overflow: hidden; background: var(--beige-2); min-height: 200px; margin: 0; }
.fig img { width: 100%; display: block; }
.fig .ov { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.fig .ov .btn { background: var(--ink-2); border-color: var(--ink-2); color: var(--surface); font-weight: 500; font-size: 17px; }
.fig .empty { min-height: 200px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.fixgrid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fixgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fixgrid .btn { flex-direction: column; gap: 0; padding: 4px 8px; white-space: normal; }
@media (max-width: 767px) { .fixgrid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc { padding: 22px 18px; } .choices, .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards8 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ncard { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.ncard img { width: 100%; border-radius: 8px; } .ncard b { font-size: 18px; }
.pkgbox { background: var(--bg); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 18px; color: var(--ink-2); }
.phone { width: 100%; max-width: 400px; aspect-ratio: 400 / 710; border-radius: 22px; background: var(--ink-2); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.phone video { width: 100%; height: 100%; object-fit: contain; background: var(--ink); max-width: none; border-radius: 0; }
.phone .badge-len { position: absolute; top: 24px; left: 24px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; font-size: 17px; border-radius: 6px; padding: 2px 8px; z-index: 2; }
.phone .cap { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface); font-weight: 700; font-size: 20px; border-radius: 6px; padding: 4px 12px; max-width: 86%; text-align: center; z-index: 2; pointer-events: none; }
.phone.small { max-width: 300px; aspect-ratio: 300 / 532; }

/* 내 콘텐츠 · 승인 대기 */
.cgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ccard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.ccard .th { height: 150px; background: var(--ink-2); display: block; width: 100%; object-fit: cover; }
.ccard .b { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ccard h3 { font-size: 20px; } .ccard .meta { font-size: 17px; color: var(--muted); }
.ccard .acts { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; } .ccard .acts .btn:first-child { flex: 1; }
.tag { align-self: flex-start; font-size: 17px; font-weight: 600; border-radius: 6px; padding: 0 8px; }
.tag.making, .tag.wait { background: var(--accent-light); color: var(--accent-press); }
.tag.done { background: var(--teal-light); color: var(--teal-link); } .tag.up { background: var(--track); color: var(--ink-2); }
.rgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
/* 1003 194p 승인 대기 큰 화면 재생 */
.rpick .box.playable { cursor: zoom-in; } .rpick .box.playable::after { content: '▶'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 22px; pointer-events: none; }
.dlg.rvplay { width: min(560px, 100%); gap: 14px; } .rvplay .pvbox { background: #000; border-radius: 18px; overflow: hidden; display: flex; justify-content: center; }
/* 1016 N87 세로 영상은 칸을 9:16 으로 · 화면 높이에 맞춰 영상 전체(위 제목 · 아래 자막)가 보이게 */
.rvplay video { height: min(72vh, 900px); width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; display: block; background: #000; }
.rvplay .pvmsg { color: #fff; padding: 10px 14px; } .rvplay .acts { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.rvplay .lbl3 { min-width: 48px; color: var(--ink-2); } .rvplay .acts.three { grid-template-columns: 1fr 1fr 2fr; }   /* 1003 194 [다듬기] */
.rpick { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.rpick .box { position: relative; aspect-ratio: 190 / 250; border-radius: 14px; background: var(--ink-2); overflow: hidden; border: 3px solid transparent; }
.rpick .box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpick input[type="checkbox"] { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; margin: 0; accent-color: var(--teal); }
.rpick .dur { position: absolute; left: 12px; bottom: 12px; background: var(--ink); color: var(--surface); font-size: 17px; border-radius: 6px; padding: 0 8px; }
.rpick:has(input:checked) .box { border-color: var(--teal); }
.rpick b { font-size: 17px; } .rpick .s { font-size: 17px; color: var(--muted); }

/* 설정 */
.setw { width: 100%; max-width: 900px; margin: 10px auto 0; display: flex; flex-direction: column; gap: 16px; }
.srow { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--track); flex-wrap: wrap; }
.srow:first-child { border-top: 0; padding-top: 4px; }
.srow .t { flex: 1; display: flex; flex-direction: column; min-width: 200px; } .srow b { font-size: 20px; } .srow .t span { font-size: 17px; color: var(--ink-2); }
.links2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .links2 { grid-template-columns: minmax(0, 1fr); } }
.lcard { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 19px; font-weight: 600; color: var(--ink); }
.lcard .s { font-size: 15px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.avatar { width: 52px; height: 52px; border-radius: 999px; background: var(--teal); color: var(--surface); display: flex; align-items: center; justify-content: center; font: 800 22px var(--font-heading); flex-shrink: 0; }

/* 받기 */
.drow { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.drow:has(input:checked) { border: 2px solid var(--teal); padding: 0 19px; }
.drow input { width: 32px; height: 32px; margin: 0; accent-color: var(--teal); flex-shrink: 0; }
.drow .sw { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; }
.drow .t { display: flex; flex-direction: column; } .drow b { font-size: 20px; } .drow .t span { font-size: 17px; color: var(--muted); }
.chk { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; min-height: 56px; }
.chk input { width: 32px; height: 32px; margin: 0; accent-color: var(--teal); flex-shrink: 0; }
.chk b { font-size: 18px; font-weight: 500; display: block; } .chk span { font-size: 17px; color: var(--muted); }

/* ───────── 확인 창 (부품 5) ───────── */
.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }
.dlg { background: var(--surface); color: var(--ink); border-radius: 22px; width: min(620px, 100%); max-height: 90vh; overflow: auto; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.dlg h2 { font-family: var(--font-heading); font-weight: 700; font-size: 24px; }
.dlg .box { background: var(--bg); border-radius: 14px; padding: 18px 24px; display: flex; flex-direction: column; gap: 8px; }
.dlg ul.rights-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.55; }   /* 1003 194 권리 확인 창 */
.dlg .box .r { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; color: var(--ink-2); }
.dlg .box .r b { color: var(--ink); text-align: right; font-weight: 500; }
.dlg .box .r .money { font-family: var(--font-heading); font-weight: 700; font-size: 30px; color: var(--ink); }
.dlg p { font-size: 18px; color: var(--ink-2); line-height: 1.6; }
.dlg .acts { display: flex; gap: 12px; flex-wrap: wrap; }
.dlg .acts .btn { flex: 1 1 160px; min-height: 60px; }
.dlg .acts .btn.main { flex: 2 1 240px; }
@media (max-width: 767px) { .dlg { padding: 22px; } .dlg h2 { font-size: 20px; } .dlg .box .r .money { font-size: 23px; } }

/* 알림 (부품 6) — 정보·성공 4초 · 주의·오류는 닫을 때까지 */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, calc(100vw - 32px)); }
@media (max-width: 767px) { .toasts { bottom: calc(76px + 12px + env(safe-area-inset-bottom)); left: 16px; } }   /* 0928-10 떠 있는 알림 */
.toast { display: flex; gap: 12px; align-items: center; padding: 4px 4px 4px 18px; border-radius: 12px; font-size: 17px; border: 1px solid; }
.toast.info { background: var(--teal-light); color: var(--teal-link); border-color: var(--teal-light); }
.toast.success { background: var(--ok-light); color: var(--ok); border-color: var(--ok); }
.toast.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-ink); }
.toast.error { background: var(--accent-light); color: var(--accent-press); border-color: var(--accent-line); }
.toast button { margin-left: auto; min-height: 56px; min-width: 56px; border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; border-radius: 10px; }

/* 전문가 모드 — 작게 */
html[data-mode="expert"] .inp { min-height: 44px; font-size: 15px; } html[data-mode="expert"] .inp.strong { min-height: 44px; font-size: 16px; }
html[data-mode="expert"] .pill, html[data-mode="expert"] .chip, html[data-mode="expert"] .onoff, html[data-mode="expert"] .seg button, html[data-mode="expert"] .tabs [role="tab"], html[data-mode="expert"] .lnk { min-height: 44px; font-size: 14px; }
html[data-mode="expert"] .choice { padding: 14px; } html[data-mode="expert"] .choice b { font-size: 16px; } html[data-mode="expert"] .choice span.s { font-size: 13px; }
html[data-mode="expert"] label.big, html[data-mode="expert"] .qtitle { font-size: 20px; } html[data-mode="expert"] .narrow { gap: 20px; }
html[data-mode="expert"] .hdr .back, html[data-mode="expert"] .hdr .bell { min-height: 44px; height: 44px; font-size: 14px; }

/* 고대비(설정 · 기존 앱과 같은 열쇠 cs_a11y_hc) */
html.nu-hc { --bg: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --ink-2: #000000; --muted: #000000; --line: #000000; --line-2: #000000; --track: #FFFFFF; --teal: #000000; --teal-press: #000000; --teal-link: #000000; --teal-light: #FFFFFF; --accent: #000000; --accent-press: #000000; --accent-light: #FFFFFF; --accent-line: #000000; --warn-bg: #FFFFFF; --warn-ink: #000000; --ok: #000000; --ok-light: #FFFFFF; --nav-bg: #000000; --nav-surface: #333333; --nav-text: #FFFFFF; --subtle: #FFFFFF; --beige-2: #FFFFFF; --brand-example: #000000; }
html.nu-hc .tile.shop .ic { background: #FFFFFF; } html.nu-hc .hero, html.nu-hc .card.dark { border: 2px solid #000; }
@media print { .nav, .toasts { display: none; } }

/* 0928-10 확정목록 v3 — 80% 경고 띠 · 요금·사용량 · 폰으로 보내기 · 사진 올리기 */
.band { display: flex; align-items: center; gap: 14px; background: var(--warn-bg); border: 1px solid var(--accent-line); border-radius: 16px; padding: 8px 12px 8px 20px; color: var(--warn-ink); font-size: 18px; flex-wrap: wrap; }
.band .t { flex: 1; min-width: 200px; } .band .s { color: var(--muted); }
.ugrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1279px) { .ugrid { grid-template-columns: minmax(0, 1fr); } }
.meter { position: relative; height: 16px; background: var(--ink-2); border-radius: 10px; }
.meter > i { display: block; height: 16px; border-radius: 10px; background: repeating-linear-gradient(135deg, #2DD4BF 0 6px, #0F766E 6px 12px); max-width: 100%; }
.meter > b { position: absolute; left: 80%; top: -4px; width: 3px; height: 24px; background: #FBBF24; }
.bigmoney { font-family: var(--font-heading); font-weight: 700; font-size: 46px; line-height: 1.1; color: #FAFAF9; }
.bigmoney span { font-size: 21px; color: #D6D3D1; }
.newtag { font-size: 17px; font-weight: 600; color: var(--accent-press); background: var(--accent-light); border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 10px; margin-left: 8px; }
.moneyin { display: flex; align-items: center; gap: 8px; min-height: 64px; border: 2px solid var(--teal); border-radius: 14px; padding: 0 18px; background: var(--surface); }
.moneyin b { font-size: 20px; } .moneyin input { border: 0; outline: 0; flex: 1; min-width: 0; font: 22px var(--font-body); color: var(--ink); background: transparent; } .moneyin span { font-size: 17px; color: var(--muted); }
.sugg { display: flex; gap: 10px; } .sugg button { flex: 1; min-height: 56px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font: 18px var(--font-body); color: var(--ink); cursor: pointer; }
.sugg button[aria-pressed="true"] { border: 3px solid var(--teal); background: var(--teal-light); font-weight: 600; }
.optrow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; }
.optrow .t { display: flex; flex-direction: column; flex: 1; } .optrow b { font-size: 18px; } .optrow .t span { font-size: 17px; color: var(--muted); }
.optrow input[type="radio"], .optrow input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--teal); margin: 0; flex-shrink: 0; }
.optrow:has(input[type="radio"]:checked) { border: 3px solid var(--teal); background: var(--teal-light); padding: 6px 14px; }
.brow { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; gap: 12px; align-items: center; font-size: 17px; }
.brow .bar { height: 12px; } .brow b { text-align: right; }
.qr { width: 176px; height: 176px; flex-shrink: 0; border: 3px dashed var(--ink); border-radius: 14px; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 18px; font-weight: 600; color: var(--ink); }
.orline { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 17px; } .orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.drop { min-height: 220px; border-radius: 18px; border: 3px dashed var(--line-2); background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-2); font: inherit; cursor: not-allowed; width: 100%; }
.drop b { font-size: 21px; } .drop span { font-size: 17px; color: var(--muted); }

/* ───────── 0929-1 둘째 묶음(51~67) — 쇼핑쇼츠 · 롱폼 · 롱폼→쇼츠 · 브랜드 키트 · 내 채널 · 이미지 창고 ───────── */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.narrow.wide2 { max-width: 1040px; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .stack.s10 { gap: 10px; } .stack.center { align-items: center; }
.sect { display: flex; flex-direction: column; gap: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .grid2.gap2 { gap: 22px 28px; } .grid2 .full { grid-column: 1 / -1; }
.gobar.sp { justify-content: space-between; } .gobar .r, .lnk.r { margin-left: auto; }
.nowrap { white-space: nowrap; }
.muted.sm2 { font-size: 17px; font-weight: 400; font-family: var(--font-body); }
.ok { color: var(--teal-link); font-weight: 600; }
.ok.r2 { text-align: right; }
.tagw { display: inline-block; background: var(--warn-bg); color: var(--warn-ink); font-size: 17px; font-weight: 600; border-radius: 6px; padding: 0 8px; margin-left: 6px; }
.rec2 { font-size: 17px; font-weight: 600; color: var(--teal-link); margin-left: 6px; }
.dashnote { border: 1px dashed var(--line-2); border-radius: 14px; padding: 16px 20px; font-size: 17px; color: var(--ink-2); }
.offbox { min-height: 56px; display: flex; align-items: center; padding: 0 20px; border-radius: 14px; background: var(--beige-2); color: var(--ink-2); font-size: 17px; }
.btn.dashb, .chip.dashb, .kitem.dashb { border: 2px dashed var(--line-2); background: transparent; }
.card.row { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; } .card.row .t { flex: 1; display: flex; flex-direction: column; min-width: 220px; }
.card.scroll { max-height: 760px; overflow: auto; }
/* 쇼핑 */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.padd { min-height: 190px; border: 3px dashed var(--accent); border-radius: 18px; background: var(--accent-light); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-align: center; padding: 12px; color: var(--ink); }
.padd .plus { font-size: 40px; line-height: 1; color: var(--accent); } .padd b { font-size: 20px; } .padd .s { font-size: 17px; color: var(--ink-2); }
.padd.off { opacity: .6; cursor: not-allowed; } .padd:focus-within { box-shadow: var(--focus-ring); }
.pth { margin: 0; border-radius: 18px; overflow: hidden; background: var(--beige-2); display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; align-items: stretch; }
.pth img { width: 100%; height: 130px; object-fit: cover; display: block; } .pth figcaption { font-size: 17px; color: var(--ink-2); padding: 0 12px; } .pth .btn { margin: 0 10px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 18px; }
.rk { font-size: 17px; } .rk s { color: var(--muted); }
.cols3 { display: grid; gap: 24px; grid-template-columns: minmax(0, clamp(320px, 27.1%, 544px)) minmax(0, 1fr) minmax(0, clamp(380px, 32.2%, 646px)); align-items: start; }
.phone .vsoon, .lmvideo .vsoon { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #FAFAF9; font-size: 17px; text-align: center; padding: 0 24px; }
.phone .vsoon svg, .lmvideo .vsoon svg { width: 44px; height: 44px; fill: currentColor; }
.phone .badge-len.ad { background: var(--accent); color: var(--surface); }
.beats { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; font-size: 18px; line-height: 1.7; }
.beats li { display: flex; flex-direction: column; gap: 2px; } .beats .beat { color: var(--accent-press); } .beats .s { font-size: 17px; color: var(--muted); }
.pre { white-space: pre-wrap; font: 17px/1.7 var(--font-body); margin: 0; }
/* 롱폼 */
.money4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .money4 > div { display: flex; flex-direction: column; gap: 2px; } .money4 span { font-size: 17px; color: var(--ink-2); } .money4 b { font-size: 20px; } .money4 .sum b { color: var(--teal-link); }
.promise { background: var(--ink); color: #FAFAF9; border-radius: 18px; padding: 20px 24px; font-size: 18px; }
.lmrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--track); flex-wrap: wrap; }
.lmrow .no { width: 32px; font-size: 20px; font-weight: 700; } .lmrow .t { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 200px; } .lmrow .len { font-size: 17px; color: var(--ink-2); min-width: 64px; }
.chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.chcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; }
.chcard.now { border: 2px solid var(--teal); padding: 15px 19px; } .chcard.err { border: 2px solid var(--accent-line); padding: 15px 19px; }
.lmvideo { aspect-ratio: 16 / 9; border-radius: 22px; background: var(--ink-2); position: relative; display: flex; align-items: center; justify-content: center; }
.lmvideo .lenb { position: absolute; left: 18px; bottom: 18px; background: var(--ink); color: #FAFAF9; font-size: 17px; border-radius: 6px; padding: 2px 10px; }
.tl { gap: 0; padding: 8px 22px; } .tlrow { display: flex; gap: 20px; align-items: center; min-height: 56px; border-bottom: 1px solid var(--track); font-size: 18px; } .tlrow:last-child { border-bottom: 0; } .tlrow b { color: var(--teal-link); min-width: 64px; } .tlrow span:nth-child(2) { flex: 1; }
/* 롱폼 → 쇼츠 */
.dropz { min-height: 420px; border: 3px dashed var(--teal); border-radius: 22px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; cursor: pointer; font-size: 18px; color: var(--ink-2); }
.dropz .h { font-family: var(--font-heading); font-size: 24px; color: var(--ink); } .dropz svg.up { width: 48px; height: 48px; color: var(--teal); transform: rotate(180deg); }
.dropz.over, .dropz:focus-within { background: var(--teal-light); }
.lprev { width: 100%; max-height: 320px; border-radius: 16px; background: var(--ink); }
.choices.one { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tline { position: relative; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.tline i { position: absolute; top: 0; bottom: 0; background: var(--subtle); } .tline i.on { background: var(--teal); }
.rgrid6 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.rcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.rcard:has(input:checked) { border: 3px solid var(--teal); padding: 10px; }
.rcard .box { aspect-ratio: 9 / 13; border-radius: 12px; display: block; position: relative; } .rcard .box .tagw { position: absolute; top: 10px; left: 4px; }
.rcard b { font-size: 18px; } .rcard .s { font-size: 17px; color: var(--muted); }
.rcard .racts { display: flex; flex-wrap: wrap; gap: 6px; } .rcard .racts .btn { min-height: 40px; }   /* 1009 D 카드 단추(미리보기 · 버리기 · 다시 고르기) */
.dlg video.pvv { width: 100%; max-height: 60vh; background: #000; border-radius: 12px; display: block; }
[data-gone] ul.plain { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; } [data-gone] .xrow { justify-content: space-between; }
.rcard .pk { display: flex; align-items: center; gap: 10px; min-height: 56px; font-size: 18px; font-weight: 600; } .rcard .pk input { width: 32px; height: 32px; margin: 0; accent-color: var(--teal); }
.rgrid4 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.vcard .vbox { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; background: var(--ink-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #FAFAF9; }
.vcard .vbox .muted { color: #E7E5E4; padding: 0 12px; text-align: center; } .vcard video { width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.vcard .badge-len { position: absolute; top: 10px; left: 10px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; font-size: 17px; border-radius: 6px; padding: 0 8px; }
.vcard b { font-size: 18px; } .vcard .acts { display: flex; gap: 8px; } .vcard .acts .btn { flex: 1; padding: 0 10px; }
/* 브랜드 키트 · 글꼴 */
.kitw { display: grid; gap: 24px; grid-template-columns: minmax(0, clamp(280px, 23.7%, 476px)) minmax(0, 1fr) minmax(0, clamp(300px, 25.4%, 510px)); align-items: start; }
.kitem { min-height: 64px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); font: 18px var(--font-body); color: var(--ink); cursor: pointer; text-align: left; }
.kitem[aria-pressed="true"] { border: 3px solid var(--teal); padding: 0 16px; font-weight: 600; }
.kitem .sw { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; } .kitem .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kitem .def { color: var(--teal-link); font-weight: 600; font-size: 17px; }
.inp.kname { max-width: 360px; font-family: var(--font-heading); font-weight: 700; font-size: 23px; }
.logoz { min-height: 110px; border: 2px dashed var(--line-2); border-radius: 14px; background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: var(--ink-2); margin-bottom: 8px; }
.logoz img { max-height: 90px; max-width: 80%; } .logoz:focus-within { box-shadow: var(--focus-ring); }
.sw5 { display: flex; gap: 12px; flex-wrap: wrap; } .csw { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; display: block; } .csw:focus-within { box-shadow: var(--focus-ring); }
label.btn { position: relative; }
.kprev { aspect-ratio: 4 / 5; border-radius: 18px; background: var(--ink); color: #FAFAF9; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; overflow: hidden; }
.kprev .lg { position: absolute; top: 20px; left: 20px; max-height: 44px; max-width: 40%; } .kprev .lgb { position: absolute; top: 20px; left: 20px; width: 44px; height: 44px; border-radius: 10px; }
.kprev b { font-size: 24px; line-height: 1.3; } .kprev span { font-size: 17px; } .kprev i { position: absolute; left: 22px; bottom: 22px; width: 80px; height: 6px; border-radius: 3px; }
.fontrow { display: flex; align-items: center; gap: 12px; min-height: 56px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; cursor: pointer; }
.fontrow:has(input:checked) { border: 3px solid var(--teal); padding: 0 12px; } .fontrow input { width: 24px; height: 24px; accent-color: var(--teal); } .fontrow .nm { font-weight: 600; min-width: 140px; } .fontrow .smp { font-size: 20px; color: var(--ink-2); }
.overlay[data-dlg="font"] .dlg { max-height: 88vh; overflow: auto; }
/* 채널 · 이미지 창고 */
.bchip { display: inline-flex; align-items: center; gap: 10px; } .bchip .sw { width: 20px; height: 20px; border-radius: 6px; }
.chgrid3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.chc h3 { font-size: 20px; } .chc span { font-size: 17px; } .ktag { background: var(--teal-light); color: var(--teal-link); font-weight: 600; border-radius: 8px; padding: 2px 10px; }
.libgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.libc { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .libc img { width: 100%; height: 150px; object-fit: cover; display: block; } .libc figcaption { padding: 10px 12px; font-size: 17px; color: var(--ink-2); }
@media (max-width: 1279px) { .cols3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cols3 > aside { grid-column: 1 / -1; } .kitw { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } .kitw > aside { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .grid2, .money4 { grid-template-columns: minmax(0, 1fr); } .money4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .padd { min-height: 150px; }
  .cols3, .kitw { grid-template-columns: minmax(0, 1fr); } .choices.one { grid-template-columns: minmax(0, 1fr); }
  .dropz { min-height: 260px; } .dropz .h { font-size: 20px; } .rgrid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inp.kname { font-size: 20px; } .kprev { aspect-ratio: auto; min-height: 260px; }
}
/* 단계가 4개 넘는 머리글(롱폼 5단계) — 좁으면 지금 단계 이름만 */
.steps.many .ln { width: 20px; }
@media (max-width: 1279px) { .steps.many li:not(.now) .t { display: none; } }
@media (max-width: 767px) { .steps.many { gap: 6px; } .steps.many .ln { width: 10px; } }
.btn.m-only { display: none; }
@media (max-width: 767px) { .btn.m-only { display: inline-flex; } }
.kitw .grid2 .btn { white-space: normal; }

/* ═════ 0929-4 전문가 작업 화면(시안 셋째 묶음 68~72) — 옆 메뉴 · [간편·전문가] 44px · 3단 작업 화면 ═════ */
.x-only { display: none !important; }
html[data-mode="expert"] .nav .x-only { display: flex !important; }
html[data-mode="expert"] .nav .grp.x-only { display: block !important; }
html[data-mode="expert"] .nav .s-only { display: none !important; }
html[data-mode="expert"] .nav a.it { font-size: 15px; min-height: 44px; gap: 10px; }
html[data-mode="expert"] .nav .grp { font-size: 13px; padding-top: 8px; }
html[data-mode="expert"] .nav .logo b { font-size: 17px; }
.nav .xback { align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--nav-line); border-radius: 10px; background: transparent; color: var(--nav-text); font: inherit; font-size: 15px; cursor: pointer; margin-top: 6px; }
.nav .xback:hover { background: var(--nav-surface); }
.mseg { display: inline-flex; flex-shrink: 0; background: var(--beige-2); border-radius: 10px; padding: 0; margin-left: 8px; }
.mseg button { min-height: 44px; height: 44px; min-width: 64px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 14px; line-height: 1; color: var(--ink-2); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.mseg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); font-weight: 600; }
.hdr .note-r .xh { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xgrid { display: grid; gap: 16px; margin-top: 12px; align-items: start; }
.xgrid.s3 { grid-template-columns: clamp(330px, 27.9%, 561px) minmax(0, 1fr) clamp(300px, 25.4%, 510px); }
.xgrid.e4 { grid-template-columns: clamp(260px, 22.0%, 442px) minmax(0, clamp(300px, 25.4%, 510px)) minmax(0, 1fr) clamp(280px, 23.7%, 476px); }
.xgrid.c3 { grid-template-columns: clamp(240px, 20.3%, 408px) minmax(0, 1fr) clamp(300px, 25.4%, 510px); }
.xcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.xcard.dark { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.xcard h2, .xcard h3 { font-size: 16px; margin: 0; }
.xcard .sub { font-size: 13px; color: var(--muted); }
.xcard.dark .sub { color: #D6D3D1; }
.xlab { font-size: 13px; color: var(--muted); }
.xtag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 600; background: var(--beige-2); color: var(--ink); white-space: nowrap; }
.xtag.loss { background: var(--accent-light); color: var(--accent-press); border: 1px solid var(--accent-line); }
.xtag.gain { background: var(--teal-light); color: var(--teal-press); border: 1px solid var(--teal); }
.xtag.ok { background: var(--ok-light); color: var(--ok); }
.xtag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.xhook { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.xhook .r { display: flex; gap: 8px; align-items: center; }
.xhook .r .t { flex: 1; min-width: 0; }
.xhook[aria-pressed="true"] { border: 2px solid var(--teal); }
.xhook.bad { opacity: .7; }
.xhook .m { font-size: 13px; color: var(--muted); }
.xstrike { text-decoration: line-through; }
.xtbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.xtbl th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 500; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.xtbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.xtbl tr.on td { background: var(--teal-light); }
.xtbl tr.warn td { background: var(--warn-bg); }
.xtbl textarea { width: 100%; min-height: 44px; font: inherit; font-size: 14px; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; resize: vertical; color: var(--ink); }
.xtbl textarea:focus { border-color: var(--teal); background: var(--surface); outline: none; }
.xbar { display: grid; grid-template-columns: 76px minmax(0, 1fr) 52px; gap: 8px; align-items: center; font-size: 13px; }
.xbar .tr { height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; }
.xbar .tr i { display: block; height: 100%; background: var(--teal); }
.xbar.hl { background: var(--accent-light); border-radius: 6px; padding: 2px 4px; font-weight: 600; }
.xbar.hl .tr i { background: var(--accent); }
.xrisk { display: flex; gap: 4px; flex-wrap: wrap; }
.xrisk span { min-width: 30px; min-height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 13px; background: var(--teal-light); color: var(--teal-press); }
.xrisk span.med { background: var(--warn-bg); color: var(--warn-ink); }
.xrisk span.high { background: var(--accent-press); color: var(--surface); }
.xscore { font-size: 36px; font-weight: 700; line-height: 1; }
.xscore small { font-size: 16px; font-weight: 500; }
.xnote { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); }
.xrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.xrow > .grow { flex: 1; min-width: 0; }
.xphone { aspect-ratio: 9 / 16; width: 100%; max-width: 260px; margin: 0 auto; background: var(--ink-2); border-radius: 16px; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.xphone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xphone .cap { position: relative; margin: 0 10px 22%; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 700; text-align: center; line-height: 1.3; }
.xscenes { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow: auto; }
.xscene { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; min-height: 44px; }
.xscene[aria-pressed="true"] { border: 2px solid var(--teal); }
.xscene .th { width: 64px; height: 44px; border-radius: 6px; background: var(--beige-2); object-fit: cover; }
.xscene .w { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; }
.xscene .w span { background: var(--teal-light); border-radius: 4px; padding: 0 4px; }
.xtl { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.xtl .lane { display: flex; gap: 3px; align-items: stretch; min-height: 32px; }
.xtl .lane b { width: 64px; flex-shrink: 0; font-size: 13px; display: flex; align-items: center; }
.xtl .blk { min-width: 24px; border-radius: 4px; font-size: 13px; padding: 0 6px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; border: 0; font-family: inherit; cursor: pointer; min-height: 32px; }
.xtl .blk.sc { background: var(--teal-light); color: var(--ink); min-height: 44px; }
.xtl .blk.sb { background: #FDE68A; color: var(--ink); }
.xtl .blk.nr { background: var(--teal); color: var(--surface); }
.xtl .blk.nr.no { background: var(--track); color: var(--muted); }
.xtl .blk[aria-pressed="true"] { outline: 2px solid var(--ink); }
.xcardcv { width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); background: var(--beige-2); }
.xcardcv canvas { width: 100%; height: 100%; display: block; }
.xthumbs { display: flex; flex-direction: column; gap: 8px; max-height: 680px; overflow: auto; }
.xthumbs button { display: grid; grid-template-columns: 22px 56px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 56px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--ink); }
.xthumbs button[aria-pressed="true"] { border: 2px solid var(--teal); }
.xthumbs canvas { width: 56px; height: 70px; border-radius: 6px; background: var(--beige-2); }
.xprog { height: 8px; background: #44403C; border-radius: 99px; overflow: hidden; }
.xprog i { display: block; height: 100%; background: #2DD4BF; }
.xfill { width: 100%; height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; display: inline-block; vertical-align: middle; }
.xfill i { display: block; height: 100%; background: var(--teal); }
.xfill.low i { background: var(--accent); }
.xclips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1279px) { .xgrid.s3, .xgrid.e4, .xgrid.c3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 767px) { .xgrid.s3, .xgrid.e4, .xgrid.c3, .xclips { grid-template-columns: minmax(0, 1fr); } .mseg { margin-left: 0; } .xtbl { font-size: 13px; } .xtl .lane b { width: 48px; } }
.xscenes > *, .xthumbs > * { flex-shrink: 0; }
.xscene { align-items: start; }
.xscene .nar { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xcard h2 { white-space: nowrap; }
html[data-mode="expert"] .xcard .costline, html[data-mode="expert"] .xcard .paidline { font-size: 14px; }
html[data-mode="expert"] .xtbl textarea { min-height: 64px; }

/* ═════ 0929-3 ④ 트렌드 레이더 v2 · 저장함(시안 다섯째 묶음 80~94) ═════ */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rgrid.x { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rcard2 { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rcard2 .rt { font-size: var(--t-l); line-height: 1.35; }
.rcard2 .rs { color: var(--ink-2); }
.rcard2 ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.rthumb { aspect-ratio: 16 / 9; width: 100%; border-radius: 10px; background: #D6D3D1; }
.rdim { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--beige-2); color: var(--ink-2); }
.btn.saved { background: var(--teal-light); border-color: var(--teal); color: var(--teal-press); font-weight: 600; }
.btn.saved .i { fill: currentColor; }
.srow2 { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
html[data-mode="expert"] .rgrid .xcard b { font-size: 14px; }
.xchk { width: 22px; height: 22px; }
html:not([data-mode="expert"]) .xtag { font-size: 17px; min-height: 32px; padding: 0 10px; }
@media (max-width: 1279px) { .rgrid.x { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rgrid, .rgrid.x { grid-template-columns: minmax(0, 1fr); } .srow2 .btn { flex: 1 1 auto; } }
/* 1102 대표 "분야별 인기 한 줄에 4개" — #/rcat 인기 · 급상승만(다른 화면의 .rgrid 는 그대로) · 좁아지면 3 → 2 → 1 */
.rgrid.rc4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1279px) { .rgrid.rc4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .rgrid.rc4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rgrid.rc4 { grid-template-columns: minmax(0, 1fr); } }

/* ═════ 0929 넷째 묶음(전문가 2차 73~79) — 학습함 · 말투 · 실험실 · 비교 · 달력 ═════ */
.kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.kv { display: flex; flex-direction: column; gap: 2px; background: var(--beige-2); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.kv span { color: var(--muted); }
.xcard.offc { border-style: dashed; background: transparent; }
.prop { background: var(--beige-2); border-radius: 10px; padding: 10px 12px; }
.frow { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.frow .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frow .sub { font-size: 13px; }
.onoff2 { min-width: 72px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--beige-2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.onoff2[aria-checked="true"] { background: var(--teal); border-color: var(--teal); color: var(--surface); }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }   /* 1002 달력 격자 — 예전 이름 .cgrid 가 내 콘텐츠 카드 격자와 겹쳐 내 콘텐츠를 7칸으로 만들던 것 */
.cwd { text-align: center; font-size: 13px; color: var(--muted); }
.cday { min-height: 110px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); min-width: 0; }
.cday.empty { border: 0; background: transparent; }
.cday.today { border: 2px solid var(--teal); background: var(--teal-light); }
.cday b { font-size: 13px; }
.cchip { display: block; font-size: 13px; line-height: 1.3; padding: 3px 6px; border-radius: 4px; color: var(--surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 24px; }
.cchip.c1 { background: var(--teal); } .cchip.c2 { background: var(--accent-press); } .cchip.c3 { background: var(--ink); }
.cchip.suggest { background: transparent; color: var(--ink); border: 1px dashed var(--ink-2); }
/* 1028 달력 — 토 파랑 · 일 빨강 · 위 거르기 단추(눌러 켜고 끔) · 예약 · 올린 기록 칸 */
.cwd.sat, .cday.sat > b { color: #1D4ED8; } .cwd.sun, .cday.sun > b { color: #B91C1C; }
.cchip.cflt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cchip.cflt[aria-pressed="false"] { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.cchip.cflt .cfn { font-weight: 400; opacity: .85; }
.cchip.rec { opacity: .92; border-left: 3px solid rgba(255,255,255,.55); }
.cchip.rec.posted { opacity: 1; }
@media (max-width: 767px) { .calgrid { grid-template-columns: repeat(7, minmax(40px, 1fr)); overflow-x: auto; } .cday { min-height: 70px; } }
@media (max-width: 767px) { .xgrid[style] { grid-template-columns: minmax(0, 1fr) !important; } }

/* 0929-6 ⑤-2 전문가 편집기 단어 타이밍 끌기 */
.wtrack { position: relative; height: 58px; background: var(--track); border-radius: 8px; margin: 4px 0; touch-action: none; user-select: none; overflow: hidden; }
.wtrack .wd { position: absolute; top: 7px; height: 44px; background: #FDE68A; color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px; box-sizing: border-box; font-size: 13px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; padding: 0 2px; }
.wtrack .wd.on { background: var(--teal); color: var(--surface); }
.wtrack .wh { position: absolute; top: 7px; width: 16px; height: 44px; margin-left: -8px; cursor: ew-resize; z-index: 2; touch-action: none; }
.wtrack .wh::after { content: ''; position: absolute; left: 7px; top: 3px; bottom: 3px; width: 2px; background: var(--ink); border-radius: 1px; }
.wtrack .wh:focus-visible { outline: 3px solid var(--teal); outline-offset: -1px; border-radius: 4px; }
.wtrack.dragging .wh::after { background: var(--accent); }
.wtrack .ph { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); pointer-events: none; z-index: 3; }
.wtrack .tk { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--muted); pointer-events: none; }
.wtrack .tk.big { height: 10px; }
/* 0929-6 ⑤-4 참고 그림 */
.refgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 236px; overflow: auto; }
.refgrid .refc { position: relative; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--track); height: 96px; min-height: 44px; overflow: hidden; cursor: pointer; }
.refgrid .refc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.refgrid .refc span { position: absolute; left: 4px; top: 4px; background: var(--ink); color: var(--surface); font-size: 13px; border-radius: 4px; padding: 0 5px; }
.refgrid .refc:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; }
/* ───────── 0929-8 여섯째 묶음 — 처음 안내 · 알림 · 휴지통 (간편 크기: 누르는 곳 56px · 글자 17px) ───────── */
.btn.green { background: var(--brand-green); border-color: var(--brand-green); color: var(--surface); }   /* 브랜드 초록 단추(tokens_0929) */
.btn.green:active { background: var(--brand-green-press); border-color: var(--brand-green-press); }
.green-t { color: var(--brand-green-press); }
body.bare .nav, body.bare .hdr { display: none; }
body.bare .view { padding: 0; }
.onb { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.onb-h { min-height: 96px; box-sizing: border-box; padding: 16px 56px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.onb-logo { display: flex; align-items: center; gap: 12px; } .onb-logo .sq { width: 40px; height: 40px; border-radius: 10px; background: var(--teal); display: flex; align-items: center; justify-content: center; }
.onb-logo .sq svg { width: 22px; height: 22px; stroke: var(--surface); } .onb-logo b { font-family: var(--font-heading); font-weight: 700; font-size: 22px; }
.onb-prog { display: flex; align-items: center; gap: 14px; margin-left: auto; } .onb-prog b { font-size: 18px; color: var(--ink-2); }
.onb-prog .bars { display: flex; gap: 6px; width: 180px; } .onb-prog .bars i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); } .onb-prog .bars i.on { background: var(--teal); }
.onb-skip { min-height: 56px; }
.onb-m { flex: 1; display: flex; justify-content: center; padding: 8px 56px 0; }
.onb-s { width: 960px; max-width: 100%; display: flex; flex-direction: column; gap: 28px; }
.onb-hd { display: flex; flex-direction: column; gap: 10px; } .onb-hd h1 { font-family: var(--font-heading); font-weight: 700; font-size: 30px; margin: 0; } .onb-hd p { font-size: 20px; color: var(--ink-2); margin: 0; }
.onb-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.onb-pick { position: relative; display: flex; align-items: center; gap: 20px; min-height: 120px; box-sizing: border-box; padding: 20px 24px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; }
.onb-pick input { position: absolute; inset: 0; margin: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.onb-pick .ic { width: 64px; height: 64px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--teal); } .onb-pick .ic svg { width: 30px; height: 30px; }
.onb-pick .t { display: flex; flex-direction: column; gap: 6px; flex: 1; } .onb-pick .t b { font-size: 20px; } .onb-pick .t span { font-size: 18px; color: var(--muted); }
.onb-pick .ck { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--subtle); box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .onb-pick .ck svg { width: 22px; height: 22px; visibility: hidden; }
.onb-pick:has(input:checked) { border: 2px solid var(--teal); background: var(--teal-light); padding: 19px 23px; }
.onb-pick:has(input:checked) .ck { background: var(--teal); border-color: var(--teal); color: var(--surface); } .onb-pick:has(input:checked) .ck svg { visibility: visible; }
.onb-pick:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; }
.onb-n { font-size: 18px; color: var(--muted); margin: 0; } .onb-n b { color: var(--ink); }
.onb-f { min-height: 132px; box-sizing: border-box; padding: 24px 56px; display: flex; align-items: center; justify-content: center; }
.onb-fi { width: 960px; max-width: 100%; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.onb-next { min-height: 64px; min-width: 240px; font-size: 20px; margin-left: auto; } .onb-next.wide2 { min-width: 280px; }
.onb-prev { min-height: 64px; min-width: 160px; font-size: 19px; font-weight: 500; } .onb-fn { font-size: 17px; color: var(--muted); margin-left: 8px; }
.onb-box { gap: 18px; padding: 28px; } .onb-lab { font-size: 20px; font-weight: 600; }
.onb-limrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .onb-money { width: 320px; max-width: 100%; box-sizing: border-box; }
.onb-sgl { font-size: 18px; color: var(--muted); } .onb-sg { display: flex; gap: 10px; flex-wrap: wrap; } .onb-sg .chip { border-radius: 999px; font-weight: 600; }
.onb-sg .chip[aria-pressed="true"] { border: 3px solid var(--teal); background: var(--teal-light); padding: 0 20px; }
.onb-note { font-size: 17px; color: var(--muted); margin: 0; }
.onb-rg { display: flex; flex-direction: column; gap: 12px; } .onb-opt { min-height: 76px; } .onb-opt .t b { font-size: 20px; } .onb-opt .t span { font-size: 17px; }
.onb-info { font-size: 18px; align-items: center; }
.onb-steps { margin: 0; padding: 0; display: flex; gap: 16px; list-style: none; }
.onb-steps li { flex: 1 1 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.onb-steps .no { width: 48px; height: 48px; border-radius: 24px; background: var(--teal); color: var(--surface); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.onb-steps b { font-size: 20px; } .onb-steps li > span:last-child { font-size: 18px; color: var(--ink-2); line-height: 1.55; }
.onb-ex { flex-direction: row; align-items: center; gap: 24px; padding: 24px 28px; flex-wrap: wrap; } .onb-ex .th { width: 120px; height: 88px; border-radius: 12px; background: var(--line-2); flex-shrink: 0; }
.onb-ex .t { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; } .onb-ex .t > b { font-size: 21px; } .onb-ex .t > span { font-size: 18px; color: var(--muted); } .onb-ex .btn { min-height: 64px; font-size: 19px; font-weight: 500; }
@media (max-width: 767px) {   /* v12 결정 29 — 폰은 같은 화면을 세로로 쌓음 */
  .onb-h { padding: 12px 16px; gap: 12px; } .onb-logo b { font-size: 20px; } .onb-prog { margin-left: 0; order: 3; width: 100%; } .onb-prog .bars { flex: 1; width: auto; } .onb-skip { margin-left: auto; }
  .onb-m { padding: 8px 16px 0; } .onb-hd h1 { font-size: 24px; } .onb-hd p { font-size: 18px; }
  .onb-picks { grid-template-columns: minmax(0, 1fr); } .onb-pick { min-height: 96px; }
  .onb-steps { flex-direction: column; } .onb-ex { flex-direction: column; align-items: stretch; } .onb-ex .th { display: none; }
  .onb-f { padding: 16px; min-height: 0; } .onb-fi { flex-direction: column-reverse; align-items: stretch; } .onb-next, .onb-prev, .onb-next.wide2 { width: 100%; min-width: 0; margin-left: 0; } .onb-fn { margin-left: 0; text-align: center; }
}
.ex-band { align-items: center; flex-wrap: wrap; } .ex-band > span { flex: 1; min-width: 240px; } .ex-tag { display: inline-block; background: var(--teal); color: var(--surface); border-radius: 8px; padding: 2px 10px; margin-right: 6px; }
/* 98 알림 */
.hdr .home-r { margin-left: auto; min-height: 56px; }
.ngrid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 33.8%, 680px); gap: 20px; align-items: start; }
@media (max-width: 1279px) { .ngrid { grid-template-columns: minmax(0, 1fr); } }
.nlist { gap: 0; } .nlist .sec-h { padding-bottom: 8px; } .nlist .sec-h h2 { font-size: 20px; }
.nitem { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--track); flex-wrap: wrap; }
.nitem.hl { background: var(--accent-soft, rgba(37,99,235,.08)); border-radius: 12px; padding-left: 12px; padding-right: 12px; outline: 2px solid var(--accent); outline-offset: -2px; }   /* 1008 246a 알림 주소로 들어온 그 알림 */
.nitem .dot { width: 12px; height: 12px; border-radius: 6px; background: transparent; flex-shrink: 0; } .nitem.unread .dot { background: var(--accent); }
.nitem .t { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 200px; } .nitem .t b { font-size: 19px; } .nitem:not(.unread) .t b { font-weight: 500; } .nitem .t span { font-size: 17px; color: var(--muted); }
.nkeep { font-size: 17px; color: var(--muted); margin: 12px 0 0; }
.nwhere { gap: 8px; } .nwhere h2 { font-size: 20px; margin-bottom: 4px; }
.nrow { display: flex; align-items: center; gap: 14px; min-height: 72px; width: 100%; padding: 10px 4px; border: 0; border-top: 1px solid var(--track); background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.nrow .t { flex: 1; display: flex; flex-direction: column; gap: 2px; } .nrow .t b { font-size: 19px; } .nrow .t span { font-size: 17px; color: var(--muted); }
.nrow[aria-disabled="true"] { cursor: not-allowed; } .nrow[aria-disabled="true"] .t b { color: var(--muted); }
.sw2 { width: 52px; height: 30px; border-radius: 15px; background: var(--subtle); position: relative; flex-shrink: 0; } .sw2 i { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 11px; background: var(--surface); }
.sw2.on { background: var(--teal); } .sw2.on i { left: auto; right: 4px; } .sw2.dis { background: var(--disabled); }
.nwhere .btn.wide { margin-top: 8px; }
ol.guide { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; font-size: 18px; }
/* 99 휴지통 */
.trashw { gap: 16px; max-width: 960px; }
.tlist { gap: 0; } .trow { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--track); flex-wrap: wrap; } .trow:first-child { border-top: 0; }
.trow .th { width: 88px; height: 64px; border-radius: 10px; background: var(--line-2); flex-shrink: 0; }
.trow .t { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 200px; } .trow .t b { font-size: 19px; } .trow .t span { font-size: 17px; color: var(--muted); }
.tfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .tfoot .btn { min-height: 56px; } .tfoot span { font-size: 17px; }
@media (max-width: 767px) { .trow .btn, .nitem .btn { width: 100%; } .trow .th { width: 64px; height: 48px; } }
/* 1101 관리 화면(#/team) 목록 — 공백 없는 긴 글(오류 경로 · 메시지 · 받은 제보 글 · 화면 주소 · 이메일 아이디)은 칸 안에서 줄바꿈 · 폰(375)에서 화면 밖으로 밀지 않게(10/31 밤 전체 검사 320 · 335 ④ 가로 넘침) */
:is([data-errs], [data-fblist], [data-spby], [data-stby]) .trow > span, :is([data-uid-row], [data-req]) > .t { max-width: 100%; overflow-wrap: anywhere; }

/* ───────── 0929-9 일곱째(간편 100~111) · 여덟째(전문가 112~122) 묶음 ───────── */
.ocarea { min-height: 96px; font-size: 20px; }
.choices.ocb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.occh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.occ, .bech, .nsrow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; background: var(--surface); }
.nsrow { min-height: 60px; border: 0; border-top: 1px solid var(--track); border-radius: 0; padding: 8px 4px; }
.nsrow:first-child { border-top: 0; }
.occ input, .bech input, .nsrow input { width: 26px; height: 26px; accent-color: var(--teal); flex-shrink: 0; margin: 0; }
.occ .t, .bech .t, .nsrow .t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .occ .t b, .bech .t b, .nsrow .t b { font-size: 18px; } .occ .t span, .bech .t span, .nsrow .t span { font-size: 17px; color: var(--muted); }
.occ:has(input:checked), .bech:has(input:checked) { border: 2px solid var(--teal); background: var(--teal-light); padding: 7px 15px; }
.bech { min-height: 64px; margin-top: 8px; }
.ocrow { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-top: 1px solid var(--track); font-size: 18px; }
.ocrow span { color: var(--muted); } .ocrow.done span { color: var(--teal-link); font-weight: 600; } .ocrow.now span { color: var(--ink); font-weight: 600; } .ocrow.err span { color: var(--accent-press); font-weight: 600; }
.ocres { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--track); flex-wrap: wrap; } .ocres:first-child { border-top: 0; }
.ocres .th, .cdprev .th { width: 88px; height: 64px; border-radius: 10px; background: var(--line-2); flex-shrink: 0; }
.ocres .t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 180px; } .ocres .t b { font-size: 19px; } .ocres .t span { font-size: 17px; color: var(--muted); }
.ocres.err .t span { color: var(--accent-press); }
.oc-how { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; } .oc-how .t { flex: 1; display: flex; flex-direction: column; min-width: 220px; } .oc-how .t b { font-size: 20px; } .oc-how .t span { font-size: 17px; color: var(--muted); }
.cdgrid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 30.5%, 612px); gap: 20px; align-items: start; margin-top: 8px; }
@media (max-width: 1279px) { .cdgrid { grid-template-columns: minmax(0, 1fr); } }
.cdtabs { flex-wrap: wrap; } .cdtab { display: inline-flex; align-items: center; }
.cdhow { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 18px; }
.cdprev { display: flex; gap: 16px; align-items: flex-start; background: var(--bg); border-radius: 12px; padding: 14px; } .cdprev pre { margin: 0; white-space: pre-wrap; font: 17px/1.55 var(--font-body); color: var(--ink-2); flex: 1; min-width: 0; max-height: 260px; overflow: auto; }
.cdbtns { flex-wrap: wrap; }
.cdst { display: flex; justify-content: space-between; min-height: 44px; align-items: center; border-top: 1px solid var(--track); font-size: 17px; } .cdst b.ok { color: var(--teal-link); }
.loginw { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--bg); }
.loginc { width: 480px; max-width: 100%; gap: 16px; } .loginc .ink2 { font-size: 17px; line-height: 1.6; margin: 0; }
.mapv .mt { font-size: 20px; } .mapv .card { gap: 10px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mbtns .btn { padding: 0 8px; }
.brl { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; } .brl li.unv { color: var(--muted); }
.brl .ref { color: var(--teal-link); font-weight: 600; text-decoration: none; } .warn-t { color: var(--warn-ink); }
.brsrc { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--track); font-size: 17px; } .brsrc .btn { align-self: flex-start; }
.soon { font-size: 15px; font-weight: 500; }
html[data-mode="simple"] .soon { font-size: 17px; }
/* 전문가 112~122 */
.xsearch { min-width: 220px; min-height: 46px !important; }
.xchk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; font-size: 14px; cursor: pointer; } .xchk input { width: 18px; height: 18px; accent-color: var(--teal); }
.xcmp td:first-child { color: var(--muted); width: 90px; } .xcmp .rthumb { max-width: 180px; }
.xgraph { min-height: 160px; border: 1px dashed var(--line-2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
@media (max-width: 767px) { .occh, .choices.ocb { grid-template-columns: minmax(0, 1fr); } .mbtns { grid-template-columns: minmax(0, 1fr); } }

/* 0929-11 팀 계정 관리 · 임시 비밀번호 창 */
.tlist { display: flex; flex-direction: column; gap: 8px; }
.trow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.trow:first-child { border-top: 0; }
.trow .t { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.trow .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tmpw { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tmpw code { font: 600 22px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 1px; padding: 8px 12px; border-radius: 10px; background: var(--teal-light); color: var(--ink); user-select: all; }

/* 1001-I 시안 없던 3곳 — 00_디자인_결정_1001 값 그대로 */
/* 공통 상태 칩(13px 굵게 · 높이 28px · 좌우 10px · ● 8px) — 누르는 곳이 아니라 44px 규칙에서 뺌 */
.stchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font: 700 13px/1 var(--font-body); white-space: nowrap; flex: none; }
.stchip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stchip.ok { color: var(--ok); background: var(--ok-light); } .stchip.warn { color: var(--warn-ink); background: var(--warn-bg); }
.stchip.stop { color: var(--accent-press); background: var(--accent-light); } .stchip.run { color: var(--teal-link); background: var(--teal-light); }
.req { color: var(--accent); font-weight: 600; }
/* 1. #/team 관리자 카드 */
.admcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; gap: 8px; }
.admcard > .mt { font-size: 14px; font-weight: 600; color: var(--ink); }
.admstat { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; } .admstat .bar { width: 100%; } .admstat .stchip { align-self: flex-start; }
.admbig { font: 800 28px/1.15 var(--font-heading); color: var(--ink); }
.admsub, .admcard .tlist .ink2 { font-size: 13px; color: var(--muted); }
.bar.admbar { height: 8px; border-radius: 4px; background: #EEE9DF; } .bar.admbar > i { background: var(--teal); } .bar.admbar.warm > i { background: var(--accent); } .bar.admbar.full > i { background: var(--accent-press); }
.admlnk { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal-link); font-size: 14px; }
[data-newu] .inp, [data-newu] .btn { min-height: 44px; font-size: 14px; }
html[data-mode="simple"] .admcard > .mt, html[data-mode="simple"] .admsub, html[data-mode="simple"] .admcard .tlist .ink2, html[data-mode="simple"] .admlnk { font-size: 17px; }   /* 간편 모드 최소 17px · 56px(0929 규칙) 유지 — 디자인 값은 전문가 모드 */
html[data-mode="simple"] .stchip { font-size: 17px; height: auto; min-height: 28px; padding: 2px 10px; }
html[data-mode="simple"] .admlnk { min-height: 56px; } html[data-mode="simple"] [data-newu] .inp, html[data-mode="simple"] [data-newu] .btn { min-height: 56px; font-size: 17px; }
/* 2. 122 운영자 언론사 양식 */
[data-anall] .xchk { width: auto; height: auto; }
.antbl th { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.antbl .c-ct { width: 64px; font-size: 13px; } .antbl .c-cm { width: 112px; } .antbl .c-df { min-width: 96px; white-space: nowrap; font-size: 13px; }
.antbl .c-tm { min-width: 280px; font-size: 13px; line-height: 1.5; } .antbl .c-nm b { font-size: 14px; } .antbl .c-nm .sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.antbl td.acts { white-space: nowrap; } .antbl td.acts .btn { min-height: 44px; background: var(--surface); } .antbl .btn.danger-t { color: var(--accent); }
.antbl .antog { display: none; }
.antbl .sr, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {   /* 폰: 표 대신 카드 목록 — 이름 · 나라 · 칩 · 조건(접기/펼치기) · 단추 3개 한 줄 */
  .xtbl.cardy thead { display: none; }
  .xtbl.cardy, .xtbl.cardy tbody { display: block; width: 100%; }
  .xtbl.cardy tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface); }
  .xtbl.cardy td { display: block; width: auto; min-width: 0; border: 0; padding: 0; overflow-wrap: anywhere; }
  .antbl .c-nm { order: -2; } .antbl .c-ct, .antbl .c-cm, .antbl .c-df { order: -1; }
  .antbl td.c-nm, .antbl td.c-tm, .antbl td.acts { flex: 1 1 100%; } .antbl td.c-ct { font-weight: 600; }
  .antbl td.c-df { color: var(--muted); } .antbl td.c-df::before { content: '회원 기본 '; }
  .antbl td.c-tm { min-width: 0; } .antbl .antog { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--teal-link); }
  .antbl tr:not(.open) .anterms { display: none; }
  .xtbl.cardy td.acts { display: flex; flex-wrap: nowrap; gap: 8px; padding-top: 4px; } .xtbl.cardy td.acts .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 14px; }
}
/* 3. 롱폼 진행 막대 */
.lmprog { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.lmprog-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .lmprog-h b { font: 800 22px/1.2 var(--font-heading); color: var(--ink); } .lmprog-h .ink2 { font-size: 13px; color: var(--muted); }
.lmprog .bar { height: 8px; border-radius: 4px; background: #EEE9DF; } .lmprog .bar > i { background: var(--teal); }
.lmprog-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.lmprog-steps li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 13px; background: #F4F1EA; color: var(--muted); border: 1px solid transparent; }
.lmprog-steps .nm { white-space: nowrap; font-weight: 600; } .lmprog-steps .ct { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lmprog-steps li.done { background: var(--surface); border-color: var(--line); color: var(--ink); } .lmprog-steps li.done .ok { color: var(--teal); font-weight: 600; }
.lmprog-steps li.now { background: var(--teal-light); border: 2px solid var(--teal); color: var(--teal-link); font-weight: 600; }
.lmprog-steps li.stop { background: var(--surface); border: 1px solid var(--accent-line); color: var(--ink); flex-wrap: wrap; padding: 6px 12px; }
.lmprog-steps .lmretry { min-height: 44px; font-size: 13px; padding: 0 12px; }
html[data-mode="simple"] .lmprog-steps li, html[data-mode="simple"] .lmprog-h .ink2 { font-size: 17px; }   /* 간편 모드 최소 17px(0929 규칙) 유지 */
@media (max-width: 767px) { .lmprog-steps { grid-template-columns: minmax(0, 1fr); } }   /* 폰: 세로 목록(한 줄 44px · 칸 전체 폭) */
/* 1002 롱폼 화질 — 1080p 는 흐리게(지금은 720p만) */
.chip[aria-disabled="true"], .chip[disabled] { background: var(--disabled); border-color: var(--disabled); color: var(--disabled-ink); cursor: not-allowed; }
/* 1002 폰(390) — 화면 코드에 직접 적은 두 칸 격자(style="grid-template-columns: … 320px")가 폰에서도 두 칸으로 남아 왼쪽 칸이 몇 글자 폭으로 찌그러지던 것(세로 영상 ① 등) → 한 칸 */
@media (max-width: 767px) {
  .cols[style*="grid-template-columns"], .xgrid[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* 1002 내 콘텐츠 — 비었을 때 안내 문장이 격자 첫 칸(카드 폭)에 갇혀 폰에서 한두 글자씩 줄바꿈되던 것 → 줄 전체 */
.cgrid > p, .cgrid > .notebox { grid-column: 1 / -1; }
/* 1002 "전체 끄기" 같은 체크 칸 이름표(label.xchk)가 체크 상자용 .xchk { width: 22px } 을 같이 받아 글자가 세로로 한 글자씩 쪼개지던 것 — 레이더 소스 · 언론사 고르기 · 122 운영자 표 */
label.xchk { width: auto; height: auto; }
/* 1002 폰 + 전문가 모드 — 아래 5칸 메뉴에 전문가 메뉴(.x-only · 대본 작업실 등)가 같이 끼어 좁은 칸에 글자가 세로로 쌓이고 화면 가운데를 가리던 것 → 폰에서는 5칸만 */
@media (max-width: 767px) {
  html[data-mode="expert"] .nav.nav > :not(.mob):not(.mob) { display: none !important; }   /* .nav .grp.x-only(0,4,1) 보다 세게 */
}
/* 1002 쇼핑 영상 이어서 — 상품 사진 다시 넣기 칸 */
.photofix { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.photofix > span { display: flex; flex-direction: column; gap: 2px; }
.photofix input[type=file] { min-height: 56px; font-size: 17px; }
/* 1002 폰 — 단계 카드(.stepcard)의 상태 글자를 이름 아래로(l2s1 · 세로 영상 ② 등에서 이름이 두 줄로 쪼개지던 것) */
@media (max-width: 767px) { .stepcard .r { flex-wrap: wrap; row-gap: 2px; } .stepcard .r > span:nth-child(2) { flex: 1 1 0; min-width: 0; } .stepcard .st { flex-basis: 100%; margin-left: 50px; } }
/* 1002 쇼핑 — 사진 올리는 칸 안내 · 영상에 쓸 사진(순서 · 빼기 · N장 사용) */
.phint { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--teal-light); color: var(--teal-link); font-size: 15px; font-weight: 600; }
.pplan-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; } .pplan-h b { font-size: 17px; } .pplan-sum { font-weight: 600; color: var(--teal-link); }
.pplan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pplan li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pplan li.off, .pplan li.spare { background: #F4F1EA; } .pplan li.off img, .pplan li.spare img { opacity: .55; }
.pplan img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.pplan .t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .pplan .t .stchip { align-self: flex-start; }
.pplan .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .pplan .acts .btn { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 15px; }
/* 1002 롱폼 글 쓰는 방식(빠르게 · 꼼꼼하게) */
.lmmode{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.lmmode .lbl2{margin:0 4px 0 0}
.lmmode .chip[aria-pressed="true"]{background:var(--ink,#1f1d1a);color:#fff;border-color:var(--ink,#1f1d1a)}
.lmmode [data-lmmdiff]{flex-basis:100%}
/* 1002 완성 화면: 영상이 있으면 길이 칩을 오른쪽 위로(영상 왼쪽 위 "광고" 표시를 가리지 않게) */
.phone.hasvid .badge-len { left: auto; right: 24px; }

/* 1002 롱폼 → 쇼츠 올리기 진행 · 멈춘 단계 · 올린 영상 카드 [취소]/[지우기] · 다른 화면 진행 칩 */
.stepcard.stop .st { color: var(--accent-press); font-weight: 600; }
.stepcard.stop .dot { background: var(--accent-light); border-color: var(--accent-line); }
.upcard .bar.big { height: 10px; }
.upcard .upnums { gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.upcard.ok b { color: var(--teal-link); }
.dropz.busy { opacity: .6; cursor: not-allowed; }
.srclist .srcrow { display: flex; gap: 8px; align-items: stretch; }
.srclist .srcrow .choice { flex: 1; min-width: 0; }
.srclist .srcrow .keepl { display: block; font-size: 15px; }   /* 1009 D 원본 보관 줄 */
.srclist .srcrow .acts { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.upchip { position: fixed; right: 16px; bottom: 16px; z-index: 50; background: var(--ink); color: var(--surface); padding: 8px 14px; border-radius: 999px; font-size: 13px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.18); max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .srclist .srcrow { flex-direction: column; } .srclist .srcrow .acts { flex-direction: row; } }

/* 1002 처음 안내 ② 팀원 보기 전용 */
.onb-viewlim { font-size: 20px; margin: 4px 0 8px; }

/* 1004 195b 쇼츠 편집기 */
.sed { display: flex; flex-direction: column; gap: 12px; }
.sedhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sedttl { font-size: 18px; }
.sedmain { display: grid; grid-template-columns: clamp(320px, 27.1%, 544px) minmax(0, 1fr) clamp(200px, 16.9%, 340px); gap: 12px; align-items: start; }
.sedlist, .sedside { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.sedlist ol { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sedrow { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; }
.sedrow.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sedrow .grip { cursor: grab; color: var(--muted); }
.sedtm { display: flex; flex-direction: column; line-height: 1.3; } .sedtm [data-t] { white-space: nowrap; font-variant-numeric: tabular-nums; } .sedtm [data-l] { font-size: 12px; }
.sedrow .btn.sm { min-height: 28px; padding: 0 8px; }
.sedview { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sedplay { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; background: #000; border-radius: 12px; overflow: hidden; }
.sedplay video { width: 100%; height: 100%; object-fit: contain; }
.sedq { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 6px; }
.sedctl { width: min(100%, 300px); }
.seg2 { display: flex; gap: 4px; }
.seg2 [aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.sedtl { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.tlrow { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.tllab { font-size: 12px; color: var(--muted); }
.tltrack { position: relative; height: 44px; background: var(--bg, #f6f3ee); border-radius: 8px; }
.tlclip { position: absolute; top: 4px; bottom: 4px; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border: 1px solid var(--accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; overflow: hidden; }
.tlclip.on { background: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.tlclip .h { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.tlclip .h.l { left: 0; } .tlclip .h.r { right: 0; }
.tlwave { width: 100%; height: 48px; color: var(--muted); }
.tlsrc { position: relative; height: 40px; background: var(--bg, #f6f3ee); border-radius: 8px; overflow: hidden; }
.tlthumbs { position: absolute; inset: 0; display: flex; opacity: .75; }
.tlthumbs span { display: block; height: 100%; background-repeat: no-repeat; }
.tlmark { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 35%, transparent); border-left: 2px solid var(--accent); font-size: 10px; color: var(--ink); padding-left: 2px; }
.tlmark.on { background: color-mix(in srgb, var(--accent) 60%, transparent); }
@media (max-width: 900px) { .sedmain { grid-template-columns: 1fr; } .sedside { display: none; } }
/* 1004 195c 쇼츠 편집기 배치(시안 기준) — 왼쪽 설정 · 가운데 9:16 · 오른쪽 탭 · 아래 타임라인 5줄 */
.sed2 .sedmain { grid-template-columns: clamp(220px, 18.6%, 374px) minmax(0, 1fr) clamp(360px, 30.5%, 612px); }
.sedplat .inp.sm { min-height: 32px; padding: 0 8px; font-size: 13px; }
.sedleft, .sedright { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sedleft details { border-bottom: 1px solid var(--track); padding-bottom: 6px; } .sedleft details:last-child { border-bottom: 0; }
.sedleft summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.sedtabs { display: flex; gap: 4px; flex-wrap: wrap; } .sedtabs [aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sedpane { display: flex; flex-direction: column; gap: 6px; }
.sedol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.wchips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 260px; overflow: auto; }
.wchip { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 2px 6px; font-size: 13px; min-height: 26px; cursor: pointer; color: var(--ink); }
.wchip:hover { border-color: var(--accent); }
.wchip.cut { text-decoration: line-through; color: var(--muted); background: var(--track); border-style: dashed; }
.srcsents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.srcsents li { display: flex; gap: 6px; align-items: center; font-size: 13px; } .srcsents .btn.sm { min-height: 26px; padding: 0 8px; }
.tlclip { overflow: hidden; } .tlclip b { position: relative; z-index: 1; text-shadow: 0 0 3px var(--surface); }
.tlth { position: absolute; inset: 0; display: flex; opacity: .55; pointer-events: none; } .tlth span { display: block; height: 100%; background-repeat: no-repeat; }
.cutmk { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger, #B42318); opacity: .8; pointer-events: none; z-index: 1; }
.tlsub { position: relative; height: 28px; background: var(--bg, #f6f3ee); border-radius: 8px; overflow: hidden; }
.tlsb { position: absolute; top: 3px; bottom: 3px; background: color-mix(in srgb, var(--teal, #0E7C7B) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--teal, #0E7C7B) 50%, transparent); border-radius: 4px; font-size: 11px; line-height: 20px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlempty { font-size: 12px; color: var(--muted); padding: 6px 8px; background: var(--bg, #f6f3ee); border-radius: 8px; border: 1px dashed var(--line); }
@media (max-width: 1100px) { .sed2 .sedmain { grid-template-columns: 1fr; } }
/* 1004 195c 대본 단어 선택창(글자만 고치기 / 말까지 빼기) · 고친 글자 */
.sedpane[data-pane="clips"] { position: relative; }
.wpop { position: absolute; z-index: 5; width: 280px; background: var(--surface); border: 1px solid var(--ink); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.wpop p { flex-basis: 100%; margin: 0; } .wpop .wfix { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; } .wpop .wfix .inp { flex: 1; min-width: 0; }
.wchip.sel { outline: 2px solid var(--accent); }
.wchip.fix { border-color: var(--teal, #0E7C7B); background: color-mix(in srgb, var(--teal, #0E7C7B) 12%, var(--surface)); }
/* 1004 195c [말까지 빼기] = 주의 색(영상도 잘림) · 조각 목록 높이 제한 · 접기 */
.wpop .btn.warn { border: 2px solid #C2410C; color: #9A3412; background: #FFF7ED; }
.wpop .btn.warn:hover { background: #FFEDD5; }
.sedlh { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sedright .sedol { max-height: 196px; overflow: auto; position: relative; }
.sedright .sedol.folded { max-height: none; overflow: visible; } .sedright .sedol.folded .sedrow:not(.on) { display: none; }

/* 1005 195d 내보내기 진행 — 기존 🔔 옆 작은 글 · 홈이 아닌 화면은 진행 중일 때만 🔔 */
.hdr .xqwrap { margin-left: auto; display: flex; align-items: center; gap: 4px; } .hdr .xqwrap[hidden] { display: none; }
.hdr .xq-n { text-decoration: none; }
html:not([data-mode="expert"]) .hdr .xq-n { font-size: 17px; line-height: 24px; padding: 2px 10px; }   /* 간편 모드 최소 17px(0929 규칙) */
/* 1007 213 받는 기기 목록 */
.ndev { margin: 10px 0; font-size: 17px; } .ndev p { font-size: 17px; } .ndev ul { list-style: none; margin: 6px 0; padding: 0; } .ndev li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line, #e6e0d6); font-size: 17px; }
.ndevme { font-style: normal; font-size: 17px; background: var(--teal, #1f7a6c); color: #fff; padding: 1px 6px; border-radius: 6px; margin-left: 4px; }

/* 1008 257 새 판 알림 띠 */
.newver { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: min(720px, calc(100% - 32px)); padding: 12px 16px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--accent-line, #c7d2fe); box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.newver .t { flex: 1; min-width: 200px; }
/* 1009 묶음 D(/long 이식 4) 받아쓰기 세부 — 대본 */
.trtext { max-height: 60vh; overflow: auto; display: grid; gap: 6px; } .trtext .trl { margin: 0; line-height: 1.6; }
.trtext .tstamp { background: none; border: 0; padding: 0 4px 0 0; font: inherit; font-weight: 600; cursor: pointer; min-height: 32px; } .trtext u[data-fixed] { text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
[data-exopts] input[type=range] { width: 100%; }
/* 1009 QA — 폰 폭(600px 안쪽)에서 긴 단추 글자가 화면 밖으로 나가던 것(승인 대기 "구간 다시 고르기 (기존 화면 · 전문가)" 등) → 줄바꿈 */
@media (max-width: 600px) { .btn:not(.nowrap) { white-space: normal; max-width: 100%; padding-top: 6px; padding-bottom: 6px; } }
.vcard .vbox .vmiss .lnk { color: #FDE68A; }   /* 1009 QA Q17 */
/* 1009 I 한 번에 만들기 세부 설정 */
.ocopt > summary { cursor: pointer; font-size: 19px; padding: 2px 0; }
.ocopt .advgrid .pills { margin-top: 4px; }
@media (max-width: 767px) { .ocopt .advgrid { grid-template-columns: minmax(0, 1fr); } }
/* 1009 J 브랜드 키트 화면 배치 틀 미리보기 */
.klprev { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.klf { position: relative; background: var(--ink); color: #FAFAF9; border-radius: 10px; overflow: hidden; flex: none; }
.klf.v { width: 120px; aspect-ratio: 9 / 16; } .klf.h { width: 200px; aspect-ratio: 16 / 9; }
.klf .ln { position: absolute; left: 6px; bottom: 4px; font-size: 11px; opacity: .6; }
.klf .kt { position: absolute; left: 8%; right: 8%; text-align: center; font-size: 13px; line-height: 1.2; }
.klf .kt.top { top: 9%; } .klf .kt.center { top: 42%; }
.klf .ks { position: absolute; left: 10%; right: 10%; text-align: center; font-size: 10px; background: rgba(0,0,0,.6); border-radius: 4px; padding: 2px 4px; }
.klf .ks.bottom { bottom: 14%; } .klf .ks.middle { top: 55%; } .klf .ks.top { top: 22%; }
.klf .kl { position: absolute; aspect-ratio: 1; border-radius: 4px; opacity: .9; }
.klf .kl.tl { top: 4%; left: 4%; } .klf .kl.tr { top: 4%; right: 4%; } .klf .kl.bl { bottom: 4%; left: 4%; } .klf .kl.br { bottom: 4%; right: 4%; }
.klf .kc { position: absolute; right: 6px; bottom: 4px; font-size: 10px; font-style: normal; opacity: .8; }
/* 1009 K1 통합 편집기 첫 화면 목록 */
.row-link { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; }
.row-link:hover, .row-link:focus-visible { border-color: var(--teal, #0F766E); }
[data-ednlist] .xrow { flex-wrap: wrap; gap: 8px; align-items: center; }

/* 1011 N3 쇼츠 편집기 미리보기 덮개 · 꾸미기 */
.sedfx-ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sedfx-sub, .sedfx-hook { position: absolute; transform: translate(-50%, -50%); text-align: center; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sedfx-hook { color: #FFE500; -webkit-text-stroke: 1px #000; max-width: 96%; }
.sedfx-ly { position: absolute; pointer-events: auto; cursor: move; touch-action: none; }
.sedfx-ly img { width: 100%; display: block; user-select: none; }
.sedfx-ly span { display: block; background: rgba(255,255,255,.3); color: #fff; font-size: 11px; text-align: center; padding: 8px 0; }
.sedfx-ly.on { outline: 2px dashed #facc15; }
.sedfx-pg { position: absolute; left: 0; width: 35%; }
.sedfx-sl { display: grid; grid-template-columns: 52px 1fr 44px; gap: 6px; align-items: center; }
.sedfx-lyrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; }
.sedfx-lyrow.on { background: var(--surface-2, #f5f5f4); }
.tlfx { display: flex; gap: 4px; align-items: center; min-height: 24px; }
.tlfxi { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--surface-2, #f5f5f4); border: 1px solid var(--line, #e7e5e4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═════════ 1012 묶음 N14 — 전 화면 검수에서 고친 것 ═════════ */
[hidden] { display: none !important; }   /* hidden 을 붙인 카드가 .card/.xcard 의 display 때문에 빈 흰 칸으로 보이던 것(롱폼 작업실 · 댓글 답글 초안) */
.hdr .htsub { font-size: 14px; font-weight: 500; }
html[data-mode="simple"] .hdr .htsub, html[data-mode="simple"] .phint, html[data-mode="simple"] .lcard .s, html[data-mode="simple"] .xtbl th, html[data-mode="simple"] .srclist .srcrow .keepl { font-size: 17px; }   /* 간편 모드 최소 17px(0929 규칙) */
.xrow > h2.grow, .xrow > h3.grow { min-width: 8em; }   /* 폰에서 제목이 0 폭으로 줄어 단추 밑에 깔리던 것(학습함 [내 말투]) — 모자라면 단추가 다음 줄로 */
.antbl .c-nm { min-width: 220px; }   /* 운영자 언론사 목록 — 주소가 한 글자씩 꺾이던 것 */
[data-anform] .xrow > label { display: flex; flex-direction: column; gap: 4px; }   /* 나라 · 이름 칸 이름표를 같은 줄 맞춤 */
@media (max-width: 767px) {
  .hdr { flex-wrap: wrap; }
  .hdr .note-r:has(.xh) { display: block; flex: 1 1 100%; min-width: 0; max-width: 100%; margin-left: 0; }   /* 폰 전문가 화면 — 머리줄 오른쪽 단추가 통째로 숨던 것 */
  .hdr .note-r .xh { display: flex; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .hdr .note-r .xh .btn { flex: 0 0 auto; }
  .antbl .c-nm { min-width: 0; }
}

/* ═════════ 1012 묶음 N15 — 레이더 실제 썸네일 · 원본 보기 · 구글 검색 추이 · 이슈 찾기 ═════════ */
a.rthumb { display: block; position: relative; overflow: hidden; }
a.rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.rthumb:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.gtlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gtlist li { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.gtlist li:last-child { border-bottom: 0; }
.gtlist .lnk.sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtkw { flex-wrap: nowrap; } .gtkw .inp { flex: 1 1 auto; min-width: 0; } .gtkw .btn { flex: 0 0 auto; }
form[data-isf] { flex-wrap: nowrap; } form[data-isf] .xsearch { flex: 1 1 220px; width: auto; min-width: 160px; } form[data-isf] .btn { flex: 0 0 auto; }   /* 이슈 [찾기] 단추가 입력칸 아래로 떨어지던 것 */

/* ═════════ 1012 묶음 N17 — 재검수 전 정리 ═════════ */
#view > .notebox:only-child { width: 100%; max-width: 880px; margin: 22px auto 0; box-sizing: border-box; }   /* 화면마다 따로 쓰던 "없는 …" · 오류 상자 폭을 [없는 콘텐츠] 화면(.narrow 880px)과 같게 */
@media (max-width: 767px) { #view > .notebox:only-child { margin-top: 0; } }
html[data-mode="simple"] .xtbl td { font-size: 17px; }   /* 간편 모드 표 칸도 17px(알림 설정 · 재검수) */
@media (max-width: 767px) { form[data-isf] { flex: 1 1 100%; min-width: 0; } form[data-isf] .xsearch { min-width: 0; flex: 1 1 auto; } }   /* 폰 이슈 [찾기] 가로 넘침(재검수) */
[data-nset] .xtbl th { white-space: nowrap; }   /* 알림 설정 표 머리 "이메일" · "웹 푸시"가 글자마다 꺾이던 것(폰 · 재검수) */
@media (max-width: 767px) { [data-lrfiles] { flex-wrap: wrap; } [data-lrfiles] > span { flex: 1 1 100%; } }   /* 참고 콘텐츠 넣기 안내 글이 단추 옆에 끼어 잘리던 것(폰 · 재검수) */
@media (max-width: 767px) { [data-lrfiles] > span { display: block; margin-top: 4px; } }

/* ═════════ 1012 묶음 N18 — 가입 동의 · 약관 링크 ═════════ */
.consent { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; margin: 4px 0; display: grid; gap: 2px; }
.consent .chk { min-height: 44px; align-items: center; }
.consent .chk.all { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 4px; }
.consent .csum { font-size: 15px; padding: 4px 0 6px 46px; line-height: 1.6; }
html[data-mode="simple"] .consent .csum { font-size: 17px; }
.legal-links { text-align: center; margin-top: 4px; }
/* 1101 대표 00:09 AI 기본법 사전 고지 한 줄(로그인 · 설정) — 작게 · 링크는 44px */
.ainote { font-size: 15px; line-height: 1.6; margin: 0; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.loginc .ainote { font-size: 15px; }
.ainote .lnk { display: inline-flex; min-height: 44px; font-size: 15px; vertical-align: middle; }
html[data-mode="simple"] .ainote, html[data-mode="simple"] .ainote .lnk { font-size: 17px; }

/* 1012 N20 승인 대기 — 원고(글) 카드에 글 미리보기 · 누르면 원고 전체 */
.rpick .box .dtxt { position: absolute; inset: 0; padding: 16px 16px 56px; color: #fff; font-size: 17px; line-height: 1.55; white-space: pre-wrap; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.rpick .box.readable { cursor: zoom-in; }
.dlg .draftv { max-height: 55vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.dlg .draftv .pre { white-space: pre-wrap; margin: 0 0 10px; font-size: 17px; line-height: 1.6; }
/* 1012 N21 한 번에 만들기 그림 · 블로그 글/그림 미리보기 */
.cdprev.cdblog { display: block; max-height: 72vh; overflow: auto; padding: 16px; }
.bdoc h1 { font-size: 20px; margin: 0 0 12px; } .bdoc h2 { font-size: 19px; margin: 20px 0 8px; } .bdoc p { margin: 0 0 10px; line-height: 1.7; }
.bdoc .fig { margin: 10px 0 14px; } .bdoc .fig img { width: 100%; max-width: 560px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
.bdoc .fig figcaption { font-size: 15px; color: var(--muted); margin-top: 4px; }
html[data-mode="simple"] .bdoc .fig figcaption { font-size: 17px; }
/* 1012 N22 그리는 그림 바로 보기 */
.thumbs .tgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: 10px; }
.thumbs .tgrid.sq { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.thumbs .tb { position: relative; display: block; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--beige-2); aspect-ratio: 9 / 16; cursor: zoom-in; }
.thumbs .tgrid.sq .tb { aspect-ratio: 1 / 1; }
.thumbs .tb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs .tb.wait { cursor: default; display: flex; align-items: center; justify-content: center; }
.thumbs .tb.now { outline: 3px solid var(--teal); animation: tbpulse 1.4s ease-in-out infinite; }
@keyframes tbpulse { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .thumbs .tb.now { animation: none; } }
.thumbs .tb .no { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; border-radius: 6px; padding: 0 6px; }
.thumbs .tb .st { font-size: 15px; color: var(--ink); font-weight: 600; }
.thumbs .tb .re { position: absolute; left: 6px; bottom: 6px; background: var(--teal); color: #fff; font-size: 13px; border-radius: 6px; padding: 0 6px; }
.dlg .thumbbig { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto 10px; border-radius: 10px; }
html[data-mode="simple"] .thumbs .tb .no, html[data-mode="simple"] .thumbs .tb .re, html[data-mode="simple"] .thumbs .tb .st { font-size: 17px; }

/* ── 1012 묶음 N25 ── */
/* ① 쇼츠 추천 카드 썸네일(원본 장면 3컷) · 번호 · ③ 위 띠 설명 */
.rcard .box.hasth { aspect-ratio: auto; overflow: hidden; background: #111 !important; }
.rcard .box .frs { display: flex; flex-direction: column; gap: 2px; }
.rcard .box .fr { display: block; width: 100%; background-repeat: no-repeat; background-color: #222; }
.rcard .box .rno { position: absolute; right: 8px; top: 8px; min-width: 28px; height: 28px; border-radius: 14px; background: rgba(0,0,0,.65); color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.rcard .box .tagw { z-index: 1; }
.tlhead { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 15px; color: var(--ink-2); }
.tlhead .lg { display: inline-flex; align-items: center; gap: 6px; } .tlhead .lg i { width: 18px; height: 12px; border-radius: 3px; background: var(--subtle); display: inline-block; } .tlhead .lg i.on { background: var(--teal); }
.tline i b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
.tline i:not(.on) b { color: var(--ink); text-shadow: none; }
.tline u { position: absolute; bottom: 1px; transform: translateX(-50%); font-size: 11px; color: var(--muted); text-decoration: none; pointer-events: none; border-left: 1px solid var(--line); padding-left: 3px; line-height: 1; }
/* ⑥ 국기 */
.flag { display: inline-block; vertical-align: -3px; margin-right: 6px; border-radius: 2px; flex: none; }
.flag.em { font-size: 1.1em; vertical-align: 0; }
/* ⑦ 뉴스 카드 — 제목 크게 · 요약 한 줄(굵지 않게) */
.ncard .nmeta { font-size: 13px; color: var(--muted); font-weight: 400; }
.ncard .nt { font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard .nx { font-size: 15px; font-weight: 400; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-mode="expert"] .rgrid .xcard.ncard b.nt { font-size: 17px; }
html[data-mode="expert"] .ncard .nx { font-size: 13px; }
/* ⑧ 승인 대기 한 줄 5개(창 폭에 맞춰 4 · 3 · 2) */
.rgrid.r5 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }   /* 1013 한 줄 6개(대표 지시) — 이름은 r5 그대로 */
@media (max-width: 1439px) { .rgrid.r5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rgrid.r5 .rpick b { font-size: 15px; line-height: 1.35; } .rgrid.r5 .rpick .s { font-size: 14px; }
.rgrid.r5 .rpick .box .dtxt { font-size: 13px; padding: 10px 10px 44px; line-height: 1.5; }
.rgrid.r5 .rpick input[type="checkbox"] { right: 8px; bottom: 8px; }   /* 크기는 32px 그대로(0928-8 고르는 곳 32px) */
.rgrid.r5 .rpick .dur { font-size: 14px; left: 8px; bottom: 8px; }
@media (max-width: 1279px) { .rgrid.r5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .rgrid.r5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rgrid.r5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tline i { font-style: normal; }
/* ① 카드가 세로로 너무 길던 것 — 단추를 작게 · 구간 ±5초는 2칸 격자 */
.rcard .racts { gap: 4px; } .rcard .racts .btn { min-height: 40px; padding: 0 10px; font-size: 15px; }
.rcard .racts[data-adjrow] { display: grid; grid-template-columns: 1fr 1fr; } .rcard .racts[data-adjrow] .btn { justify-content: center; padding: 0 4px; }
.rcard .pk { min-height: 44px; } .rcard .pk input { width: 28px; height: 28px; }
.rgrid6 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 767px) { .rgrid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 간편 모드 최소 17px(N14 기준) — 뉴스 카드 · 승인 대기 5개 */
html[data-mode="simple"] .ncard .nmeta, html[data-mode="simple"] .ncard .nx { font-size: 17px; }
html[data-mode="simple"] .ncard .nt { font-size: 20px; }
html[data-mode="simple"] .rgrid.r5 .rpick b, html[data-mode="simple"] .rgrid.r5 .rpick .s { font-size: 17px; }
/* ⑨ 롱폼 만들기 + 작업 중 콘텐츠(오른쪽) */
.lmwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(clamp(320px, 27.1%, 544px), clamp(420px, 35.5%, 714px)); gap: 24px; align-items: start; }
.lmwrap > form.narrow { margin: 0 auto; width: 100%; }
.lmwork { position: sticky; top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 120px); overflow: auto; }
.lmwork h2 { font-size: 19px; margin: 0; }
.lmlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lmrow { display: grid; grid-template-columns: 30px 28px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; }
.lmrow.pin { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--surface)); }
.lmrow .pk { display: grid; place-items: center; min-height: 40px; } .lmrow .pk input { width: 22px; height: 22px; margin: 0; accent-color: var(--teal); }
.lmrow a { color: var(--ink); text-decoration: none; min-height: 40px; display: flex; align-items: center; }
.lmrow a.no { font-weight: 700; color: var(--muted); justify-content: center; }
.lmrow a.t { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; line-height: 40px; }
.lmrow a.st { font-size: 13px; color: var(--ink-2); white-space: nowrap; } .lmrow a.st.ok { color: var(--teal); font-weight: 600; } .lmrow a.st.run { color: #B45309; } .lmrow a.st.warn { color: #B91C1C; } .lmrow a.st.muted { color: var(--muted); }
.lmrow a:hover .t, .lmrow a.t:hover { text-decoration: underline; }
.lmrow .btn.sm { min-height: 40px; padding: 0 10px; font-size: 14px; }
@media (max-width: 1100px) { .lmwrap { grid-template-columns: minmax(0, 1fr); } .lmwork { position: static; max-height: none; } }
@media (max-width: 480px) { .lmrow { grid-template-columns: 30px 24px minmax(0, 1fr) auto; } .lmrow a.st { grid-column: 3 / 4; grid-row: 2; } }
html[data-mode="simple"] .lmwork, html[data-mode="simple"] .lmwork .min, html[data-mode="simple"] .lmrow a.st, html[data-mode="simple"] .lmrow .btn.sm { font-size: 17px; }
html[data-mode="simple"] .lmwork h2 { font-size: 20px; } html[data-mode="simple"] .lmrow a, html[data-mode="simple"] .lmrow .btn.sm, html[data-mode="simple"] .lmrow .pk { min-height: 56px; } html[data-mode="simple"] .lmrow a.t { line-height: 56px; }   /* 간편 모드 누르는 곳 56px(0929-1) */
html[data-mode="simple"] .lmrow { grid-template-columns: 34px 28px minmax(0, 1fr) auto; } html[data-mode="simple"] .lmrow a.st { grid-column: 3 / 4; grid-row: 2; min-height: 0; }
html[data-mode="simple"] .lmrow .btn.sm { grid-column: 4; grid-row: 1 / 3; }
/* N26 카드뉴스 첫 화면 · 편집 방식 탭 */
.cstart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; margin-top: 12px; }
.cways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cway { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; min-height: 76px; font: inherit; }
.cway b { font-size: 15px; } .cway span { font-size: 13px; color: var(--muted); }
.cway[aria-pressed="true"], .cway:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--surface)); }
.cfrm { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cmine { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cmi { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); min-width: 0; }
.cmi canvas { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; background: var(--beige-2); border: 1px solid var(--line); }
.cmi b { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmodes { margin: 8px 0 4px; } .cmodes .pill .sub { font-weight: 400; margin-left: 4px; }
.cfpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; }
.cfpick button { position: relative; padding: 0; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 1; }
.cfpick img { width: 100%; height: 100%; object-fit: cover; display: block; } .cfpick span { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; border-radius: 4px; padding: 0 5px; }
@media (max-width: 1100px) { .cstart { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .cways { grid-template-columns: minmax(0, 1fr); } }
/* ── 1012 N29 요금 확인 창 다시 짬 — 큰 금액 · 한도 막대 · 꼭 확인 · 만드는 것 · 근거(작게) ── */
.dlg[aria-labelledby] .pay-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; background: var(--bg); border-radius: 16px; padding: 18px 22px; }
.pay-amt, .pay-time { display: flex; flex-direction: column; gap: 2px; } .pay-time { text-align: right; }
.pay-hero .lbl { font-size: 15px; color: var(--muted); font-weight: 600; }
.pay-hero .money { font-family: var(--font-heading); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--ink); }
.pay-hero .won { font-size: 18px; color: var(--ink-2); font-weight: 600; }
.pay-hero .pay-time b { font-size: 20px; color: var(--ink); }
.pay-limit { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.pay-limit-top { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--ink-2); flex-wrap: wrap; } .pay-limit-top b { color: var(--ink); font-weight: 600; text-align: right; }
.pay-meter { height: 10px; border-radius: 5px; background: var(--track, #E7E1D6); overflow: hidden; display: flex; } .pay-meter i { display: block; height: 100%; } .pay-meter .used { background: #A8A29E; } .pay-meter .now { background: var(--teal); }
.pay-sub { font-size: 15px; color: var(--muted); }
.pay-must { background: #FEF3C7; border: 1px solid #FCD34D; border-left: 6px solid #D97706; border-radius: 14px; padding: 14px 18px; }
.pay-must h3, .pay-what h3, .pay-basis h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.pay-must h3 { color: #92400E; } .pay-must h3::before { content: '⚠ '; }
.pay-must ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.5; color: #451A03; } .pay-must b { font-weight: 700; }
.pay-what h3 { color: var(--ink); } .pay-basis h3 { color: var(--muted); font-size: 14px; }
.pay-dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pay-dl > div { display: grid; grid-template-columns: minmax(7em, max-content) minmax(0, 1fr); gap: 14px; align-items: baseline; }
.pay-dl dt { font-size: 15px; color: var(--muted); font-weight: 600; white-space: nowrap; } .pay-dl dd { margin: 0; font-size: 17px; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.pay-basis { border-top: 1px solid var(--line); padding-top: 12px; } .pay-basis .pay-dl dd { font-size: 15px; color: var(--ink-2); } .pay-basis p { font-size: 14px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
html[data-mode="simple"] .pay-basis p, html[data-mode="simple"] .pay-basis .pay-dl dd, html[data-mode="simple"] .pay-sub { font-size: 16px; }
@media (max-width: 767px) { .pay-hero .money { font-size: 28px; } .pay-time { text-align: left; } .pay-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* 다른 확인 창 — "되돌릴 수 없어요" 같은 꼭 볼 문장은 노란 상자로 · 설명 문장과 나눔 */
.dlg p:has(.accent-t) { background: #FEF3C7; border-left: 6px solid #D97706; border-radius: 12px; padding: 12px 16px; color: #451A03; }
.dlg .min.muted, .dlg p.min { font-size: 15px; }
/* ── 1012 N29 만드는 중 가운데 창 · 다른 일 하기 칩 ── */
.busyov { position: fixed; inset: 0; z-index: 150; background: rgba(28, 25, 23, .45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: bzIn .2s ease-out; }
.busybox { background: var(--surface); border-radius: 22px; width: min(480px, 100%); padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.busybox h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin: 6px 0 0; }
.busyt { font-size: 16px; color: var(--ink-2); font-weight: 600; margin: 0; } .busys { font-size: 16px; color: var(--ink); background: var(--bg); border-radius: 12px; padding: 10px 14px; margin: 0; max-height: 140px; overflow: auto; width: 100%; }
.busyn { font-size: 15px; color: var(--muted); line-height: 1.5; margin: 4px 0 0; }
.busyacts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 6px; } .busyacts .btn { flex: 1 1 160px; min-height: 52px; } .busyacts .btn.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.busyani { display: flex; gap: 10px; height: 54px; align-items: center; } .busyani i { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); animation: bzDot 1.1s ease-in-out infinite; } .busyani i:nth-child(2) { animation-delay: .15s; background: var(--brand, #EA580C); } .busyani i:nth-child(3) { animation-delay: .3s; }
@keyframes bzDot { 0%, 100% { transform: translateY(0) scale(.8); opacity: .5; } 50% { transform: translateY(-14px) scale(1.1); opacity: 1; } }
@keyframes bzIn { from { opacity: 0; } to { opacity: 1; } }
.busychip { position: fixed; right: 20px; bottom: 20px; z-index: 140; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: 15px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.busychip .dot { width: 10px; height: 10px; border-radius: 50%; background: #34D399; animation: bzDot 1.1s ease-in-out infinite; } .busychip span:last-child { text-decoration: underline; opacity: .85; }
/* 1014 N65 가운데 창 진행 막대 · "멈춘 게 아니에요" */
.bzbar { width: 100%; height: 10px; border-radius: 999px; background: var(--line, #E7E5E4); overflow: hidden; position: relative; margin: 4px 0 2px; } .bzbar i { display: block; height: 100%; background: var(--teal); border-radius: inherit; transition: width .6s ease; }
.bzbar.ind i { width: 35% !important; position: absolute; left: -35%; animation: bzSlide 1.4s ease-in-out infinite; }
@keyframes bzSlide { from { left: -35%; } to { left: 100%; } }
.busyok { font-size: 16px; font-weight: 700; color: var(--teal); margin: 2px 0 0; }
@media (prefers-reduced-motion: reduce) { .busyani i, .busychip .dot, .bzbar.ind i { animation: none; } .bzbar.ind i { left: 0; width: 100% !important; opacity: .35; } }
/* 1013 N31 목소리 표 — ★ · 이름(가명 · 원래 이름) · 대응 언어 · 잘 어울리는 영상 · 미리 듣기 · 고르기 / 즐겨찾기 = 맨 위 */
.vrows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.vrows .vr { display: grid; grid-template-columns: 34px minmax(110px, 1.3fr) minmax(70px, .8fr) minmax(110px, 1.4fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line); font-weight: 400; }
.vrows .vr.vh { border-top: 0; background: var(--bg); font-size: 13px; color: var(--muted); padding: 6px 10px; }
.vrows .vr.on { background: var(--teal-light); }
.vrows .vn { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .vrows .vn b { font-weight: 600; }
.vrows .vl { color: var(--ink-2); }
.vtag { display: inline-block; font-style: normal; font-size: 13px; line-height: 1.6; padding: 0 7px; margin: 1px 4px 1px 0; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.vstar { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--subtle); border-radius: 8px; }
.vstar[aria-pressed="true"] { color: #D97706; }
.vstar:hover, .vstar:focus-visible { background: var(--bg); }
/* 1102 목소리 두 묶음 — 로컬 · 무료(운영자 PC) / ElevenLabs · 유료 (NU.voiceGroups · NU.voicePay) */
.vpay { display: inline-block; font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1.6; padding: 0 7px; border-radius: 999px; white-space: nowrap; flex: none; }
.vpay.paid { background: var(--warn-bg); color: var(--warn-ink); }
.vpay.free { background: var(--ok-light); color: var(--ok); }
.vgroups { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* 1102 19:02 목소리 톤 · 속도 한 줄(모든 목소리 고르는 곳 위 · 375px 줄바꿈) */
.vfx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: var(--card2, rgba(0,0,0,.02)); min-width: 0; }
.vfx select { max-width: 100%; min-width: 0; flex: 0 1 auto; }
.vfx input[type=range] { flex: 1 1 120px; min-width: 90px; max-width: 220px; }
.vfx-t, .vfx-s { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.vfx-l { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vfx-x { flex: 1 1 100%; font-size: 13px; } .vfx-x summary { cursor: pointer; }
.vfx-g { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.vfx-n { flex: 1 1 100%; margin: 0; font-size: 12px; }
.vgrp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vgrp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.vgrp-h b { font-size: 14.5px; }
.vgrp-n { color: var(--muted); font-size: 13px; }
.vgrp-sub { color: var(--muted); font-size: 12.5px; flex-basis: 100%; }
.vgrp-note { margin: 0; font-size: 13.5px; border-radius: 10px; padding: 8px 10px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.vgrp-note p { margin: 0; }
.vgrp-note.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-bg); }
.vgrp-how { margin-top: 6px; } .vgrp-how summary { cursor: pointer; color: var(--teal-link); min-height: 32px; display: flex; align-items: center; }
.vgrp-how ol { margin: 4px 0 0; padding-left: 20px; } .vgrp-how code { font-size: 12px; overflow-wrap: anywhere; }
.vgrp-empty { margin: 0; }
.vlistd > summary { cursor: pointer; font-size: 14px; color: var(--teal-link); min-height: 36px; display: flex; align-items: center; }
.vlmeta { display: block; margin-top: 2px; }
/* 좁은 곳(편집기 왼쪽 판 · 폰) = 두 줄: ★ 이름 듣기 고르기 / 언어 · 어울리는 영상 */
.edn-vp .vrows .vr, .vrows.narrow .vr { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "f n p" "f n k" "f l l" "f c c"; gap: 2px 6px; padding: 8px; }
.edn-vp .vrows .vn b, .vrows.narrow .vn b { display: block; } .edn-vp .vrows .vn .muted, .vrows.narrow .vn .muted { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edn-vp .vrows .vk .btn, .edn-vp .vrows .vp .btn, .vrows.narrow .vk .btn, .vrows.narrow .vp .btn { width: 100%; }
.edn-vp .vrows .vr > .vf, .vrows.narrow .vr > .vf { grid-area: f; align-self: start; } .edn-vp .vrows .vr > .vn, .vrows.narrow .vr > .vn { grid-area: n; } .edn-vp .vrows .vr > .vp, .vrows.narrow .vr > .vp { grid-area: p; } .edn-vp .vrows .vr > .vk, .vrows.narrow .vr > .vk { grid-area: k; } .edn-vp .vrows .vr > .vl, .vrows.narrow .vr > .vl { grid-area: l; } .edn-vp .vrows .vr > .vc, .vrows.narrow .vr > .vc { grid-area: c; }
.edn-vp .vrows .vr.vh, .vrows.narrow .vr.vh { display: none; }
@media (max-width: 767px) { .vrows .vr { grid-template-columns: 30px 1fr auto auto; grid-template-areas: "f n p k" "f l l l" "f c c c"; gap: 2px 6px; } .vrows .vr > .vf { grid-area: f; align-self: start; } .vrows .vr > .vn { grid-area: n; } .vrows .vr > .vp { grid-area: p; } .vrows .vr > .vk { grid-area: k; } .vrows .vr > .vl { grid-area: l; } .vrows .vr > .vc { grid-area: c; } .vrows .vr.vh { display: none; } }
/* 1013 N32 롱폼 작업실 — 키워드 칩 · 대본 스타일 드롭다운 3개 · 큰 가이드 칸 · 그림 나누기 */
.kwbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); cursor: text; }
.kwbox:focus-within { outline: 2px solid var(--teal); outline-offset: 1px; }
.kwbox [data-lmkwlist] { display: contents; }
.kwchip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--teal-light); color: var(--ink); font-size: 14px; }
.kwchip button { border: 0; background: none; width: 24px; height: 24px; border-radius: 999px; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; }
.kwchip button:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.kwbox .kwin, .kwbox .kwin:focus, .kwbox .kwin:focus-visible { flex: 1; min-width: 140px; min-height: 36px; border: 0; outline: 0; box-shadow: none; background: none; font: inherit; padding: 6px 2px; }
.lmsel3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lmsel3 .lbl2 { margin-top: 0; }
.lmguide { min-height: 200px; line-height: 1.6; resize: vertical; }
.lmimg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; }
.lmimg .lbl { font-weight: 600; } .lmimg p { flex-basis: 100%; margin: 0; }
/* 1021 롱폼 화질 두 가지(long4) — 1920×1080(기본) · 1280×720(가볍고 빠름) · 칩 44px 이상 · 폰에서 줄바꿈 */
.lmszbox { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; min-width: 0; }
.lmszbox .lbl2 { font-weight: 600; margin: 0; } .lmszbox p { margin: 0; font-size: 13px; } .lmszbox .pills { gap: 8px; } .lmszbox .chip { min-height: 48px; font-size: 15px; padding: 0 14px; max-width: 100%; white-space: normal; }
.lmkw { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
@media (max-width: 900px) { .lmsel3 { grid-template-columns: 1fr; } }
/* 1013 N33 쇼핑 상세페이지 자료 카드 */
.sfacts h2 { font-size: 17px; } .sfacts .xrow { margin-top: 8px; }
.sfcard { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.sfcard .sfsum { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--teal-light); }
.sfgrp { display: flex; flex-direction: column; gap: 4px; } .sfgrp .lbl { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.sfit { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.sfit input { margin-top: 4px; } .sfit .sfev { grid-column: 2; }
/* 1013 진행 보이기 — 진행 띠(화면 아래 왼쪽) · 움직이는 막대(숫자를 모를 때) · 단계 카드 막대 + % */
.bar.ind > i { width: 34% !important; animation: barind 1.3s ease-in-out infinite; transition: none; }
@keyframes barind { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
.stepcard.now .bar > i, .actdock .bar > i { background-image: linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%); background-size: 16px 16px; animation-name: barstripe; animation-duration: .9s; animation-timing-function: linear; animation-iteration-count: infinite; }
.stepcard.now .bar.ind > i, .actdock .bar.ind > i { animation: barind 1.3s ease-in-out infinite, barstripe .9s linear infinite; }
@keyframes barstripe { from { background-position: 0 0; } to { background-position: 16px 0; } }
.pgline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; } .pgline .bar { flex: 1 1 200px; } .pgline .pgn { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; } .pgline .pgnote { flex-basis: 100%; font-size: 14px; color: var(--muted); }
.actdock { position: fixed; left: 264px; bottom: 16px; z-index: 900; width: 320px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.14); font-size: 14px; overflow: hidden; }
.actdock-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; background: var(--bg); cursor: pointer; font: inherit; color: var(--ink); text-align: left; } .actdock-h .muted { margin-left: auto; font-size: 13px; }
.actspin { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--teal-light); border-top-color: var(--teal); animation: actspin .8s linear infinite; flex-shrink: 0; }
@keyframes actspin { to { transform: rotate(360deg); } }
.actdock ul { list-style: none; margin: 0; padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow: auto; }
.actdock .actl { display: flex; gap: 8px; } .actdock .actl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .actdock .actl b { font-variant-numeric: tabular-nums; font-weight: 600; }
.actdock .bar { height: 8px; margin-top: 4px; } .actdock .actn { font-size: 12px; color: var(--muted); margin-top: 2px; }
.actdock li.done .actl b { color: var(--teal); } .actdock li.fail .actl b { color: var(--accent-press); }
@media (max-width: 1279px) { .actdock { left: 92px; } } @media (max-width: 767px) { .actdock { left: 16px; bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .bar.ind > i, .actspin, .stepcard.now .bar > i, .actdock .bar > i { animation-duration: 3s; } }
/* 1013 소스 창고 — 종류 탭 · 서버 자산 격자 · 글 목록 */
.srctabs { display: flex; flex-wrap: wrap; gap: 8px; } .srctabs [aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.srcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.srca { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.srca .srcthumb { display: block; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--bg) center / cover no-repeat; font-size: 12px; color: var(--muted); }
.srca video { width: 100%; border-radius: 8px; } .srca figcaption { font-size: 13px; color: var(--ink-2); }
.srctext { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .srctext li { display: flex; flex-direction: column; gap: 2px; padding: 10px 2px; border-top: 1px solid var(--line); }
.srctext li:first-child { border-top: 0; } .srctext a { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; } .srctext a:hover b { text-decoration: underline; }
/* 1013 N34 옆 메뉴 — 대분류 아코디언(지금 화면이 있는 묶음만 펼침 · 머리 누르면 접기/펴기) · 내 브랜드 고르기 · 이번 달 사용량 카드 */
.nav .nbrand { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; } .nav .nbrand .nbl { font-size: 12px; color: var(--subtle); padding: 0 4px; }
.nav .nbrand .kit { margin: 0; }
.nav .ngrp { display: flex; flex-direction: column; }
.nav .nghd { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--nav-item); padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--nav-text); font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; text-align: left; }
.nav .nghd:hover { background: var(--nav-surface); } .nav .nghd .chev { margin-left: auto; width: 18px; height: 18px; transition: transform .2s; opacity: .7; }
.nav .ngrp:not(.open) .nghd .chev { transform: rotate(-90deg); }
.nav .ngrp.cur > .nghd { color: #FFFFFF; font-weight: 600; }
.nav .ngb { display: flex; flex-direction: column; padding-left: 14px; border-left: 1px solid var(--nav-line); margin-left: 22px; }
.nav .ngrp:not(.open) > .ngb { display: none; }
.nav .ngb a.it { font-size: 15px; min-height: 44px; }
html[data-mode="simple"] .nav .ngb a.it { min-height: 56px; font-size: 16px; }
.nav .nuse { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; background: #0F172A; color: #F8FAFC; text-decoration: none; }
.nav .nuse b { font-size: 14px; } .nav .nuse [data-nusep] { position: absolute; } .nav .nuse .bar { height: 6px; background: rgba(255,255,255,.18); } .nav .nuse .bar > i { background: #A5B4FC; }
.nav .nuse .min { font-size: 12px; color: #CBD5E1; }
@media (max-width: 1279px) and (min-width: 768px) { .nav .nbrand .nbl, .nav .nuse, .nav .nghd .chev { display: none; } .nav .nghd { width: 64px; justify-content: center; padding: 0; } .nav .ngb { padding-left: 0; margin-left: 0; border-left: 0; } }
.nbpop { position: fixed; z-index: 950; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; }
.nbpop button, .nbpop a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; }
.nbpop button:hover, .nbpop a:hover { background: var(--bg); } .nbpop [aria-checked="true"] { background: var(--teal-light); font-weight: 600; }
.nbpop .sw { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; } .nbpop a { color: var(--teal-link); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
/* 1013 N34 홈 대시보드 · 성과 분석 */
.dhead + .dkpis { margin-top: 8px; }
.dhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dhead .ddate { margin: 0; color: var(--teal-link); font-weight: 600; font-size: 15px; } .dhead .dhi { margin: 2px 0 4px; font-size: 26px; } .dhead p.muted { margin: 0; }
.dkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dkpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.dkpi-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.dkic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--teal-light); color: var(--teal); }
.dkpi.k2 .dkic { background: #FEF3C7; color: #B45309; } .dkpi.k3 .dkic { background: #DCFCE7; color: #15803D; } .dkpi.k4 .dkic { background: #E0F2FE; color: #0369A1; }
.dkside { font-size: 13px; color: var(--muted); } .dkside.up { color: #15803D; font-weight: 600; } .dkside.down { color: var(--accent-press); font-weight: 600; }
.dklab { font-size: 15px; color: var(--ink-2); } .dkval { font-size: 28px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; } .dkval small { font-size: 15px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.dsec .sec-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .dsec h2 { margin: 0; }
.dlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; } .dlist li { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-top: 1px solid var(--line); }
.dlist li:first-child { border-top: 0; } .dlist .t { display: flex; flex-direction: column; min-width: 0; flex: 1; color: var(--ink); text-decoration: none; } .dlist .t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dchic { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 16px; }
.dst { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .dst.plan { background: var(--teal-light, #E6F2F1); color: var(--teal); } .dst.sug { background: #FEF3C7; color: #B45309; } .dst.post { background: #DCFCE7; color: #15803D; }
.pfbar { flex-wrap: wrap; gap: 10px; align-items: center; } .pfbig { font-size: 24px; font-variant-numeric: tabular-nums; }
.pfsvg { width: 100%; height: 220px; display: block; } .pfsvg .pfg { stroke: var(--line); stroke-dasharray: 4 4; } .pfsvg .pfl { fill: none; stroke: var(--teal); stroke-width: 3; vector-effect: non-scaling-stroke; } .pfsvg .pfa { fill: rgba(15,118,110,.10); } .pfsvg .pfd { fill: var(--surface); stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pfrow { display: grid; grid-template-columns: 40px 1fr auto 56px; grid-template-areas: "i t v n" "b b b b"; align-items: center; gap: 6px 12px; padding: 10px 0; }
.pfrow .dchic { grid-area: i; } .pfrow .t { grid-area: t; font-weight: 600; } .pfrow b { grid-area: v; font-variant-numeric: tabular-nums; } .pfrow .min { grid-area: n; text-align: right; } .pfrow .bar { grid-area: b; height: 8px; } .pfrow .bar > i { background: var(--teal); }
.pfheat { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; } .pfheat .hh { font-size: 13px; color: var(--muted); text-align: center; }
.pfheat .hc { height: 40px; border-radius: 8px; background: rgba(15, 118, 110, var(--a)); }
@media (max-width: 1023px) { .dkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 1013 N35 분야별 인기 · 벤치마킹 채널 */
.xrow.wrap { flex-wrap: wrap; } .rcard2 .rk { min-width: 28px; height: 28px; border-radius: 8px; background: var(--teal); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.bchan .bthumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .bchan .bthumb.ph { display: inline-flex; align-items: center; justify-content: center; background: var(--track); color: var(--muted); }
.blist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .blist li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.blist li img, .blist li .ph { width: 112px; height: 63px; border-radius: 8px; object-fit: cover; background: var(--track); flex-shrink: 0; } .blist .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .blist .t b { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 640px) { .blist li { flex-wrap: wrap; } .blist li img, .blist li .ph { width: 96px; height: 54px; } }
/* 1013 N36 성과 분석 — 연결한 유튜브 채널 */
.pfsrc .pill { display: inline-flex; align-items: center; gap: 8px; } .pfsrc .pill img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } [data-pfsrc] .pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
/* 1013 N37 요금 · 사용량 최근 사용 = 표(예전엔 막대 줄 칸에 넣어 글이 세로로 쪼개짐) */
.utable-wrap { overflow-x: auto; margin: 0 -4px; } .utable { width: 100%; border-collapse: collapse; font-size: 14px; } .utable th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.utable td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .utable .num { text-align: right; font-variant-numeric: tabular-nums; } .utable .nw { white-space: nowrap; } .utable .mdl { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .utable tbody tr:last-child td { border-bottom: 0; }
/* 1013 N37 소스 창고 — 라벨 칩 · 고르기 · 두 배 미리보기 · 소리 폴더 */
.libc { position: relative; } .libc.sel { outline: 3px solid var(--teal); outline-offset: -3px; }
.libc .libsel { position: absolute; top: 8px; left: 8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.88); cursor: pointer; z-index: 1; }
.libc .libsel input { width: 22px; height: 22px; accent-color: var(--teal); margin: 0; cursor: pointer; }
.libc figcaption { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; } .libc .libcap { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.libc .libkw { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .libc .kwc { font: inherit; font-size: 12px; font-weight: 500; padding: 2px 8px; min-height: 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); cursor: pointer; }
.libc .kwc:hover { border-color: var(--teal); color: var(--teal); } .libc .kwai, .libc .kwr { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--teal-light, #E6F2F1); color: var(--teal); } .libc .kwr { background: var(--track); color: var(--muted); }
.libbar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.libbar b { margin-right: auto; } .libbar .btn:not(.primary) { background: transparent; color: var(--surface); border-color: rgba(255,255,255,.4); }
.libprev { position: fixed; z-index: 90; pointer-events: none; opacity: 0; transform: scale(.96); transition: opacity .12s, transform .12s; background: var(--surface); border-radius: 14px; padding: 6px; box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.libprev.on { opacity: 1; transform: none; } .libprev img { display: block; object-fit: contain; border-radius: 10px; background: var(--track); } .libprev p { margin: 6px 4px 2px; font-size: 13px; color: var(--ink-2); max-width: 100%; }
.afolders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .afold { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.afold .afh { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 48px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; } .afold .afh b { font-weight: 600; } .afold .afh .lnk.r { margin-left: auto; }
.afold .afh[aria-expanded="true"] { border-bottom: 1px solid var(--line); } .afold .afb { padding: 12px; }
@media (prefers-reduced-motion: reduce) { .libprev { transition: none; } }
/* 1013 N37 롱폼 목차 — 롱폼 작업실 목록(.lmrow 격자 5칸)과 이름이 겹쳐 목차 줄이 좁은 칸에 갇혀 보였음 → 목차 줄은 .lmorow 로 따로(번호 · 제목 · 길이 / 다룰 순서 번호 목록 / 다시 잡는 첫 줄 / 키워드) */
.lmolist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lmrow.lmorow { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lmorow .lmoh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lmorow .lmoh .no { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.lmorow .lmoh .inp { flex: 1 1 320px; min-width: 0; font-weight: 600; } .lmorow .lmoh .len { font-size: 14px; color: var(--muted); white-space: nowrap; }
.lmorow .lmpts { margin: 0 0 0 42px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lmorow .lmhook { margin: 0 0 0 42px; font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--bg); border-radius: 10px; padding: 8px 12px; } .lmorow .lmhook b { font-weight: 600; color: var(--muted); margin-right: 6px; font-size: 13px; }
.lmorow .lmkw { margin-left: 42px; display: flex; flex-wrap: wrap; gap: 4px; }
.lmkwall { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--bg); margin-bottom: 12px; } .lmkwall > b { font-size: 15px; font-weight: 600; }
.lmkwl { display: flex; flex-wrap: wrap; gap: 8px 14px; } .lmkwi { display: inline-flex; align-items: center; gap: 6px; } .lmkwi.miss .vtag { opacity: .55; }
@media (max-width: 640px) { .lmorow .lmpts, .lmorow .lmhook, .lmorow .lmkw { margin-left: 0; } }
html[data-mode="simple"] .lmorow .lmpts, html[data-mode="simple"] .lmorow .lmhook, html[data-mode="simple"] .lmorow .lmoh .len, html[data-mode="simple"] .lmkwall .min { font-size: 17px; }
html[data-mode="simple"] .afold .afh { min-height: 56px; font-size: 17px; } html[data-mode="simple"] .libc .libsel { width: 56px; height: 56px; } html[data-mode="simple"] .libc .libsel input { width: 26px; height: 26px; }
html[data-mode="simple"] .libc .kwc { font-size: 17px; cursor: default; } html[data-mode="simple"] .libc .libcap { font-size: 17px; }
/* ═══ 1013 N38 글자 위계 · 가독성(대표 지시 10/13 17:14 "모든 텍스트가 볼드하거나 불필요하게 커서 답답함") ═══
 *  ① 제목도 본문 글꼴(가변 · 보통 굵기 파일) — 예전 제목 글꼴(Gothic A1 Bold 한 벌)은 늘 두꺼웠음 · 굵기는 h1 700 · h2/h3 600 · 본문 400 · 강조 600
 *  ② 크기 단계: 전문가 13 · 15 · 17 · 20 · 24 / 간편 17 · 18 · 20 · 24 · 28 (간편 모드 최소 17px 그대로)
 *  ③ 색으로 위계: 본문 ink-2 · 보조 muted · 제목 ink · 줄 간격 1.6 */
:root { --font-heading: "CS UI Sans", "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --fs-display: 28px; --fs-title-l: 24px; --fs-title: 20px; --fs-body-l: 18px; --fs-body: 17px; }
html[data-mode="expert"] { --t-title: 17px; --t-big: 20px; --t-display: 24px; }
body { -webkit-font-smoothing: antialiased; }   /* 줄 간격 · 글자 사이는 그대로(편집기 미리보기 자리 = 내보낸 영상 자리) */
h1, .qtitle, .bigt { font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
h2 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; } h3 { font-weight: 600; line-height: 1.4; }
p { color: var(--ink-2); } .card p, .notebox p { color: inherit; }
.min.muted, .muted.min { line-height: 1.5; }
label, .lbl2 { font-weight: 500; }
.btn { font-weight: 600; letter-spacing: -0.005em; }
/* 요금 확인 창 등 가운데 창 — 제목 · 큰 금액 · 표 · 근거를 단계로 */
.dlg { gap: 18px; padding: 28px 30px 24px; width: min(560px, 100%); }
.dlg h2 { font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.dlg p { font-size: 16px; line-height: 1.6; }
.dlg .acts .btn { min-height: 52px; font-size: 16px; }
.dlg[aria-labelledby] .pay-hero { padding: 16px 20px; border-radius: 14px; align-items: center; }
.pay-hero .lbl { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pay-hero .money { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.pay-hero .won { font-size: 14px; font-weight: 400; color: var(--muted); }
.pay-hero .pay-time b { font-size: 17px; font-weight: 600; }
.pay-limit-top { font-size: 14px; color: var(--muted); } .pay-limit-top b { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pay-meter { height: 6px; border-radius: 3px; } .pay-sub { font-size: 13px; }
.pay-must { padding: 12px 16px; border-left-width: 4px; } .pay-must ul { font-size: 14px; gap: 4px; } .pay-must b { font-weight: 600; }
.pay-must h3, .pay-what h3, .pay-basis h3 { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; margin: 0 0 8px; }
.pay-must h3 { color: #92400E; }
.pay-what { border-top: 1px solid var(--line); padding-top: 14px; }
.pay-dl { gap: 6px; } .pay-dl > div { grid-template-columns: 124px minmax(0, 1fr); gap: 12px; }
.pay-dl dt { font-size: 13px; font-weight: 500; color: var(--muted); white-space: normal; line-height: 1.5; } .pay-dl dd { font-size: 14px; line-height: 1.5; color: var(--ink); }
.pay-basis { padding-top: 10px; } .pay-basis .pay-dl dd { font-size: 13px; } .pay-basis p { font-size: 12px; margin: 4px 0 0; }
.pay-basis:not(:has(dl div)) dl { display: none; }
html[data-mode="simple"] .dlg h2 { font-size: 24px; } html[data-mode="simple"] .dlg p, html[data-mode="simple"] .pay-dl dd, html[data-mode="simple"] .pay-must ul { font-size: 17px; }
html[data-mode="simple"] .pay-dl dt, html[data-mode="simple"] .pay-limit-top, html[data-mode="simple"] .pay-limit-top b, html[data-mode="simple"] .pay-hero .won { font-size: 15px; } html[data-mode="simple"] .pay-basis p, html[data-mode="simple"] .pay-basis .pay-dl dd, html[data-mode="simple"] .pay-sub { font-size: 14px; }
html[data-mode="simple"] .dlg .acts .btn { min-height: 56px; font-size: 17px; }
@media (max-width: 767px) { .dlg { padding: 22px 18px 18px; } .pay-hero .money { font-size: 28px; } .pay-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
html[data-mode="simple"] .ncard .nt { font-size: 21px; }   /* N38 뉴스 카드 제목은 요약(17)보다 확실히 크게 */
html[data-mode="simple"] .ddate, html[data-mode="simple"] .dkpi .dklab, html[data-mode="simple"] .dkpi .dkval small, html[data-mode="simple"] .dkpi .dkside, html[data-mode="simple"] .dsec .min, html[data-mode="simple"] .dst { font-size: 17px; }   /* N38 간편 모드 대시보드도 17px 이상 */
/* 1013 N41 성과 꺾은선 숫자 · 나라별 · 벤치마킹 카드 · 연결한 내 채널 */
.pfsvg.pfline { height: auto; aspect-ratio: 800 / 260; overflow: visible; } .pfsvg .pfv { font-size: 13px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; } .pfsvg .pfx { font-size: 12px; fill: var(--muted); }
.dkpis.dk5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1279px) { .dkpis.dk5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .dkpis.dk5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pfrow.pfc .cc { grid-area: i; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; } .pfrow .pfcs { grid-column: 1 / -1; text-align: left; }
.pfcty { align-items: start; } @media (max-width: 1023px) { .pfcty { grid-template-columns: minmax(0, 1fr); } }
.bgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .bvid .rt { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bph { font-weight: 600; } .bph.up, .bstat .up { color: var(--teal); } .bchan .bthumb { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.connlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .connrow { display: grid; grid-template-columns: 110px 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.connrow .cplat { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .plic { width: 26px; height: 26px; fill: #e5484d; } .plic .pl { fill: #fff; }
.connrow .cav { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--line); } .connrow .cname { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .connrow .csubs { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cdot { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-weight: 600; }
.cdot i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; } .cdot.ok i { background: #22a06b; box-shadow: 0 0 0 4px rgba(34, 160, 107, .18); } .cdot.bad i { background: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .18); } .cdot.bad { color: #c62a2f; border-color: rgba(229, 72, 77, .5); }
html[data-mode="simple"] .cdot { min-height: 56px; font-size: 17px; } html[data-mode="simple"] .connrow .csubs, html[data-mode="simple"] .connrow .cplat { font-size: 17px; }
@media (max-width: 767px) { .connrow { grid-template-columns: 40px minmax(0, 1fr) auto; } .connrow .cplat { grid-column: 1 / -1; } .connrow .csubs { grid-column: 2; } .connrow .cdot { grid-column: 3; grid-row: 2 / 4; } }
html[data-mode="simple"] .connrow .min { font-size: 17px; }
/* 1013 N42 롱폼 → 쇼츠 — 개수 직접 입력 · 분석/추천 중 움직이는 소리 막대 */
.l2h { font-size: 17px; margin: 14px 0 6px; } .l2num { max-width: 160px; font-variant-numeric: tabular-nums; }
.l2wave { display: flex; align-items: flex-end; gap: 4px; height: 28px; margin: 4px 0 8px; } .l2wave i { width: 6px; height: 100%; border-radius: 3px; background: var(--teal); opacity: .75; transform-origin: bottom; animation: l2wave 1.1s ease-in-out infinite; }
.l2wave i:nth-child(2n) { animation-delay: -.3s; } .l2wave i:nth-child(3n) { animation-delay: -.6s; } .l2wave i:nth-child(4n+1) { animation-delay: -.85s; } .l2wave i:nth-child(5n) { animation-duration: .9s; }
@keyframes l2wave { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .l2wave i { animation: none; transform: scaleY(.5); } }
/* 1014 N44 위계 규칙(대표 지시 10/14 01:10) — 글자 크기 · 굵기 · 색으로 3단계
 *  옆 메뉴: 대분류(혼자 있는 메뉴 · 묶음 머리) 16px · 700 · 밝은 글자 / 중분류(묶음 안) 14px · 400 · 흐린 글자 · 왼쪽 안내 선
 *  카드 목록(세계 뉴스 등): 메타(출처 · 시각) 13px · 흐림 → 제목 17px · 600 · 줄 간격 1.45 · 두 줄까지 → 단추 13.5px · 높이 44px(전문가 모드) */
html[data-mode="expert"] .nav > a.it, html[data-mode="expert"] .nav .nghd { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #F3F4F6; }
html[data-mode="expert"] .nav > a.it[aria-current="page"] { color: var(--surface); }
html[data-mode="expert"] .nav .ngb a.it { font-size: 14px; font-weight: 400; color: rgba(243, 244, 246, .72); min-height: 44px; }   /* 누르는 곳 44px 규칙 */
html[data-mode="expert"] .nav .ngb a.it:hover { color: #F3F4F6; } html[data-mode="expert"] .nav .ngb a.it[aria-current="page"] { color: var(--surface); font-weight: 600; }
html[data-mode="expert"] .nav .ngb a.it .i { width: 18px; height: 18px; opacity: .8; }
html[data-mode="expert"] .nav .ngrp { margin-top: 6px; } html[data-mode="expert"] .nav .ngrp + a.it { margin-top: 6px; }
html[data-mode="expert"] .rgrid .xcard.ncard { gap: 10px; padding: 18px 18px 16px; }
html[data-mode="expert"] .ncard .nmeta { font-size: 13px; color: var(--muted); letter-spacing: .01em; }
html[data-mode="expert"] .rgrid .xcard.ncard b.nt, html[data-mode="expert"] .ncard .nt { font-size: 17px; font-weight: 600; line-height: 1.45; -webkit-line-clamp: 2; color: var(--ink); }
html[data-mode="expert"] .ncard .nx { font-size: 14px; line-height: 1.5; }
html[data-mode="expert"] .ncard .btn { min-height: 44px; padding: 0 12px; font-size: 13.5px; font-weight: 500; } html[data-mode="expert"] .ncard .btn.primary { font-weight: 600; }
html[data-mode="expert"] .ncard .xrow { gap: 6px; margin-top: auto; }
/* 1014 N44 성과 분석 — 세계 지도 · 프리미엄 TOP10 표 · 올린 시간 · 성별 나이 */
.pfmapc { position: relative; } .pfmap svg { width: 100%; height: auto; display: block; } .pfmap path { fill: var(--line); stroke: var(--surface); stroke-width: .6; transition: fill .15s; }
.pfmap path.some { fill: #cfe3df; } .pfmap path.on { fill: var(--teal); cursor: pointer; } .pfmap path.hl, .pfmap path.on:hover { fill: #f59e0b; fill-opacity: 1 !important; }
.pftip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: var(--surface); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); min-width: 150px; }
.pfclist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.pfclist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 48px; align-items: baseline; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pfclist .rk { color: var(--muted); font-weight: 700; } .pfclist .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pfclist b { font-variant-numeric: tabular-nums; } .pfclist .pc { color: var(--muted); font-size: 13px; text-align: right; }
.pfclist .pr { grid-column: 2 / -1; color: var(--muted); font-size: 13px; }
.pftbl { overflow-x: auto; } .pftbl table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .pftbl th { text-align: right; font-weight: 600; color: var(--muted); font-size: 13px; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pftbl td { text-align: right; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; } .pftbl th:nth-child(-n+2), .pftbl td:nth-child(-n+2) { text-align: left; } .pftbl td.tt { white-space: normal; max-width: 280px; } .pftbl td.tt a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pfbest { margin: 0 0 8px; } .pfheat .hc { display: flex; align-items: center; justify-content: center; } .pfheat .hc i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink); mix-blend-mode: multiply; }
.pfgen { display: flex; gap: 10px; margin-bottom: 10px; } .pfgen .pfg { flex: 1; border-radius: 12px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: baseline; background: var(--bg); } .pfgen .pfg.female b { color: #db2777; } .pfgen .pfg.male b { color: #2563eb; }
.pfages { display: flex; flex-direction: column; gap: 6px; } .pfage { display: grid; grid-template-columns: 56px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 14px; } .pfage b { text-align: right; font-variant-numeric: tabular-nums; }
.pfage .bar2 { display: flex; height: 12px; border-radius: 6px; background: var(--bg); overflow: hidden; } .pfage .bar2 .f { background: #f472b6; } .pfage .bar2 .m { background: #60a5fa; }
@media (max-width: 767px) { .pfclist { grid-template-columns: minmax(0, 1fr); } }
/* 1014 N44 벤치마킹 = 채널마다 최근 7개 한 줄 */
.bgrid7 { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; } .bgrid7 .rcard2 { padding: 12px; gap: 6px; } .bgrid7 .rcard2 .rt { font-size: 14.5px; } .bgrid7 .rcard2 .rs { font-size: 13px; } .bgrid7 .rcard2 .btn { min-height: 34px; padding: 0 10px; font-size: 13px; } .bgrid7 .xrow { flex-wrap: wrap; gap: 6px; }
/* 1014 N44 롱폼 → 쇼츠 오른쪽 칸 · 올린 영상 — 한 칸(큰 바탕 하나) 안에 정리 · 단추 크기 고정(눌러도 화면이 흔들리지 않게) */
.l2opt h2 { font-size: 18px; margin: 0 0 4px; } .l2opt .l2h { font-size: 15px; font-weight: 700; margin: 18px 0 8px; } .l2opt .l2h .muted { font-weight: 400; font-size: 13px; margin-left: 4px; }
.l2opt [data-group] .chip { min-width: 108px; height: 40px; justify-content: center; box-sizing: border-box; border-width: 2px; font-size: 14px; }
.l2opt [data-group] .chip:not([aria-pressed="true"]):not([aria-checked="true"]) { border-color: var(--line); }
.l2opt .l2nbox { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; min-height: 76px; } .l2opt .l2nbox .lbl2 { flex-basis: 100%; margin: 0; font-size: 13.5px; } .l2opt .l2num { width: 120px; height: 40px; } .l2opt .l2num:disabled { background: var(--bg); color: var(--muted); }
.l2opt .l2note { margin: 10px 0 0; line-height: 1.55; font-size: 13px; } .l2opt [data-exopts] { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .l2opt [data-exopts] h2 { font-size: 15px; }
html[data-mode="simple"] .l2opt .l2note, html[data-mode="simple"] .l2opt .l2h .muted, html[data-mode="simple"] .l2opt .l2nbox .lbl2 { font-size: 17px; } html[data-mode="simple"] .l2opt [data-group] .chip, html[data-mode="simple"] .l2opt .l2num { height: 56px; font-size: 17px; }
.srcsec .srclist { display: flex; flex-direction: column; gap: 0; } .srcsec .srclist .srcrow { padding: 10px 0; border-top: 1px solid var(--line); align-items: center; } .srcsec .srclist .srcrow:first-child { border-top: 0; }
.srcsec .srclist .srcrow .choice { border: 0; background: transparent; box-shadow: none; padding: 8px 12px; border-radius: 10px; text-align: left; min-height: 0; } .srcsec .srclist .srcrow .choice[aria-checked="true"] { background: var(--teal-50, #e8f3f1); box-shadow: inset 3px 0 0 var(--teal); }
.srcsec .srclist .srcrow .choice b { font-size: 15px; font-weight: 600; } .srcsec .srclist .srcrow .choice .s, .srcsec .srclist .srcrow .keepl { font-size: 13px; color: var(--muted); }
.srcsec .srclist .srcrow .acts { flex-direction: row; flex-wrap: wrap; gap: 6px; } .srcsec .srclist .srcrow .acts .btn { min-height: 34px; font-size: 13px; padding: 0 10px; }
html[data-mode="simple"] .srcsec .srclist .srcrow .acts .btn { min-height: 56px; font-size: 17px; } html[data-mode="simple"] .srcsec .srclist .srcrow .choice .s, html[data-mode="simple"] .srcsec .srclist .srcrow .keepl, html[data-mode="simple"] .srcsec .srclist .srcrow .choice b { font-size: 17px; }
.l2ref { display: flex; gap: 12px; align-items: flex-start; } .l2ref > div { flex: 1; }
html[data-mode="simple"] .srcsec .srclist .srcrow .choice { min-height: 56px; }
/* 1014 N44 소스 창고 — 위쪽 간격 · 만들기 막대(늘 보임 · 고르면 켜짐) */
.srctabs { margin-bottom: 4px; } [data-srcimgwrap] { display: flex; flex-direction: column; gap: 14px; } [data-srcimgwrap] > .card.pad { padding: 14px 18px; } [data-srcimgwrap] > .card .sec-h { gap: 14px; flex-wrap: wrap; justify-content: flex-start; } [data-srcimgwrap] > .card .sec-h b { font-size: 15px; }
[data-srcimgwrap] .search { margin: 0; } [data-srcimgwrap] .pills { gap: 8px; align-items: center; margin: 0; } [data-srcimgwrap] .pills .muted { font-size: 13px; margin-right: 4px; }
.libbar { justify-content: space-between; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 0, 0, .05); padding: 12px 16px; }
.libbar .lbinfo { display: flex; flex-direction: column; gap: 2px; margin-right: auto; } .libbar .lbinfo b { margin: 0; font-size: 15px; } .libbar .lbinfo .min { color: var(--muted); font-size: 13px; }
.libbar .lbacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .libbar .lbsep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.libbar .btn:not(.primary) { background: var(--surface); color: var(--ink); border-color: var(--line); } .libbar .btn:disabled { opacity: .45; cursor: not-allowed; }
.libbar.on { background: var(--ink); color: var(--surface); border-color: var(--ink); } .libbar.on .lbinfo .min { color: rgba(255, 255, 255, .7); } .libbar.on .btn:not(.primary) { background: transparent; color: var(--surface); border-color: rgba(255, 255, 255, .4); } .libbar.on .lbsep { background: rgba(255, 255, 255, .3); }
.blogpk { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0 14px; } .blogpk img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
html[data-mode="simple"] .libbar .lbinfo .min { font-size: 17px; }
/* 1014 N45 승인 대기 탭 · 승인한 것 목록 */
.aptabs { margin-bottom: 12px; } .aptabs .pill b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.apdone { display: flex; flex-direction: column; } .apd { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .apd:first-child { border-top: 0; }
.apd img, .apd .ph { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--bg); } .apd .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .apd .t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .apd { grid-template-columns: 56px minmax(0, 1fr); } .apd .xrow { grid-column: 1 / -1; } }
html[data-mode="simple"] .apd .btn { min-height: 56px; font-size: 17px; }
html[data-mode="simple"] .aptabs .pill { min-height: 56px; font-size: 17px; }
/* 1014 N47 학습함 — 올린 쇼츠 성과에서 배운 것 */
.plbox { margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.plks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.plk { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .plk b { font-size: 22px; font-variant-numeric: tabular-nums; }
.plcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; } .plc.good { background: rgba(13, 148, 136, .06); } .plc.bad { background: rgba(194, 65, 12, .05); }
.pldrop { margin: 0; font-size: 14px; } .plguide ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.pltbl { overflow-x: auto; } .pltbl td { vertical-align: top; font-size: 14px; } .pltbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pltbl .up { color: var(--teal); } .pltbl .down { color: var(--accent); }
.plth { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; float: left; margin-right: 8px; } .plsp { color: var(--teal); display: block; }
.plun li { gap: 8px; flex-wrap: wrap; } .plun select { max-width: 320px; }
@media (max-width: 767px) { .plks, .plcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plbox { min-width: 0; } .plbox > * { min-width: 0; max-width: 100%; } .plbox > .xrow { flex-wrap: wrap; gap: 8px; } .plbox > .xrow .btn { white-space: normal; } .plbox h2 .xtag { white-space: normal; }
.plbox .xtag { white-space: normal; max-width: 100%; } .plc > span:last-child { min-width: 0; overflow-wrap: anywhere; } .plbox h2 { overflow-wrap: anywhere; min-width: 0; }
.plstage { margin: 0; font-size: 14px; color: var(--teal); }
.pltabs { margin: 0 0 4px; }
/* 1014 N50 내 콘텐츠 — 종류 탭 · 올림 체크 */
.mytabs { margin-bottom: 4px; } .mytabs .pill[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.upline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.uptag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 13px; background: var(--beige-2); color: var(--ink-2); }   /* 1014 N56 고대비에서 --line · --ink-2 가 둘 다 검정이라 글자가 안 보였음(main CI 0928-8) */
.uptag.on { background: rgba(13, 148, 136, .14); color: var(--teal); font-weight: 600; }
.ccard.isup { border-color: rgba(13, 148, 136, .45); }
.aptomy { margin-left: auto; align-self: center; font-size: 14px; }
.reusechk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font-size: 14px; }
/* 1014 N51 플랫폼 공식 로고 — 모양 · 색 그대로 · 크기만 */
.plogo { display: inline-block; vertical-align: -3px; flex-shrink: 0; margin-right: 5px; }
.mytabs .pill .plogo { margin-right: 6px; } .mytabs .pill[aria-selected="true"] .plogo path[fill="#000000"] { fill: #fff; }
/* 1014 N52 소스 창고 그림 크게 보기 */
.libdlg { position: fixed; inset: 0; z-index: 90; background: rgba(12, 10, 9, .72); display: flex; align-items: center; justify-content: center; padding: 24px; }
.libdlg-in { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; width: min(1280px, 100%); height: calc(100vh - 48px); max-height: calc(100vh - 48px); background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.libdlg-img { background: #111; display: flex; align-items: center; justify-content: center; min-height: 0; } .libdlg-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.libdlg-side { display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow: auto; min-width: 0; }
.ldsec { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ldsec .libkw { display: flex; flex-wrap: wrap; gap: 6px; }
.ldprompt { white-space: pre-wrap; word-break: break-word; font: 14px/1.6 var(--font-body, inherit); background: var(--bg, #f5f5f4); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 0; max-height: 42vh; overflow: auto; }
@media (max-width: 860px) { .libdlg { padding: 0; } .libdlg-in { grid-template-columns: 1fr; grid-template-rows: 55vh auto; max-height: 100vh; height: 100vh; border-radius: 0; overflow: auto; } }
.utable .xtag { min-height: 0; padding: 0 8px; line-height: 20px; font-size: 13px; display: inline-block; }   /* 1014 N52 계산 근거 칩 — 줄 높이 그대로 */
/* 1014 N53 소스 창고 — [새 콘텐츠를 만들 때] · 검색 한 줄(각각 반) */
.librow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.librow .libreuse { margin: 0; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; } .librow .libreuse .sec-h { margin: 0; flex-wrap: wrap; gap: 8px; }
.librow .libsearch { margin: 0; align-self: stretch; }
@media (max-width: 900px) { .librow { grid-template-columns: 1fr; } }
/* 1014 N53 성과 추이 여러 줄 · 마우스 상자 · 지도에 영상 하나 */
.pfchart { position: relative; } .pflegend { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.pfleg { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; cursor: pointer; } .pfleg[aria-pressed="false"] { opacity: .45; } .pfleg i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.pfline2 { width: 100%; height: auto; display: block; overflow: visible; } .pfl2 { fill: none; stroke-width: 2.2; stroke-linejoin: round; } .pfd2 { stroke: var(--surface); stroke-width: 1; }
.pfv2 { font-size: 13px; fill: var(--ink-2); font-variant-numeric: tabular-nums; } .pfx2 { font-size: 13px; fill: var(--muted); } .pfax { font-size: 13px; fill: var(--muted); opacity: .8; }
.pfvl { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 4; } .pfhd { stroke: var(--surface); stroke-width: 2; }
.pfbox { position: absolute; z-index: 4; pointer-events: none; background: var(--ink); color: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 190px; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.pfbox i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .pfbox em { font-style: normal; opacity: .85; } .pfbox em.up { color: #5eead4; } .pfbox em.down { color: #fca5a5; } .pfbox .muted { color: rgba(255, 255, 255, .7); }
.pfvsel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: rgba(15, 118, 110, .08); font-size: 14px; margin-bottom: 8px; }
[data-pfprow].on td { background: rgba(15, 118, 110, .08); } [data-pfvid] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; cursor: pointer; }

/* 1014 N54 대표 지시 11:37 — 모든 화면의 분류 탭(role="tablist")을 폴더 탭 모양으로 통일
 * 위 모서리만 둥근 탭 · 아래에 메인 색(청록) 띠 · 고른 탭 = 메인 색 바탕 + 흰 글자 · 안 고른 탭 = 지금처럼 흰 바탕 + 테두리 */
[role="tablist"] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 4px; row-gap: 6px; padding: 0 2px; border-bottom: 3px solid var(--teal); background: none; border-radius: 0; }
[role="tablist"] > [role="tab"] { box-sizing: border-box; min-height: 56px; padding: 0 22px; margin: 0 0 -3px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line-2); border-bottom: 3px solid var(--teal); border-radius: 12px 12px 0 0; background: var(--surface); color: var(--ink); font: 500 17px var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: none; flex: none; }
[role="tablist"] > [role="tab"]:hover { background: var(--teal-light); }
[role="tablist"] > [role="tab"][aria-selected="true"] { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; padding: 0 22px; }
[role="tablist"] > [role="tab"][aria-selected="true"] .muted, [role="tablist"] > [role="tab"][aria-selected="true"] small { color: rgba(255, 255, 255, .85); }
[role="tablist"] > [role="tab"]:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; }
/* 편집기 옆 칸처럼 좁은 곳 — 칸을 나눠 꽉 채움 */
.edn-tabs[role="tablist"] { flex-wrap: nowrap; padding: 0; } .edn-tabs[role="tablist"] > [role="tab"] { flex: 1; min-width: 0; padding: 0 4px; min-height: 36px; font-size: 13px; }
.edn-tabs.sm[role="tablist"] > [role="tab"] { min-height: 32px; font-size: 13px; }
/* 1014 N58 하위 탭(편집기 오른쪽 [자막] 안의 제목 · 자막 등) — 같은 청록 결이지만 옅게: 띠 · 테두리 옅은 청록 · 고른 탭 = 옅은 청록 바탕 + 청록 글자 */
.edn-tabs.sm[role="tablist"], [role="tablist"].subtabs { border-bottom: 2px solid #7FBFB8; margin-top: 4px; }
.edn-tabs.sm[role="tablist"] > [role="tab"], [role="tablist"].subtabs > [role="tab"] { border-color: #B9DCD8; border-bottom: 2px solid #7FBFB8; margin-bottom: -2px; border-radius: 10px 10px 0 0; background: var(--surface); color: var(--ink-2); }
.edn-tabs.sm[role="tablist"] > [role="tab"][aria-selected="true"], [role="tablist"].subtabs > [role="tab"][aria-selected="true"] { background: #DDF0EE; color: var(--teal); border-color: #7FBFB8; font-weight: 700; }
.edn-tabs.sm[role="tablist"] > [role="tab"]:hover, [role="tablist"].subtabs > [role="tab"]:hover { background: #EEF7F6; }
html.nu-hc .edn-tabs.sm[role="tablist"] > [role="tab"][aria-selected="true"] { background: #fff; color: #000; border-color: #000; }
@media (max-width: 600px) { [role="tablist"]:not(.edn-tabs) { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } [role="tablist"] > [role="tab"] { padding: 0 16px; } }
/* 1014 N55 쇼핑쇼츠 상세페이지 캡처 조각 작게 보기 · 빼기 */
.s2thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .s2thumbs:empty { display: none; }
.s2th { position: relative; margin: 0; width: 72px; height: 96px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--bg); }
.s2th img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; cursor: zoom-in; }
.s2th figcaption { position: absolute; left: 4px; bottom: 4px; font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; }
.s2th .s2thx { position: absolute; top: 0; right: 0; width: 44px; height: 44px; min-height: 44px; border: 0; background: none; color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px; }
.s2th .s2thx::before { content: '✕'; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; } .s2th .s2thx { font-size: 0; } .s2th .s2thx::before { font-size: 13px; }   /* 누르는 곳 44px */
/* 1014 N57 새 대본 작업실 — 왼쪽 기획표 · 오른쪽 완성본(제목 > 인트로 > 글 > 그림 …) */
.xtabs { margin: 0 0 14px; }
.artgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }   /* 1014 N58 결과가 있으면 기획표 5 : 완성본 7 */
.artgrid.solo { grid-template-columns: minmax(0, 1fr); } .artgrid.solo [data-artdoc] { display: none; }   /* 결과가 없으면 기획표를 넓게(빈 오른쪽 칸 없음) */
.artcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; } .artcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.artgrid.solo .artcols { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); } .artgrid.solo .artcol[data-artcol="a"] textarea#aGuide { min-height: 180px; }
.artgrid [data-artform] .lmsel3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .artgrid [data-artform] select.inp { text-overflow: ellipsis; }
@media (max-width: 1100px) { .artgrid, .artgrid.solo .artcols { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .artgrid [data-artform] .lmsel3 { grid-template-columns: 1fr; } }
.artopts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.artck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; } .artck input { width: 20px; height: 20px; }
.artnum { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; } .artnum .inp { width: auto; min-width: 84px; } .artnum[hidden] { display: none; }
.artdoc { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; line-height: 1.75; font-size: 16px; }
.artdoc h1 { font-size: 26px; line-height: 1.35; } .artdoc h2 { font-size: 20px; margin-top: 8px; }
.artintro { font-size: 17px; color: var(--ink); } .artoutro { border-top: 1px solid var(--line-2); padding-top: 12px; }
.arttoc { background: var(--beige-2); border-radius: 12px; padding: 12px 18px; } .arttoc ol { margin: 6px 0 0 20px; }
.artsec { display: flex; flex-direction: column; gap: 10px; }
.artfig { margin: 4px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .artfig img { width: 100%; border-radius: 12px; display: block; }
.artfig figcaption { font-size: 13px; color: var(--muted); }
.artph { width: 100%; aspect-ratio: 3 / 2; border: 2px dashed var(--line-2); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 16px; text-align: center; color: var(--ink-2); background: var(--bg); font-size: 14px; }
.artmap { border-top: 1px solid var(--line-2); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .artmap img { width: 100%; max-width: 640px; border-radius: 12px; }
/* 1014 N59 그림 스타일 고르기 — 소스 창고처럼 미리보기 카드 + 왼쪽 위 체크 */
.artstyles[hidden] { display: none; } .artstyles { display: flex; flex-direction: column; gap: 8px; }
.stygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.libc.sty { position: relative; margin: 0; border: 2px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--surface); cursor: pointer; }
.libc.sty.sel { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-light); }
.libc.sty .libsel { width: 44px; height: 44px; top: 4px; left: 4px; }
.stypv { aspect-ratio: 4 / 3; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.stypv img { width: 100%; height: 100%; object-fit: cover; display: block; } .stypv:has(img) { padding: 0; }
.libc.sty figcaption { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; font-size: 13px; } .libc.sty figcaption b { font-size: 14px; } .libc.sty figcaption span { color: var(--muted); line-height: 1.35; }
.sty-hyper { background: radial-gradient(circle at 35% 40%, #f6e7c8 0 18%, #c9893b 30%, #3a2a1a 75%); }
.sty-realism { background: linear-gradient(180deg, #a9d3f0 0 45%, #6f9b5b 45% 100%); }
.sty-cinematic { background: linear-gradient(180deg, #000 0 14%, #0f3c4a 14%, #d08b3a 70%, #000 86% 100%); }
.sty-illust { background: radial-gradient(circle at 70% 30%, #f3c98b 0 16%, transparent 17%), linear-gradient(160deg, #e9d8c2, #b9c9b4); }
.sty-bw { background: linear-gradient(135deg, #f2f2f2, #6b6b6b 55%, #111); }
.sty-water { background: radial-gradient(circle at 30% 35%, rgba(126,178,221,.85), transparent 45%), radial-gradient(circle at 70% 65%, rgba(240,167,190,.8), transparent 45%), #fbf8f2; }
.sty-render3d { background: radial-gradient(circle at 40% 45%, #ffd6e0 0 22%, #f7b6c8 30%, transparent 31%), linear-gradient(180deg, #e8e4ff, #cfd8ff); }
.sty-anime { background: radial-gradient(circle at 75% 25%, #fff 0 8%, transparent 9%), linear-gradient(180deg, #4fa3ff, #b9e1ff 70%, #7ed48b 70%); }
.sty-flat { background: linear-gradient(90deg, #ffcf56 0 33%, #ff6b5a 33% 66%, #2f6f8f 66%); }
.sty-film { background: linear-gradient(160deg, #e7b77d, #a8735a 60%, #5b4a3f); filter: sepia(.25) saturate(.9); }
.sty-oil { background: repeating-linear-gradient(115deg, #2f4f6f 0 8px, #4f7f8f 8px 14px, #c99a4b 14px 20px, #7a4a2a 20px 26px); }
.sty-sketch { background: repeating-linear-gradient(45deg, #fafafa 0 5px, #d8d8d8 5px 6px), #fafafa; color: #333; text-shadow: none; }
.sty-ugc { background: linear-gradient(160deg, #f4e3d3, #d9b9a0); } .sty-origami { background: linear-gradient(135deg, #f6efe2 0 50%, #e8a07a 50%); }
/* 1014 N61 글 먼저 깔끔하게 — 아직 안 그린 그림 자리는 작은 표시만 · 그림은 ② 단계 · 지도 기본 고르기 */
.artpins { display: flex; flex-wrap: wrap; gap: 6px; } .artpin { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px dashed var(--line-2); border-radius: 999px; font-size: 12px; color: var(--muted); background: var(--bg); }
.artpin.done { border-style: solid; border-color: var(--teal); color: var(--teal); }
.artstep { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.artmapsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .artmapsel .inp { width: auto; min-width: 200px; }
[data-artimgsum][hidden] { display: none; }
/* 1014 N61 원클릭 블로그 카드뉴스 장수 */
.bcards { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bcards[hidden] { display: none; } .bcards .inp { width: auto; min-width: 120px; }
/* 1014 N61 간편 모드(글자 17px 이상)에서도 스타일 카드 글자 크게 — 원클릭 블로그 · 대본 작업실 같이 씀 */
html:not([data-mode="expert"]) .stygrid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
html:not([data-mode="expert"]) .libc.sty figcaption b, html:not([data-mode="expert"]) .libc.sty figcaption span { font-size: 17px; }
/* 1014 N62 카드뉴스 완성본 · 템플릿 세트 고르기 · 넘겨 보기 */
.cdone { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 12px; }
.cdmain, .cdside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cdsub { font-size: 14px; font-weight: 400; }
/* N71: 이름이 겹쳐 '콘텐츠 열기'(.cdgrid 두 칸) 화면이 좁은 칸 여러 개로 깨지던 것 — 카드 격자는 .cdcgrid 로만 */
.cdgrid.cdcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 10px; align-items: stretch; }
.cdc { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 2px solid var(--line-2); background: var(--surface); }
.cdc:hover, .cdc:focus-visible { border-color: var(--teal); }
.cdc.warn { border-color: #F2A777; }
.cdc canvas { width: 100%; aspect-ratio: 4 / 5; display: block; }
.cdc .no { position: absolute; left: 8px; top: 8px; background: rgba(28,25,23,.78); color: #fff; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.cdc .fl { position: absolute; right: 6px; top: 8px; background: #C2410C; color: #fff; font-size: 12px; border-radius: 999px; padding: 2px 8px; }
.cdc .rl { position: absolute; left: 8px; bottom: 8px; background: rgba(255,255,255,.92); color: #1C1917; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
.cdcap { font-size: 15px; line-height: 1.65; margin: 6px 0 4px; } .cdtags { font-size: 15px; color: var(--teal); margin: 0 0 4px; word-break: keep-all; }
.cdp { font-size: 14px; line-height: 1.55; margin: 4px 0 8px; }
.cdside .xcard { display: flex; flex-direction: column; gap: 10px; }
.cdside .btn.wide { width: 100%; justify-content: center; }
.cdck { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; } .cdck input { width: 18px; height: 18px; accent-color: var(--teal); }
/* 1014 N65 장수 바꿔 다시 만들기 */
.cdredo { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 14px; } .cdredo select { min-height: 44px; min-width: 104px; font-size: 15px; } [data-cdredobox] .xrow { flex-wrap: wrap; }
.cdchk { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14px; line-height: 1.45; } .cdchk b { font-weight: 600; }
.cdchk .ic { flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: #DDF0EE; color: #0F766E; }
.cdchk.no .ic { background: #FDE7DA; color: #C2410C; }
@media (max-width: 1100px) { .cdone { grid-template-columns: minmax(0, 1fr); } }
.overlay[data-dlg="cardsets"] { align-items: stretch; padding: 24px; }
.csets { background: var(--bg); border-radius: 18px; width: min(1480px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 0; overflow: auto; max-height: calc(100vh - 48px); }
.csets h2 { font-size: 22px; margin: 0; } .csh { align-items: center; }
.csgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 4px 0 12px; }
.cst { background: var(--surface); border: 2px solid var(--line-2); border-radius: 14px; padding: 10px; cursor: pointer; } .cst[hidden] { display: none; }
.cst.sel { border-color: var(--teal); box-shadow: 0 0 0 3px #CDEAE6; } .cst:focus-visible { outline: 3px solid var(--teal); }
.cscv { position: relative; border-radius: 10px; overflow: hidden; touch-action: pan-y; } .cscv canvas { width: 100%; aspect-ratio: 4 / 5; display: block; }
.csar { position: absolute; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: 22px; font-weight: 700; color: #1C1917; cursor: pointer; }
.csar.l { left: 6px; } .csar.r { right: 6px; } .csar[hidden] { display: none; }
.csck { position: absolute; left: 8px; top: 8px; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.csmeta { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-top: 8px; } .csmeta b { display: block; font-size: 15px; } .csmeta span { font-size: 13px; color: var(--muted); } .cspg { white-space: nowrap; }
.csdots { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; } .csdots i { width: 6px; height: 6px; border-radius: 3px; background: #D6D3D1; } .csdots i.on { width: 14px; background: var(--teal); }
.csfoot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 4px 18px; background: var(--bg); border-top: 1px solid var(--line-2); font-size: 15px; }
.overlay[data-dlg="cardprev"] { background: rgba(28,25,23,.88); }
.cprev { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-height: 100vh; overflow: auto; }
.cptop { display: flex; align-items: center; gap: 12px; color: #fff; width: min(900px, 100%); } .cptop b { font-size: 18px; } .cptop span { opacity: .75; font-size: 14px; flex: 1; }
.cprow { display: flex; align-items: center; gap: 28px; }
.cpar { width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 28px; cursor: pointer; } .cpar:disabled { opacity: .3; cursor: default; }
.cphone { width: min(400px, 78vw); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cphd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px; } .cphd .av { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); } .cphd .pg { margin-left: auto; color: #78716C; font-size: 13px; }
.cphone canvas { width: 100%; aspect-ratio: 4 / 5; display: block; touch-action: pan-y; }
.cpdots { display: flex; justify-content: center; gap: 5px; padding: 8px 0 2px; } .cpdots i { width: 6px; height: 6px; border-radius: 50%; background: #D6D3D1; } .cpdots i.on { background: var(--teal); }
.cpcap { font-size: 14px; line-height: 1.5; margin: 6px 14px 12px; color: #1C1917; }
.cpthumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .cpthumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; opacity: .6; cursor: pointer; min-height: 44px; }
.cpthumbs button.on { border-color: #5EEAD4; opacity: 1; } .cpthumbs canvas { width: 54px; height: 68px; border-radius: 6px; display: block; }
.cphint { color: #fff; opacity: .7; font-size: 13px; margin: 0 0 8px; }
/* 1014 N64 비밀 실험실(대표만) */
.mlwrap { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.mlcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } @media (max-width: 1000px) { .mlcols { grid-template-columns: minmax(0, 1fr); } }
.mlgrp { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .mlgrp > b { font-size: 14px; }
.mlchk { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mlck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; } .mlck input { width: 18px; height: 18px; accent-color: var(--teal); }
.mlgrid { display: grid; gap: 14px; margin-top: 12px; } .mlgrid.image { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .mlgrid.text { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.mlgrid.sm.image { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .mlgrid.sm.text { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mlcell { border: 2px solid var(--line-2); border-radius: 14px; padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mlcell.best { border-color: var(--teal); box-shadow: 0 0 0 3px #CDEAE6; } .mlcell.fail { border-color: #F2A777; } .mlcell.run { opacity: .75; }
.mlcell img { width: 100%; border-radius: 10px; display: block; background: var(--bg); }
.mlimg { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.mlch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; } .mlch b { word-break: break-all; }
.mlmeta { font-size: 13px; line-height: 1.5; margin: 0; } .mlmeta b { font-size: 15px; }
.mlpick { gap: 10px; align-items: center; } .mlsc { width: auto; min-width: 70px; }
.mltext { max-height: 420px; overflow: auto; font-size: 14px; line-height: 1.65; border-top: 1px solid var(--line-2); padding-top: 8px; } .mltext h3 { font-size: 17px; margin: 0 0 6px; } .mltext h4 { font-size: 15px; margin: 8px 0 4px; } .mltext pre { white-space: pre-wrap; font-size: 13px; }
.mlrun { border-top: 1px solid var(--line-2); padding: 10px 0; } .mlrun summary { cursor: pointer; min-height: 44px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.mltbl { overflow-x: auto; } .mltbl table { width: 100%; border-collapse: collapse; font-size: 14px; } .mltbl th, .mltbl td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; } .mltbl th { font-size: 13px; color: var(--muted); }

/* 1014 N66 대본 작업실 글 아래 — 이미지 전체 다운로드 · 쇼츠 · 릴스 만들기 · #/art2short */
.artnext { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line, #E7E5E4); }
.artnext .btn.xl { min-height: 60px; font-size: 18px; justify-content: center; } .artnext .artshort { background: var(--ink); color: #fff; border-color: var(--ink); }
.a2s { display: flex; flex-direction: column; gap: 16px; max-width: 880px; margin: 14px auto 0; }
.a2snote { display: flex; gap: 14px; align-items: flex-start; background: #E6F4F1; border: 1px solid var(--teal); border-radius: 18px; padding: 18px 20px; animation: bzIn .3s ease-out; }
.a2snote .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.a2snote b { font-size: 18px; } .a2snote p { margin: 4px 0 0; font-size: 16px; color: var(--ink-2); }
.a2st { font-size: 18px; font-weight: 700; margin: 4px 0; }
.a2sth { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .a2sth img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; } .a2sth span { align-self: center; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .a2snote { padding: 14px; } .artnext .btn.xl { font-size: 16px; } }

/* 1014 N66 마우스를 올리면 2배 크게(그림 스타일 카드 등) */
.zoom2 { position: fixed; z-index: 400; pointer-events: none; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.35); border: 3px solid #fff; animation: zoom2In .16s ease-out; }
.zoom2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes zoom2In { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .zoom2 { animation: none; } }
/* 1021 대표 지시 18:37 "마우스 올리면 보이는 미리보기 30% 키워줘" — 크게 보기 배율은 여기 한 곳(NU.hoverZoom 이 읽음 · 그림 스타일 2배 → 2.6배 · 편집기 소스 · 템플릿 2.5배 → 3.25배 · 소스 창고 2배 → 2.6배) */
:root { --hz-boost: 1.3; }
.zoom2 canvas { width: 100%; height: 100%; display: block; }

/* 1021 그림 스타일 19개 더 — 묶음 머리글(사진 · 그림 · 3D · 특수) · 예시 그림 없는 스타일 = "견본 준비 중" 카드(그 스타일 색 · 이름) */
.stygh { grid-column: 1 / -1; margin: 8px 0 -2px; font-size: 14px; font-weight: 700; color: var(--ink-2); } .stygh:first-child { margin-top: 0; } .stygh .muted { font-weight: 400; }
html:not([data-mode="expert"]) .stygh { font-size: 17px; }
.stypv-ph { position: relative; align-items: center; justify-content: center; text-align: center; padding: 10px; overflow: hidden; }
.stypv-ph b { background: rgba(0,0,0,.62); color: #fff; text-shadow: none; padding: 3px 8px; border-radius: 8px; font-size: 14px; line-height: 1.3; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.stypv-ph i { position: absolute; top: 8px; right: 8px; font-style: normal; font-weight: 600; font-size: 11px; line-height: 1.4; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.9); color: #333; text-shadow: none; }
html:not([data-mode="expert"]) .stypv-ph b { font-size: 17px; }   /* 1021 묶음 — 간편 모드 글자 17px 이상(1013 N38 · web_new149) */
html:not([data-mode="expert"]) .stypv-ph i { font-size: 17px; top: auto; bottom: 6px; right: 50%; transform: translateX(50%); white-space: nowrap; }
.sty-doc { background: linear-gradient(180deg, #a3abb0 0 52%, #5d5a52 52% 100%); filter: saturate(.6); }
.sty-product { background: radial-gradient(ellipse at 50% 82%, rgba(0,0,0,.2) 0 16%, transparent 17%), radial-gradient(circle at 50% 30%, #fff 0 30%, #e6eaee 75%); }
.sty-ink { background: radial-gradient(ellipse at 28% 72%, rgba(20,20,20,.8) 0 10%, rgba(20,20,20,.28) 28%, transparent 44%), radial-gradient(ellipse at 78% 30%, rgba(20,20,20,.35), transparent 30%), linear-gradient(180deg, #f5f0e6, #e6decd); }
.sty-minhwa { background: radial-gradient(circle at 72% 32%, #d9412f 0 13%, transparent 14%), radial-gradient(circle at 28% 70%, #2f6db2 0 15%, transparent 16%), radial-gradient(circle at 55% 78%, #3f8f5a 0 9%, transparent 10%), linear-gradient(135deg, #efe0bd, #d8c08a); }
.sty-popart { background: radial-gradient(circle, rgba(0,0,0,.3) 1.5px, transparent 2px) 0 0 / 8px 8px, linear-gradient(135deg, #ffde00 0 50%, #ff2d7a 50%); }
.sty-crayon { background: repeating-linear-gradient(-20deg, rgba(255,90,90,.55) 0 4px, transparent 4px 11px), repeating-linear-gradient(15deg, rgba(70,160,255,.45) 0 3px, transparent 3px 13px), #fffdf6; }
.sty-woodcut { background: repeating-linear-gradient(170deg, #1d1d1d 0 3px, #efe8da 3px 8px); }
.sty-webtoon { background: radial-gradient(circle at 50% 42%, #ffe2cf 0 20%, transparent 21%), linear-gradient(180deg, #8fd3ff, #e6f6ff); }
.sty-retro80 { background: repeating-linear-gradient(90deg, rgba(255,79,216,.7) 0 1px, transparent 1px 14px) 0 100% / 100% 38% no-repeat, linear-gradient(180deg, #2b0f4c 0%, #ff3fa4 52%, #ffb347 62%, #1a0833 62%); }
.sty-silhouette { background: radial-gradient(ellipse at 50% 100%, #141414 0 32%, transparent 33%), linear-gradient(180deg, #ff8a3d, #ffd36b); }
.sty-collage { background: linear-gradient(8deg, transparent 0 40%, #f1e3c6 40% 62%, transparent 62%), linear-gradient(-12deg, #9fc5e8 0 35%, #e57373 35% 58%, #fff3cd 58%); }
.sty-stained { background: repeating-linear-gradient(60deg, #222 0 2px, transparent 2px 26px), repeating-linear-gradient(-60deg, #222 0 2px, transparent 2px 26px), conic-gradient(from 20deg, #c0392b, #f1c40f, #27ae60, #2980b9, #8e44ad, #c0392b); }
.sty-pixel { background: linear-gradient(180deg, #6ec6ff 0 58%, transparent 58%), conic-gradient(#5ac05a 25%, #3e9a3e 0 50%, #5ac05a 0 75%, #3e9a3e 0) 0 0 / 16px 16px; image-rendering: pixelated; }
.sty-clay { background: radial-gradient(circle at 35% 56%, #ff9f68 0 18%, transparent 19%), radial-gradient(circle at 66% 50%, #7ec8a9 0 15%, transparent 16%), linear-gradient(180deg, #f6dcc0, #e3b98f); }
.sty-neon { background: radial-gradient(circle at 25% 30%, rgba(255,0,200,.75), transparent 35%), radial-gradient(circle at 75% 62%, rgba(0,230,255,.7), transparent 35%), #0b0b1e; }
.sty-iso { background: conic-gradient(from 210deg at 50% 55%, #f7d9a8 0 120deg, #f3b8a0 0 240deg, #b8d8f0 0); }
.sty-infographic { background: linear-gradient(#2f80ed, #2f80ed) 18% 100% / 14% 62% no-repeat, linear-gradient(#56ccf2, #56ccf2) 43% 100% / 14% 40% no-repeat, linear-gradient(#f2994a, #f2994a) 68% 100% / 14% 82% no-repeat, #f7f9fc; }
.sty-blueprint { background: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px) 0 0 / 16px 16px, #1f4e8c; }
.sty-chibi { background: radial-gradient(circle at 50% 38%, #ffe0d1 0 22%, transparent 23%), radial-gradient(ellipse at 50% 88%, #ffb3c7 0 22%, transparent 23%), linear-gradient(180deg, #fff1f6, #e8f0ff); }

/* 1014 N67 쇼핑 영상 사진 — 끌어서 순서 바꾸기 */
.pplan li.pdrag { cursor: grab; } .pplan li.pdrag:active { cursor: grabbing; }
.pplan .pgrip { flex: none; width: 22px; text-align: center; font-size: 20px; color: var(--muted); user-select: none; } .pplan .pgrip.lock { font-size: 14px; }
.pplan li.dragging { opacity: .45; }
.pplan li.dropb { box-shadow: inset 0 4px 0 var(--teal); } .pplan li.dropa { box-shadow: inset 0 -4px 0 var(--teal); }
/* 1014 N68 대표 지시 20:17 "직접 고치기 단추가 눈에 잘 안 들어옴" — 청록 바탕 · 진한 테두리 · 오른쪽 둥근 화살표 */
.card.dash[data-edit], .card.dash[data-expert] { border: 2px solid var(--teal); background: #E6F4F1; box-shadow: 0 4px 14px rgba(15, 118, 110, .12); transition: background .15s, transform .15s; }
.card.dash[data-edit]:hover, .card.dash[data-expert]:hover { background: #D3EDE8; transform: translateY(-1px); }
.card.dash[data-edit] b, .card.dash[data-expert] b { color: var(--teal); } .card.dash[data-edit] .t span, .card.dash[data-expert] .t span { color: var(--ink-2); }
.card.dash[data-edit] > svg, .card.dash[data-expert] > svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--teal); color: #fff; flex: none; }
.card.dash[data-edit][aria-busy="true"], .card.dash[data-edit]:disabled { opacity: .85; cursor: progress; }

/* 1014 N68 쇼핑 영상 — 목소리 골라 쓰기(편집기와 같은 목록) */
.svpick { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.svpick > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-height: 32px; }
.svlist { max-height: 340px; overflow: auto; margin-top: 8px; }
/* N71 카드뉴스 첫 화면 — 템플릿 세트 미리보기(고르면 새로 만드는 카드뉴스에 바로) */
.csstart { grid-column: 1 / -1; }
.cmi.cssel { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; }
.cmi.cssel canvas { border: 2px solid var(--line); }
.cmi.cssel:hover canvas, .cmi.cssel:focus-visible canvas { border-color: var(--teal); }
.cmi.cssel[aria-pressed="true"] canvas { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,118,110,.25); }
.cmi.cssel[aria-pressed="true"] b::before { content: '✓ '; color: var(--teal); }

/* 1015 N73 세로 영상 ① 4가지 출발점(새 주제 · 블로그 · 긴 영상 · 내 대본) · 내 대본 칸 · 목소리 골라 쓰기(고르면 테두리) */
.choices.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .choices.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vscript textarea { width: 100%; min-height: 200px; font-size: 17px; line-height: 1.6; resize: vertical; padding: 12px 14px; }
.svpick.on { border: 2px solid var(--teal); padding: 9px 11px; } .svpick.on [data-vpcur] { color: var(--teal); font-weight: 600; }
.play.playing { background: var(--teal); color: var(--surface); } .play .pz { font-size: 13px; letter-spacing: -1px; }

/* 1015 N73 세로 영상 ② 만드는 중 — 대표 "너무 투박해 · 진행 중인 것도 안 나와": 전체 % 고리 · 지난 시간 · 도는 점 · 세부 단계 · 줄거리 미리 보기 */
.vprog .vphero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; align-items: center; padding: 20px 22px; border-radius: 18px; background: linear-gradient(135deg, var(--surface) 0%, var(--teal-light, #E6F2F0) 100%); border: 1px solid var(--line); }
.vprog .vphero .bigt { margin: 0; } .vprog .vphero [data-left] { margin: 4px 0 0; font-size: 17px; }
.vprog .vptime { margin: 6px 0 0; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vprog .vpbar { grid-column: 1 / -1; height: 8px; } .vprog .vpbar > i { transition: width .8s ease; background: linear-gradient(90deg, var(--teal), #14B8A6); }
.vring { --p: 0; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--teal) calc(var(--p) * 1%), var(--track) 0); transition: background .6s; position: relative; }
.vring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.vring b { position: relative; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ink); }
.vprog .vpsteps { display: flex; flex-direction: column; gap: 10px; }
.vprog .stepcard { min-height: 60px; padding: 12px 18px; transition: border-color .3s, box-shadow .3s; }
.vprog .stepcard .r { font-size: 18px; } .vprog .stepcard .st { font-size: 15px; font-variant-numeric: tabular-nums; }
.vprog .stepcard .dot { width: 30px; height: 30px; }
.vprog .stepcard.now { padding: 11px 17px; box-shadow: 0 6px 22px rgba(15, 118, 110, .12); }
.vprog .stepcard.now .dot { border-color: rgba(15, 118, 110, .2); position: relative; } .vprog .stepcard.now .dot::after { display: none; }
.vspin { position: absolute; inset: -3px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--teal); border-right-color: var(--teal); animation: spin .9s linear infinite; }
.vprog .stepcard.wait { background: transparent; border-style: dashed; } .vprog .stepcard.wait .r { color: var(--muted); }
.vprog .stepcard .bar { height: 8px; }
.vsub { display: flex; gap: 6px 14px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0 0 0 44px; font-size: 14px; color: var(--muted); }
.vsub li { padding: 3px 10px; border-radius: 999px; background: var(--beige-2); } .vsub li.ok { color: var(--teal); background: var(--teal-light, #E6F2F0); font-weight: 600; }
.vsub li.now { color: var(--surface); background: var(--teal); font-weight: 600; animation: tbpulse 1.6s ease-in-out infinite; }
.vnow { margin: 0; padding-left: 44px; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpprev .vpoints { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.vfade { animation: vfadeIn .5s ease both; } @keyframes vfadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vwrite { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 16px; }
.vdots { display: inline-flex; gap: 4px; } .vdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: vdot 1.2s ease-in-out infinite; } .vdots i:nth-child(2) { animation-delay: .15s; } .vdots i:nth-child(3) { animation-delay: .3s; }
@keyframes vdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.skel.shim { background: linear-gradient(90deg, var(--beige-2) 0%, #F7F4EE 50%, var(--beige-2) 100%); background-size: 200% 100%; animation: vshim 1.4s linear infinite; } @keyframes vshim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.vtip { margin-top: auto; padding: 10px 12px; border-radius: 10px; background: var(--beige-2); font-size: 15px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .vspin, .vdots i, .skel.shim, .vsub li.now, .vfade { animation-duration: 3s; } }
@media (max-width: 767px) { .vring { width: 64px; height: 64px; } .vsub, .vnow { padding-left: 0; } }
.vprog .vphero.wait { background: linear-gradient(135deg, var(--surface) 0%, var(--accent-light, #FDF0EA) 100%); border-color: var(--accent-line, #F2C4AE); } .vprog .vphero.wait .vptime { color: var(--accent-press, #9A3412); font-weight: 600; }
.vprog .vpwait { border: 2px solid var(--accent-line, #F2C4AE); background: var(--accent-light, #FDF0EA); padding: 16px 18px; } .vprog .vpwait p { margin: 0 0 10px; font-size: 17px; }

/* 1015 N75 제작 지시서(관제탑 ④ 감정 연출) 미리 보기 — 장면 · 화면 · v4 감정 태그 */
.impcard { border: 2px solid var(--teal); border-radius: 12px; padding: 12px 14px; background: var(--teal-light, #E6F2F1); display: flex; flex-direction: column; gap: 8px; }
.impcard .imphead { display: flex; flex-direction: column; gap: 2px; } .impcard .imphead b { font-size: 17px; }
.implist { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; font-size: 15px; line-height: 1.5; }
.implist .muted { font-size: 13px; }
.vtag { color: var(--teal); font-weight: 700; font-size: .92em; }
.impcard .btn { align-self: flex-start; }
/* 1016 N79 [자동 제작] 탭 · 승인 대기 자동 제작 줄 */
.autoprod .arow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.autoprod .arow > span{min-width:9em;font-weight:600}
.autoprod .arow select{flex:1 1 12em;max-width:22em}
.autoprod .alog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.autoprod .alog li.err{color:var(--danger, #B91C1C)} .autoprod .alog li.ok{color:var(--teal, #0F766E)} .autoprod .alog li.warn{color:var(--accent, #C2410C)}
/* 1019 N-FIX 고칠 편(자동 제작) · [대본 고치기](#/vfix) */
.autoprod .afail li{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line-2)} .autoprod .afail li:first-child{border-top:0}
.autoprod .afail .afh{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .autoprod .afail .gobar{margin:0} .autoprod .afail .btn{min-height:44px}
.vfix .vfsum{position:sticky;top:8px;z-index:3} .vfix .vfhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:18px} .vfix .vfhead b{font:700 28px/1.1 var(--font-heading)}
.vfix .vfbar{position:relative;height:14px;border-radius:999px;background:var(--line-2);margin:12px 0 8px;overflow:hidden}
.vfix .vfbar .win{position:absolute;top:0;bottom:0;background:var(--ok-light, #D1FAE5);border-left:2px solid var(--ok, #047857);border-right:2px solid var(--ok, #047857)}
.vfix .vfbar .cur{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:var(--ok, #047857);border-radius:2px} .vfix .vfbar .cur.bad{background:var(--warn-ink, #B45309)}
.vfix .vflist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.vfix .vfrh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .vfix .vfrh > b{min-width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.vfix .vfrh .btn{min-height:44px;margin-left:auto} .vfix textarea.inp{min-height:76px;font-size:17px;line-height:1.55;padding:10px 14px;resize:vertical}
.mapv .autoline{font-size:15px;line-height:1.5;margin:4px 0 0;padding:6px 10px;border-radius:8px;background:var(--surface-2, #F5F5F4)}
.mapv .mvid{width:100%;max-height:70vh;aspect-ratio:9/16;object-fit:contain;border-radius:10px;background:#000;margin-top:8px}
/* 1016 N83 블로그 · 카드뉴스 만들기 화면 — 카드뉴스 템플릿 고르기 */
.bsetgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 520px; overflow: auto; padding: 4px; }
.bsauto { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border-radius: 10px; border: 2px dashed var(--line); background: var(--surface); font-weight: 700; font-size: 20px; color: var(--teal); }
.bsetgrid .cmi b, .bsetgrid .cmi .sub { font-size: 17px; }   /* 간편 모드 글자 17px 이상(N38) */
.cmi.cssel[aria-pressed="true"] .bsauto { border-style: solid; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,118,110,.25); }
/* 1016 N84 그림 크게 보기 — 왼쪽 · 오른쪽 넘기기 */
.thumbnav { display: flex; align-items: center; gap: 10px; justify-content: center; }
.thumbnav .thumbbig { margin: 0; min-width: 0; touch-action: pan-y; user-select: none; }
.tnav { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); }
.tnav:hover, .tnav:focus-visible { border-color: var(--teal); color: var(--teal); }
.tcount { text-align: center; margin: 6px 0 0; }
/* 1016 N89 모션 효과 모음(#/mglab) */
.mglab .mgwrap { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 20px; align-items: start; margin-top: 12px; }
.mglab .mgpv { position: sticky; top: 12px; }
.mglab .mgpv canvas { width: 100%; height: auto; aspect-ratio: 9 / 16; display: block; border-radius: 12px; background: #000; }
.mglab .mggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.mglab .mgcard { border: 1px solid var(--line, #d9dde5); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--card, #fff); }
.mglab .mgcard.cur { outline: 2px solid var(--accent, #3b6cf6); }
.mglab .mgcard.off { opacity: 0.5; }
.mglab .mgplay { all: unset; cursor: pointer; font-size: 16px; }
.mglab .mgplay:focus-visible { outline: 2px solid var(--accent, #3b6cf6); }
.mglab .mgbeat { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15px; }
.mglab .mgbeat td, .mglab .mgbeat th { border-bottom: 1px solid var(--line, #d9dde5); padding: 8px 6px; text-align: left; vertical-align: top; }
@media (max-width: 760px) { .mglab .mgwrap { grid-template-columns: 1fr; } .mglab .mgpv { position: static; max-width: 260px; } }
/* 1024 #/mgtypes 모션그래픽 틀 고르기 — 움직이는 견본 · 키트마다 체크 · 폰 375 한 줄 */
.mgtypes .mgtwrap { display: grid; grid-template-columns: minmax(220px, 290px) 1fr; gap: 20px; align-items: start; margin-top: 12px; }
.mgtypes .mgtside { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mgtypes .mgtside canvas { width: 100%; height: auto; aspect-ratio: 9 / 16; display: block; border-radius: 12px; background: #000; }
.mgtypes .mgtbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 44px; }
.mgtypes .mgtbar .btn { min-height: 44px; }
.mgtypes .mgtgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.mgtypes .mgt { display: grid; grid-template-columns: 92px 1fr; gap: 10px; border: 1px solid var(--line, #d9dde5); border-radius: 12px; padding: 8px; background: var(--card, #fff); }
.mgtypes .mgt.cur { outline: 2px solid var(--accent, #3b6cf6); }
.mgtypes .mgt.off .mgtpv { opacity: 0.4; filter: grayscale(0.8); }
.mgtypes .mgtpv { all: unset; cursor: pointer; display: block; border-radius: 8px; overflow: hidden; }
.mgtypes .mgtpv:focus-visible { outline: 2px solid var(--accent, #3b6cf6); }
.mgtypes .mgtpv canvas { width: 92px; height: auto; aspect-ratio: 9 / 16; display: block; background: #000; }
.mgtypes .mgtb { display: flex; flex-direction: column; gap: 3px; font-size: 15px; min-width: 0; }
.mgtypes .mgtnew { font-size: 13px; font-weight: 700; color: var(--accent-press, #b45309); }
.mgtypes .mgtchk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; cursor: pointer; }
.mgtypes .mgtchk input { width: 20px; height: 20px; }
@media (max-width: 760px) { .mgtypes .mgtwrap { grid-template-columns: 1fr; } .mgtypes .mgtside { position: static; max-width: 300px; } .mgtypes .mgtgrid { grid-template-columns: 1fr; } }

/* 1018 N95 네이버 블로그 발행(#/naver) · 승인함 한 줄 — 글자 13px 이상 · 누르는 곳 44px 이상 */
.naverpub .arow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;min-height:44px}
.naverpub .arow > span{min-width:9em;font-weight:600}
.naverpub .arow select,.naverpub .arow input{flex:1 1 12em;max-width:22em;min-height:44px}
.naverpub .nvmode .t span{font-size:15px}
.naverpub code,.dlg code{font-size:14px;word-break:break-all}
.naverpub .nvtok{display:block;padding:10px;border-radius:8px;background:var(--surface-2, #F5F5F4);user-select:all}
.naverpub .nverr{color:var(--accent-press)}
.naverpub .btn,.naverpub .lnk{min-height:44px;display:inline-flex;align-items:center}
.autoline[data-mnaver]{font-size:15px;line-height:1.5;margin:4px 0 0;padding:6px 10px;border-radius:8px;background:var(--surface-2, #F5F5F4)}
.autoline[data-mnaver] .min{font-size:14px}
/* 1101 블로그 한 편 = 한 건 — 그림 그리는 중 · 그림 기다림 줄 · [그림 없이 글만 지금 보내기] · 내 콘텐츠 묶음 카드의 네이버 줄 */
.nvimg{display:inline;overflow-wrap:anywhere}
.nvimg.wait{color:var(--ink)}
.nvimg .btn.sm{min-height:44px;margin:6px 0 0;display:inline-flex;align-items:center}
.nvimglist{margin:0 0 8px;padding-left:20px;overflow-wrap:anywhere}
.mynv{display:flex;flex-direction:column;gap:4px;min-width:0}
.mynv .lnk{min-height:44px;display:inline-flex;align-items:center}
.naverpub .nvmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.naverpub .stchip{flex-direction:row}
/* 1023 네이버 블로그 여러 개 — 블로그 칸 · 대기열 블로그 이름 · 보내기 창 "어느 블로그로?" */
.naverpub .nvblog{display:flex;flex-direction:column;gap:8px;padding:14px 0 4px;border-top:1px solid var(--line-2)}
.naverpub .nvbh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:18px}
.naverpub .nvbh .nvbname{overflow-wrap:anywhere}
.naverpub .nvbtag{display:inline-flex;align-items:center;font-size:14px;line-height:1.3;padding:2px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);background:var(--surface);overflow-wrap:anywhere}
.naverpub .nvwhy{color:var(--ink-2, var(--ink))}
.naverpub .nvaddbar{margin-top:6px}
.nvpick{border:0;padding:0;margin:12px 0 4px;min-width:0}
.nvpick legend{padding:0}
.nvpick .nvreq{font-size:14px;font-weight:600;color:var(--accent-press)}
.nvpick .bech{min-height:56px}
.nvpick .bech .t b{font-size:16px;overflow-wrap:anywhere}.nvpick .bech .t span{font-size:14px;overflow-wrap:anywhere}
/* 1023 만들 때 정한 블로그(보내기 창 "보낼 블로그: ○○ · 바꾸기") · 광고 글 비율 블로그마다 · 경고 기준(스튜디오 기준) */
.nvto{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:12px 0 4px;font-size:16px;overflow-wrap:anywhere}
.nvto .muted{font-size:14px}
.nvto .nvchg,.artnvchg{min-height:44px;font-size:16px;text-decoration:underline;text-underline-offset:3px}
/* 1023 한 번에 만들기 [올릴 블로그 (네이버)] · [광고 표시] — 대본 작업실 칸(b17.css .artg2 · .artnvad)과 같은 모양 · 좁은 화면은 한 칸 */
.ocnv .artg2{margin-top:4px}
.ocnv .artnvad{margin-top:10px}
@media (max-width:640px){.ocnv .artg2{grid-template-columns:minmax(0,1fr)}}
.nvgone{margin:12px 0 4px}
.naverpub .nvad{display:flex;flex-direction:column;gap:6px;padding:12px 0 4px;border-top:1px solid var(--line-2)}
.naverpub .nvad:first-of-type{border-top:0;padding-top:4px}
.naverpub .nvad p{margin:0}
.naverpub .nvadset{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px}
.naverpub .nvadset .arow{flex:1 1 18em;margin:0}
/* 1018 R494 승인 화면 검수표 */
.rvbox { border: 1px solid var(--line, #e5e1d8); border-radius: 12px; padding: 8px 12px; margin: 6px 0; background: var(--surface, #fff); }
.rvbox > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.rvbox .rvr { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; padding: 8px 0; border-top: 1px dashed var(--line, #e5e1d8); }
.rvbox .rvr > b { font-size: inherit; } .rvbox .rvl { margin: 4px 0 0; padding-left: 18px; } .rvbox .rvl li { margin: 4px 0; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 480px) { .rvbox .rvr { grid-template-columns: 1fr; gap: 4px; } }
.rvbox .rvmark { margin: 8px 0; } .rvbox .rvt { min-height: 56px; padding: 4px 12px; font-variant-numeric: tabular-nums; }   /* 1018 R494a 문제 시점 */
.rvbox .rvth { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .rvbox .rvth img { width: 90px; height: 160px; object-fit: cover; border-radius: 6px; background: #111; display: block; }
.rvbox .rvth small { display: block; font-size: inherit; } .stchip.idle { background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
/* 1018 R495C 승인 화면 검수표 — ⛔ 승인 전 해결 필요 · ① 글 비교 · ② 영상 · 소리 트랙 측정 · ③ 무료 자동 검수 vs 이미지 이해 · 문제 시점 유형 · 검수 의견 */
.rvbox .rvblock { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--accent-press, #b42318); background: var(--accent-light, #fdecea); }
.rvbox .rvblock > b { color: var(--accent-press, #b42318); font-size: 18px; } .rvbox .rvblock .rvl li { overflow-wrap: anywhere; }
.rvbox .rvsec { margin-top: 10px; padding-top: 6px; border-top: 2px solid var(--line, #e5e1d8); min-width: 0; }
.rvbox .rvh { font-size: 18px; line-height: 1.4; margin: 6px 0 2px; }
.rvbox .rvty { white-space: nowrap; } .rvbox .rvop { display: block; margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--line, #e5e1d8); background: var(--surface-2, #F5F5F4); line-height: 1.5; overflow-wrap: anywhere; }
html[data-mode="simple"] .mapv .autoline { font-size: 17px; }   /* 1018 R495C 간편 모드 폰 승인 — 자동 제작 줄도 17px(0929-9 글자 기준) */
/* 1019 UI-1 머리줄(홈 · 알림 줄) 바탕 = 앱 녹색(--teal) — 글자는 흰색 · 단추(알림 · 폰으로 이어하기 · 모드)는 흰 바탕 그대로 · 대비 AA(흰 글자/teal 5.4:1) */
.hdr { background: var(--teal); border-bottom-color: var(--teal-press); color: var(--surface); }
.hdr .back, .hdr .ttl, .hdr .ttl .n, .hdr .note-r, .hdr .htsub, .hdr .muted, .hdr .lnk, .hdr a:not(.btn):not(.bell):not(.xq-n) { color: var(--surface); }
.hdr a:not(.btn):not(.bell):focus-visible, .hdr .lnk:focus-visible { box-shadow: 0 0 0 3px var(--surface); border-radius: 6px; }
.hdr .btn.primary { background: var(--teal-press); border-color: var(--surface); color: var(--surface); }
.hdr .steps { color: var(--teal-light); }
.hdr .steps li.now, .hdr .steps li.done { color: var(--surface); }
.hdr .steps .c { border-color: var(--teal-light); }
.hdr .steps li.now .c, .hdr .steps li.done .c { background: var(--surface); border-color: var(--surface); color: var(--teal-press); }
.hdr .steps .ln { background: rgba(255, 255, 255, .4); } .hdr .steps .ln.on { background: var(--surface); }
html[data-mode="simple"] .pfheat .hh, html[data-mode="simple"] .pfheat .hc i { font-size: 17px; }   /* 1019 성과 분석이 대시보드(간편 모드에서도 보임)로 — 간편 최소 17px */
.mapvq { width: 100%; min-height: 56px; margin-bottom: 12px; }   /* 1019 폰 홈 — 승인 대기 바로가기(아래 메뉴에 승인이 없음) */
.hdr .hdr-tower { gap: 6px; min-height: 44px; background: var(--surface); color: var(--ink); border-color: var(--surface); }   /* 1020 누르는 곳 44px(전문가 화면 검사 web_new3·4·5 · 36px 이었음) */
/* 1019 */   /* 1019 머리줄 [컨트롤타워] — 홈 글자 옆 · 새 창 */
.hdr .hdr-tower svg { width: 18px; height: 18px; }
html[data-mode="simple"] .hdr .hdr-tower { min-height: 56px; }   /* 1020 간편 모드 누르는 곳 56px(다른 머리줄 단추와 같게) */

/* 1019 FT 쇼츠 프레임 템플릿(#/frames) */
.frames{display:grid;grid-template-columns:minmax(0,300px) minmax(0,400px) minmax(0,1fr);gap:16px;align-items:start;margin-top:8px}
.frames .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.frames .fthumb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);cursor:pointer;min-height:44px;font:inherit;color:var(--ink);text-align:center}
.frames .fthumb[aria-pressed="true"]{border:3px solid var(--teal);padding:6px;background:var(--teal-light)} .frames .fthumb canvas{width:100%;max-width:108px;height:auto;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.frames .fthumb b{font-size:14px} .frames .fthumb span{font-size:13px;color:var(--ink-2);line-height:1.3}
.frames .fstage{position:sticky;top:8px} .frames .fprevw{display:flex;justify-content:center} .frames .fprev{width:100%;max-width:360px;height:auto;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.25);touch-action:none;outline-offset:3px}
.frames .xrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .frames .swb{width:44px;height:44px;border-radius:10px;border:2px solid var(--line-2);cursor:pointer}
.frames .fcol{display:inline-flex;align-items:center;gap:6px;font-size:14px;min-height:44px} .frames .fcol input{width:44px;height:36px;border:1px solid var(--line-2);border-radius:8px;padding:2px;background:var(--surface)}
.frames .pills{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0} .frames .chip{min-height:44px;font-size:15px;padding:0 14px}
@media (max-width: 1100px){.frames{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .frames .fgal{grid-column:1 / -1} .frames .fgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width: 720px){.frames{grid-template-columns:minmax(0,1fr)} .frames .fstage{position:static} .frames .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kfgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:6px 0}
.kfgal .kfp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);min-height:44px}
.kfgal .kfp[aria-checked="true"]{border:3px solid var(--teal);padding:4px;background:var(--teal-light)} .kfgal .kfp canvas{width:72px;height:128px;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.kfgal .kfp b{font-size:13px;line-height:1.25;text-align:center} .kfgal .kfp .kfx{width:72px;height:128px;border-radius:5px;background:repeating-linear-gradient(135deg,#94A3B8 0 8px,#CBD5E1 8px 16px);display:flex;align-items:center;justify-content:center;font-size:13px;color:#1E293B;font-weight:700}
/* 1019 FT2 브랜드 키트 — 템플릿 미리보기에서 바로 고치기(옆 미리보기 · 폭이 좁으면 [쇼츠 템플릿] 칸 안) */
.kitw > aside.kaside{align-self:stretch}
.kfside{position:sticky;top:8px;z-index:1;background:var(--bg,#FAFAF9);padding-bottom:6px;display:flex;flex-direction:column;gap:6px}
.kfside[hidden],.kfedit[hidden]{display:none}
.kfcv{width:100%;max-width:340px;height:auto;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.25);touch-action:none;outline-offset:3px;align-self:center}
.kold>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.kfedit{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:8px 0;padding:12px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.kfedit .kfstage{display:none}
.kfedit .kfsec{border-top:1px solid var(--line-2);padding-top:10px;display:flex;flex-direction:column;gap:6px;border-radius:10px}
.kfedit .kfsec h3{font-size:16px;margin:0}
.kfedit .kfsec.on{outline:3px solid var(--teal);outline-offset:4px;background:var(--teal-light)}
.kfedit .kfr input[type=range]{width:100%}
.kfedit .xrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kfedit .swb{width:44px;height:44px;border-radius:10px;border:2px solid var(--line-2);cursor:pointer}
.kfedit .fcol{display:inline-flex;align-items:center;gap:6px;font-size:14px;min-height:44px} .kfedit .fcol input{width:44px;height:36px;border:1px solid var(--line-2);border-radius:8px;padding:2px;background:var(--surface)}
.kfedit .pills{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0} .kfedit .chip{min-height:44px;font-size:15px;padding:0 14px}
@media (max-width: 1279px){ .kfside{display:none!important} .kfedit{grid-template-columns:minmax(0,240px) minmax(0,1fr)} .kfedit .kfstage{display:flex;flex-direction:column;gap:6px;position:sticky;top:8px;align-self:start} }
@media (max-width: 720px){ .kfedit{grid-template-columns:minmax(0,1fr)} .kfedit .kfstage{position:static;align-items:center} .kfedit .kfstage .kfcv{max-width:240px} }
/* 1019 FT2 저장 안 됨 표시 */
.kdirty{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;border-radius:999px;background:#FEF3C7;color:#92400E;font-size:14px;font-weight:700}
.kdirty[hidden],[data-ksave2][hidden]{display:none!important}
.kfhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
[data-ksave].dirty{box-shadow:0 0 0 3px #F59E0B}
.kfside [data-ksave2],.kfstage [data-ksave2]{align-self:center;min-height:44px}
.kfstage .kdirty{align-self:center}

/* ═════════ 1020 브랜드 키트 v2 — 대표 10/20 01:37 "메뉴 폰트 · 박스가 커서 투박 · 하나의 흐름 · 로고 칸 작게 · 가로 영상 미리보기" ═════════ */
.kit2 { display: grid; gap: 20px; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, clamp(300px, 30%, 520px)); align-items: start; }
.k2list { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 8px; }
.k2cap { margin: 0 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.k2row { display: flex; align-items: stretch; gap: 2px; }
.k2item { flex: 1; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; }
.k2item:hover { background: var(--surface); border-color: var(--line-2); }
.k2item[aria-pressed="true"] { background: var(--surface); border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); font-weight: 600; }
.k2item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k2item .def { font-size: 12px; color: var(--teal); font-weight: 600; }
.k2dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.k2del { width: 36px; min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .55; }
.k2del .i { width: 17px; height: 17px; }
.k2row:hover .k2del, .k2del:focus-visible { opacity: 1; } .k2del:hover { color: #B91C1C; background: #FEE2E2; }
.k2add { min-height: 38px; display: flex; align-items: center; padding: 0 10px; border: 1px dashed var(--line-2); border-radius: 10px; background: transparent; font-size: 14px; color: var(--ink-2); cursor: pointer; text-decoration: none; margin-top: 4px; }
.k2add:hover { border-color: var(--teal); color: var(--teal); }
.k2main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.k2head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k2head .kname { flex: 1 1 220px; max-width: 360px; font-size: 18px; font-weight: 700; min-height: 44px; }
.k2step { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.k2step h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k2n { width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.k2basic { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; align-items: start; }
.k2basic .lbl2 { font-size: 14px; }
html[data-mode] .kit2 .k2basic .inp, html[data-mode] .kit2 .kfedit .inp { min-height: 42px; font-size: 15px; }
html .kit2 .k2step .btn.sm, html[data-mode] .kit2 .k2step .btn.sm { min-height: 38px; font-size: 14px; padding: 0 12px; }
.k2lrow { display: flex; align-items: center; gap: 10px; }
.logoz.sm { min-height: 0; width: 64px; height: 64px; flex: none; border-width: 1px; border-radius: 12px; font-size: 13px; color: var(--ink-2); }
.logoz.sm img { max-height: 52px; max-width: 52px; }
.k2fonts { display: flex; gap: 8px; flex-wrap: wrap; }
.k2colors { display: flex; gap: 10px; flex-wrap: wrap; }
.k2c { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.k2c .csw { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); display: block; }
.k2c:focus-within .csw { box-shadow: var(--focus-ring); }
.k2c small { font-size: 12px; color: var(--muted); }
.k2tone { background: var(--beige-2, #F5F1E8); border-radius: 10px; padding: 8px 10px; margin: 0; }
.k2seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--beige-2, #F1EDE4); border-radius: 12px; align-self: flex-start; }
html[data-mode] .kit2 .k2seg button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; padding: 4px 14px; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; color: var(--ink); }
.k2seg button b { font-size: 15px; } .k2seg button small { font-size: 12px; color: var(--muted); }
.k2seg button[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.k2seg button[aria-checked="true"] b { color: var(--teal); }
.k2gal { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.k2gal .kfp { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); cursor: pointer; }
.k2gal .kfp[aria-checked="true"] { border: 2px solid var(--teal); padding: 4px; background: var(--teal-light); }
.k2gal .kfp canvas { border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: block; }
.k2gal .kfp b { font-size: 12px; font-weight: 600; max-width: 116px; text-align: center; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k2gal .kfp .kfx { border-radius: 4px; background: repeating-linear-gradient(135deg, #CBD5E1 0 8px, #E2E8F0 8px 16px); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #334155; }
.k2now { margin: 0; }
.k2tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); }
.k2tabs[role="tablist"] > .k2tab { min-height: 40px; margin: 0 0 -1px; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; display: inline-flex; align-items: center; border: 0; background: transparent; padding: 0 12px; font-size: 14px; color: var(--ink-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.k2tabs[role="tablist"] > .k2tab:hover { background: var(--teal-light); }
.k2tabs[role="tablist"] > .k2tab[aria-selected="true"] { color: var(--teal); background: transparent; border-bottom-color: var(--teal); font-weight: 700; padding: 0 12px; }
.k2step .kfedit { margin: 0; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; gap: 10px; }
.k2step .kfedit .kfsec { border-top: 0; padding-top: 0; }
.k2step .kfedit .kfsec.on { outline: 0; background: transparent; }
.k2step .kfedit .kfsec[hidden], .k2step [hidden] { display: none !important; }
html .kit2 .k2step .chip, html[data-mode] .kit2 .k2step .chip { min-height: 38px; font-size: 14px; padding: 0 12px; border-radius: 10px; }
.k2step .kfedit .swb { width: 34px; height: 34px; border-radius: 8px; }
.k2step .kfedit .fcol { min-height: 38px; font-size: 13px; } .k2step .kfedit .fcol input { width: 38px; height: 30px; }
.k2two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; }
.k2two .kfr input[type=range] { width: 100%; } .k2two .lbl2 { font-size: 14px; }
.k2lay { display: flex; flex-direction: column; gap: 6px; }
.k2subw { border-top: 1px dashed var(--line-2); padding-top: 10px !important; }
.k2bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: color-mix(in srgb, var(--bg, #FAFAF9) 92%, transparent); border: 1px solid var(--line-2); border-radius: 14px; backdrop-filter: blur(4px); }
html[data-mode] .kit2 .k2bar .btn { min-height: 42px; font-size: 15px; } html[data-mode] .kit2 .k2bar .btn.sm { min-height: 38px; font-size: 14px; }
.k2sp { flex: 1; }
.k2danger { color: #B91C1C; border-color: #FCA5A5; } .k2danger:hover { background: #FEE2E2; }
.k2prev { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.k2prev .kfhead { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.k2cvw { display: flex; justify-content: center; }
.k2cvw .kfcv, .k2inline .kfcv { width: 100%; max-width: 360px; height: auto; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.18); touch-action: none; display: block; }
.k2cvw .kfcv.h, .k2inline .kfcv.h { max-width: 100%; }
.k2cvw .kfcv[hidden], .k2inline .kfcv[hidden] { display: none; }
.k2prev [data-ksave2] { align-self: center; min-height: 42px; }
.k2inline { display: none; justify-content: center; }
@media (max-width: 860px) { .k2bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1279px) {
  .kit2 { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .k2list { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .k2cap { width: 100%; }
  .k2row { flex: 0 0 auto; } .k2item { max-width: 220px; } .k2add { margin-top: 0; }
}
@media (max-width: 860px) {
  .kit2 { grid-template-columns: minmax(0, 1fr); }
  .k2prev { display: none; }
  .k2inline { display: flex; } .k2inline .kfcv { max-width: 260px; } .k2inline .kfcv.h { max-width: 100%; }
}
/* 1020 뉴스 작업실(#/newswork) · 만드는 중 움직임(대표 10/20 09:25 "만드는 과정에 움직이는 애니메이션 · 진행 상황") */
.bar.live > i { background-image: linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%); background-size: 16px 16px; animation: barstripe .9s linear infinite; transition: width .8s ease; min-width: 3%; }
.ocnow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 8px 0 0; font-size: 16px; color: var(--ink); font-weight: 600; } .ocnow .muted { font-weight: 400; font-size: 14px; margin-left: auto; }
.ocnow[hidden] { display: none; } .ocrow b { display: inline-flex; align-items: center; gap: 8px; }
.nwsteps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; grid-column: 1 / -1; }
.nwsteps li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--beige-2, #EEE9DF); color: var(--muted); font-size: 14px; }
.nwsteps li .c { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); font-weight: 700; font-size: 13px; } .nwsteps li .c .i { width: 14px; height: 14px; }
.nwsteps li.done { color: var(--teal-link, #0F766E); } .nwsteps li.now { background: var(--teal); color: #fff; font-weight: 700; } .nwsteps li.now .c { color: var(--teal); }
.nwgrid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 26%, 360px); gap: 16px; margin-top: 8px; align-items: start; }
.nwgrid > .nwhead { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.nwside { position: sticky; top: 12px; } .nwside .card { display: flex; flex-direction: column; gap: 10px; }
.nwscene { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--track); } .nwscene .inp.sm { min-height: 40px; font-size: 14px; }
/* 1029 장면마다 모션그래픽 ↔ AI 그림(뉴스 작업실) */
.nwmg { gap: 8px; align-items: center; flex-wrap: wrap; } .nwmgk { font-size: 13px; color: var(--ink-2); } .nwmgk.on { color: var(--ink); } .nwmgk.on b { color: var(--accent); } .nwmg .btn.sm { min-height: 44px; }
/* 1029 장면마다 [그림] [그래픽] [겹치기] 셋 중 고르기 */
.nwmgk { flex: 1 1 220px; min-width: 0; } .nwmgb { display: inline-flex; gap: 6px; flex-wrap: wrap; } .nwmgb .chip { min-height: 44px; padding: 0 14px; font-size: 15px; border-radius: 10px; } .nwmgb .chip[aria-checked="true"] { padding: 0 12px; }
.nwvideo { width: min(100%, 320px); aspect-ratio: 9 / 16; background: #000; border-radius: 12px; }
.nwwip { display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--teal); margin-bottom: 12px; }
.nwwrow { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--track); padding-top: 8px; } .nwwrow .t { flex: 1; display: flex; flex-direction: column; min-width: 0; } .nwwrow .t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .nwgrid { grid-template-columns: minmax(0, 1fr); } .nwside { position: static; } }
@media (prefers-reduced-motion: reduce) { .bar.live > i { animation: none; } }
html[data-mode="simple"] .nwsteps li, html[data-mode="simple"] .ocnow, html[data-mode="simple"] .ocnow .muted, html[data-mode="simple"] .nwscene .inp.sm { font-size: 17px; } html[data-mode="simple"] .nwsteps li { min-height: 44px; }
/* 1020 쇼츠 편집기 [1 원본 정리](clean.js) — 번호 탭 · 단계 카드 · 원본 비율로 커지는 미리보기 · 상자 */
.sedtabs .stn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; border: 1px solid currentColor; font-size: 11px; font-weight: 700; margin-right: 5px; line-height: 1; }
.sedpane[data-pane="clean"] .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sedpane[data-pane="clean"] .chip { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.sedpane[data-pane="clean"] .chip[aria-pressed="true"] { padding: 0 12px; }
.clstep { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.clstep h4 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.clstep .cln { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--track); font-size: 13px; font-weight: 700; }
.clstep.done { border-color: var(--teal); } .clstep.done .cln { background: var(--teal); color: #fff; }
.clrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px; border-radius: 8px; } .clrow.on { background: var(--teal-light); }
.clrow .chip { min-height: 36px; }
.clfoot { margin-top: 10px; align-items: center; } .clfoot .btn.primary { min-height: 44px; }
.clnudge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.sed.cleaning .sedplay { width: min(100%, 720px); aspect-ratio: var(--clar, 1.7778); }
.sed.cleaning .sedfx-ov { display: none; }
.clov { position: absolute; pointer-events: none; z-index: 3; }
.clov.live { pointer-events: auto; touch-action: none; }
.clb { position: absolute; box-sizing: border-box; }
.clb.m-blur, .clb.m-delogo { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.clov.live .clb { outline: 2px dashed #facc15; cursor: move; } .clov.live .clb.logo { outline-color: #38bdf8; }
.clov.live .clb.on { outline-style: solid; outline-width: 3px; box-shadow: 0 0 0 9999px rgba(0,0,0,.18); }
.clb .cllab { position: absolute; left: 2px; top: 2px; font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 6px; background: #facc15; color: #1f1d1a; white-space: nowrap; pointer-events: none; }
.clb.logo .cllab { background: #38bdf8; }
.clb .clh { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 4px; background: #fff; border: 2px solid #1f1d1a; cursor: nwse-resize; }
.clen { position: absolute; right: 6px; bottom: 6px; font-size: 11px; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; pointer-events: none; }
.clb:focus-visible { outline: 3px solid var(--teal) !important; }
/* 1020 이미지 창고 [배경 지우기] 결과 — 투명한 곳이 보이게 바둑판 바탕 */
.libc.cut img, .libdlg-img img.cutimg { background-color: #fff; background-image: linear-gradient(45deg, #e7e5e4 25%, transparent 25%), linear-gradient(-45deg, #e7e5e4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e5e4 75%), linear-gradient(-45deg, transparent 75%, #e7e5e4 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
/* 1021 승인대기함 · 내 콘텐츠함 2단 — 위 = 플랫폼 탭 12개(앱 공통 폴더 탭 모양 1014 N54 그대로 · 한 줄 · 넘치면 이 줄 안에서만 가로로 밀어 봄 · 화면은 넘치지 않음)
 *  아래 = 상태 메뉴(둘째 단이라 알약 모양 · 시안 v27) · 카드 날짜 줄 */
.pf2 { min-width: 0; max-width: 100%; }
.pf2 .search.pf2q { min-height: 56px; }
.pf2tabs[role="tablist"] { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-top: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; }
.pf2tabs[role="tablist"] > .pf2tab { flex: 0 0 auto; padding: 0 16px; gap: 6px; }
.pf2tabs[role="tablist"] > .pf2tab[aria-selected="true"] { padding: 0 16px; }
.pf2tab .n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.pf2tab[aria-selected="true"] .n { color: #fff; font-weight: 600; }
.pf2tab .plogo { margin-right: 0; }
.pf2tab[aria-selected="true"] svg.plogo, .pf2tab[aria-selected="true"] svg.pfmark { background: #fff; border-radius: 4px; padding: 1px; box-sizing: content-box; }
.pf2tab svg.pfico { width: 16px; height: 16px; }
.pfmark { display: inline-block; flex-shrink: 0; vertical-align: -3px; }
.meta .pfmark, .s .pfmark, .apd .pfmark, .ink2 .pfmark { margin-right: 5px; }
.pf2st[role="tablist"] { border-bottom: 0; padding: 0; gap: 8px; align-items: center; }
.pf2st[role="tablist"] > [role="tab"] { margin: 0; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 500; }
.pf2st[role="tablist"] > [role="tab"][aria-selected="true"] { padding: 0 18px; background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 700; }
.pf2st [role="tab"] b { margin-left: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf2st .aptomy { margin-left: auto; }
html[data-mode="simple"] .pf2st .aptomy { font-size: 17px; }
.when { display: block; font-size: 17px; } .when.up { color: var(--ok); } .when.sch { color: var(--warn-ink); } .when.wait { color: var(--muted); }
.apmemo { color: var(--warn-ink); }
.rcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rcard .when { font-size: 15px; }
.rcard .racts { display: flex; flex-direction: column; gap: 6px; }
.rcard .racts .btn { width: 100%; min-height: 44px; padding: 0 8px; white-space: normal; line-height: 1.2; text-align: center; justify-content: center; }
html[data-mode="simple"] .rcard .racts .btn { min-height: 56px; font-size: 17px; }
html[data-mode="simple"] .rcard .when { font-size: 17px; }
html[data-mode="expert"] .pf2tabs[role="tablist"] > .pf2tab, html[data-mode="expert"] .pf2st[role="tablist"] > [role="tab"] { min-height: 44px; font-size: 14px; padding: 0 12px; }
html[data-mode="expert"] .when { font-size: 14px; } html[data-mode="expert"] .rcard .when { font-size: 13px; }
html[data-mode="expert"] .pf2 .search.pf2q { min-height: 44px; }
@media (max-width: 767px) { .pf2st[role="tablist"] { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; } .pf2st [role="tab"] { flex: 0 0 auto; white-space: nowrap; } .pf2st .aptomy { white-space: nowrap; } }
/* 1021 트렌드 레이더 관심도 — [국내 · 네이버] [해외 · 영어 위키] 탭 · 고른 탭은 검게 */
[data-itabs] .pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
[data-interest] [data-ipanel][hidden], [data-interest] [data-wikicandbox][hidden] { display: none; }
/* 1022 내 콘텐츠 카드 칸별 단추 — 업로드됨 [보기] · 업로드 대기·예약 [시간 바꾸기] [예약 취소] · 아직 안 올림 [예약하기] [지금 올리기] [편집기에서 열기]
 *  줄이 모자라면 다음 줄로(375px 가로 넘침 없음) · 높이는 앱 단추 그대로(간편 56px · 전문가 44px) · 아래 줄(받기 · 휴지통으로)은 그대로 */
.ccard .myacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.ccard .myacts .btn { flex: 1 1 auto; }
.ccard .myacts + .acts { margin-top: 0; }
.ccard .acts { flex-wrap: wrap; }
.ccard .when.sch[data-at] { font-weight: 600; }
/* 1022 간편 화면 맨 위 "자세히 보기(전문가 화면)" 한 줄(radar1 · saved · long1) — 누르면 이 탭만 전문가 화면 */
.xmore { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 4px 0 0; }
.xmore .muted { font-size: 17px; }
html[data-mode="expert"] .xmore { display: none; }
/* 1022 만들기(#/make) 아래 [만든 것 고치기 → 영상 편집기] — 폰(아래 탭)에서도 편집기로 */
.mkedit { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .mkedit .xrow { flex-wrap: wrap; gap: 8px 12px; align-items: center; } .mkedit .muted { font-size: 17px; }
/* 1022 PC 영상 사본 정리(extclean-ui.js) — 영상 자리 "사본 정리됨 · 유튜브에서 보기" · #/team 카드 */
.copygone { margin: 0; padding: 12px 16px; font-size: 17px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.admcard[data-extclean] { word-break: keep-all; overflow-wrap: anywhere; }
.copygone > span { display: block; min-width: 0; }
.copygone a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 32px; padding: 4px 0; }
.copygone .copywhy { display: block; margin-top: 2px; font-size: 16px; }
.pvbox .copygone { min-height: 160px; align-items: center; justify-content: center; text-align: center; }
.ccard .copygone { margin-top: 6px; }
.admcard .ecchk { margin-top: 8px; min-height: 44px; }
.admcard .ecchk b { color: var(--ink); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.admcard .ecchk span { font-size: 14px; }
.admcard .ecbar { flex-wrap: wrap; gap: 10px; align-items: center; }
.admcard .ecsub { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
html[data-mode="simple"] .admcard .ecchk b, html[data-mode="simple"] .admcard .ecchk span, html[data-mode="simple"] .admcard .ecsub { font-size: 17px; }
.admcard .ecsize { white-space: nowrap; }
.admcard [data-eclog] a, .admcard [data-ecwould] a { color: var(--teal-link); text-decoration: underline; }
/* 1022 그림체 견본 만들기(#/team · b9.js NU.styleSampleCard) — 진행 줄 · 만든 견본 그림 */
.admcard[data-stysamp] { word-break: keep-all; overflow-wrap: anywhere; }
.admcard .sslead { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.admcard .ssbar { flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.admcard .ssrows { max-height: 360px; overflow-y: auto; }
.admcard .ssgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 4px; }
.admcard .ssgrid figure { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admcard .ssgrid img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); display: block; }
.admcard .ssgrid figcaption { font-size: 13px; color: var(--ink); }
html[data-mode="simple"] .admcard .sslead, html[data-mode="simple"] .admcard .ssgrid figcaption { font-size: 17px; }
.admcard[data-stysamp] .stchip { flex-direction: row; white-space: nowrap; }
/* 1023 유튜브 분석 — 데이터를 못 가져왔을 때 안내 띠(오류 글 대신) */
.failban { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-bg); border-left: 5px solid var(--warn-ink); word-break: keep-all; overflow-wrap: anywhere; }
.failban .fbi { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--warn-ink); color: var(--warn-bg); font-weight: 800; font-size: 18px; }
.failban .fbt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.failban .fbt b { font-size: 17px; line-height: 1.4; }
.failban .fbt span { font-size: 15px; line-height: 1.5; }
@media (max-width: 640px) { .failban { align-items: flex-start; } }
html[data-mode="simple"] .failban .fbt span { font-size: 17px; }
/* 1028 카드뉴스 원고 = 템플릿 미리보기(승인 대기 카드 · [원고 보기]) · AI 수정본 표시 */
.rpick .box canvas.dcv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rpick .box .dtpl { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 13px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard .apredo { display: block; padding: 4px 8px; border-radius: 8px; background: var(--teal-light); color: var(--ink); }
.dprev { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dprev .dprevh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dprev .dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; }
.dprev .dgrid canvas { width: 100%; height: auto; aspect-ratio: 1080 / 1350; border-radius: 8px; background: var(--bg); display: block; }
.dprevt { margin-top: 10px; } .dprevt summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
/* 1028 승인 대기 — 상태 알약 줄이 플랫폼 탭 밑줄에 붙어 겹쳐 보이던 것 · 수정 요청 목록 배열 · AI 다시 쓰는 중 움직임 */
.pf2tabs + .pf2st { margin-top: 14px; }
.apd .ph { min-height: 0; }
.apd .apcv { display: block; width: 72px; aspect-ratio: 1080 / 1350; border-radius: 10px; overflow: hidden; background: var(--bg); align-self: start; }
.apd .apcv canvas { width: 100%; height: 100%; display: block; }
.apd { align-items: start; }
.apd .xrow { align-self: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rdo { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; line-height: 1.5; overflow: hidden; }
.rdo .rdot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted, #8a8178); flex: none; }
.rdo b { color: var(--ink); }
.rdo .rdosub { flex-basis: 100%; font-size: 13px; color: var(--ink-2); }
.rdo .rdohint { flex-basis: 100%; font-size: 13px; color: var(--warn-ink, #8a5a00); }
.rdo.running { background: var(--teal-light); border-color: var(--teal); color: var(--teal-link, var(--teal)); }
.rdo.running b { color: var(--teal-link, var(--teal)); }
.rdo.running .rdot { background: var(--teal); box-shadow: 0 0 0 0 rgba(15, 118, 110, .55); animation: rdoping 1.4s ease-out infinite; }
.rdo.running .rdoel { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.rdo .rdobar { flex-basis: 100%; height: 6px; border-radius: 3px; background: rgba(15, 118, 110, .15); overflow: hidden; position: relative; }
.rdo .rdobar i { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--teal), transparent); animation: rdobar 1.6s ease-in-out infinite; }
.rdo.running::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 250% 100%; animation: rdoshine 2.4s linear infinite; }
.rdo.err { background: var(--accent-light); border-color: var(--accent-press); color: var(--accent-press); }
.rdo.err b { color: var(--accent-press); } .rdo.err .rdot { background: var(--accent-press); }
@keyframes rdoping { 0% { box-shadow: 0 0 0 0 rgba(15, 118, 110, .55); } 70% { box-shadow: 0 0 0 10px rgba(15, 118, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); } }
@keyframes rdobar { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes rdoshine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .rdo.running .rdot, .rdo .rdobar i, .rdo.running::after { animation: none; } .rdo .rdobar i { left: 0; width: 100%; opacity: .5; } }
html[data-mode="simple"] .rdo { font-size: 17px; } html[data-mode="simple"] .rdo .rdosub, html[data-mode="simple"] .rdo .rdohint { font-size: 15px; }
.cspic { display: block; margin-top: 2px; font-weight: 600; color: var(--ink-2) !important; }   /* 1028 템플릿마다 그림이 나오는 카드 번호 */
.cssel { position: relative; } .cspin { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-block; padding: 3px 10px; box-shadow: 0 1px 4px rgba(0,0,0,.25); border-radius: 999px; background: var(--teal); color: #FFFFFF; font-size: 13px; font-weight: 700; }   /* 1028 카드뉴스 첫 화면 지정한 템플릿 */
/* 1101 검수 A#28 · A#29 한글 낱말 가운데서 줄바꿈("쇼핑쇼/츠" · "한 번/에" · "이/렇게 보여/요") — 낱말 단위로만 · 넘치면 그때만 자름 */
.nav .lbl, .nav .grp .lbl { word-break: keep-all; overflow-wrap: break-word; }
.phone [data-subprev] { word-break: keep-all; overflow-wrap: anywhere; width: max-content; }
/* 1101 검수 A#30 예약 달력 월 보기 — 칸이 좁아 제목이 "오…"로 잘림 → 썸네일 위 · 시각 · 제목 두 줄(낱말 단위) · 전체 제목은 칸 title(툴팁) · 고른 날 목록(아래)은 그대로 */
.sch .schmonth .schday>.schchip { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.sch .schmonth .schday>.schchip .ph { height: 2.6em; max-width: 100%; justify-self: start; }
.sch .schmonth .schday>.schchip .tt>.t { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* 1101 검수 A#35 "새 기능" 꼬리표가 제목에 붙어 보임 → 앞 띄움(안전장치 줄은 다른 작업이 고치는 중이라 글은 그대로) */
#caps h2 > .newtag { margin-left: .35em; }