/* 촬영팀 업무 툴 · 노션 테마 (DESIGN-notion.md). 라이트·다크 */
/* 노션 테마 (DESIGN-notion.md + 노션 앱 색). 라이트가 기본, 다크는 시스템 설정이나 사이드바 전환으로 */
:root {
  --canvas: #ffffff; --side-bg: #f7f7f5; --s1: #fbfbfa; --s2: #f1f1ef; --s3: #ebeae8; --s4: #e3e2e0;
  --line: #ededec; --line-2: #e3e2e0; --line-3: #d3d1cb;
  --ink: #1f1e1b; --ink-2: #37352f; --ink-3: #787774; --ink-4: #a39e98;
  --accent: #2383e2; --accent-hover: #0f6fc9; --accent-focus: #0b5fad; --accent-soft: rgba(35, 131, 226, 0.12);
  --coral: #d44c47; --amber: #cb912f; --ok: #448361;
  --c1: #337ea9; --c2: #448361; --c3: #cb912f; --c4: #d9730d; --c5: #d44c47;
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06);
  --shadow-lg: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2);
  --backdrop: rgba(15, 15, 15, 0.45); --card-hi: none; --stripe: rgba(55, 53, 47, 0.035);
  /* 노션 태그 색 (옵션 색 그대로) */
  --tg-default: rgba(227, 226, 224, 0.6); --tg-gray: #e3e2e0; --tg-brown: #eee0da; --tg-orange: #fadec9; --tg-yellow: #fdecc8; --tg-green: #dbeddb; --tg-blue: #d3e5ef; --tg-purple: #e8deee; --tg-pink: #f5e0e9; --tg-red: #ffe2dd;
  --tf-default: #32302c; --tf-gray: #32302c; --tf-brown: #442a1e; --tf-orange: #49290e; --tf-yellow: #402c1b; --tf-green: #1c3829; --tf-blue: #183347; --tf-purple: #412454; --tf-pink: #4c2337; --tf-red: #5d1715;
  --dt-default: #a39e98; --dt-gray: #9b9a97; --dt-brown: #9f6b53; --dt-orange: #d9730d; --dt-yellow: #cb912f; --dt-green: #448361; --dt-blue: #337ea9; --dt-purple: #9065b0; --dt-pink: #c14c8a; --dt-red: #d44c47;
  --sans: 'Inter', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --side: 236px; --detail: 500px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  --canvas: #191919; --side-bg: #202020; --s1: #1f1f1f; --s2: #262626; --s3: #2c2c2c; --s4: #333333;
  --line: #2a2a2a; --line-2: #333333; --line-3: #434343;
  --ink: #e6e6e5; --ink-2: #d4d4d3; --ink-3: #9b9b9b; --ink-4: #6f6f6f;
  --accent: #2f8fe8; --accent-hover: #55a6f0; --accent-focus: #1f7fd6; --accent-soft: rgba(47, 143, 232, 0.2);
  --coral: #df5452; --amber: #ca9849; --ok: #529e72;
  --c1: #379ad3; --c2: #529e72; --c3: #ca9849; --c4: #c77d48; --c5: #df5452;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 3px 6px rgba(0, 0, 0, 0.4), 0 9px 24px rgba(0, 0, 0, 0.55);
  --backdrop: rgba(0, 0, 0, 0.6); --card-hi: none; --stripe: rgba(255, 255, 255, 0.02);
  --tg-default: #373737; --tg-gray: #474c50; --tg-brown: #5c4b43; --tg-orange: #854c1d; --tg-yellow: #89632a; --tg-green: #2b593f; --tg-blue: #28456c; --tg-purple: #492f64; --tg-pink: #69314c; --tg-red: #6e3630;
  --tf-default: rgba(255, 255, 255, 0.86); --tf-gray: rgba(255, 255, 255, 0.86); --tf-brown: rgba(255, 255, 255, 0.86); --tf-orange: rgba(255, 255, 255, 0.86); --tf-yellow: rgba(255, 255, 255, 0.86); --tf-green: rgba(255, 255, 255, 0.86); --tf-blue: rgba(255, 255, 255, 0.86); --tf-purple: rgba(255, 255, 255, 0.86); --tf-pink: rgba(255, 255, 255, 0.86); --tf-red: rgba(255, 255, 255, 0.86);
  --dt-default: #6f6f6f; --dt-gray: #9b9b9b; --dt-brown: #ba856f; --dt-orange: #c77d48; --dt-yellow: #ca9849; --dt-green: #529e72; --dt-blue: #379ad3; --dt-purple: #9d68d3; --dt-pink: #d15796; --dt-red: #df5452;
  color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --canvas: #191919; --side-bg: #202020; --s1: #1f1f1f; --s2: #262626; --s3: #2c2c2c; --s4: #333333;
  --line: #2a2a2a; --line-2: #333333; --line-3: #434343;
  --ink: #e6e6e5; --ink-2: #d4d4d3; --ink-3: #9b9b9b; --ink-4: #6f6f6f;
  --accent: #2f8fe8; --accent-hover: #55a6f0; --accent-focus: #1f7fd6; --accent-soft: rgba(47, 143, 232, 0.2);
  --coral: #df5452; --amber: #ca9849; --ok: #529e72;
  --c1: #379ad3; --c2: #529e72; --c3: #ca9849; --c4: #c77d48; --c5: #df5452;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 3px 6px rgba(0, 0, 0, 0.4), 0 9px 24px rgba(0, 0, 0, 0.55);
  --backdrop: rgba(0, 0, 0, 0.6); --card-hi: none; --stripe: rgba(255, 255, 255, 0.02);
  --tg-default: #373737; --tg-gray: #474c50; --tg-brown: #5c4b43; --tg-orange: #854c1d; --tg-yellow: #89632a; --tg-green: #2b593f; --tg-blue: #28456c; --tg-purple: #492f64; --tg-pink: #69314c; --tg-red: #6e3630;
  --tf-default: rgba(255, 255, 255, 0.86); --tf-gray: rgba(255, 255, 255, 0.86); --tf-brown: rgba(255, 255, 255, 0.86); --tf-orange: rgba(255, 255, 255, 0.86); --tf-yellow: rgba(255, 255, 255, 0.86); --tf-green: rgba(255, 255, 255, 0.86); --tf-blue: rgba(255, 255, 255, 0.86); --tf-purple: rgba(255, 255, 255, 0.86); --tf-pink: rgba(255, 255, 255, 0.86); --tf-red: rgba(255, 255, 255, 0.86);
  --dt-default: #6f6f6f; --dt-gray: #9b9b9b; --dt-brown: #ba856f; --dt-orange: #c77d48; --dt-yellow: #ca9849; --dt-green: #529e72; --dt-blue: #379ad3; --dt-purple: #9d68d3; --dt-pink: #d15796; --dt-red: #df5452;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; font-feature-settings: 'tnum' 1, 'cv11' 1; -webkit-font-smoothing: antialiased; overflow: hidden; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: #fff; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent); outline-offset: 2px; }
.ic { width: 16px; height: 16px; flex: none; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 3px solid transparent; background-clip: padding-box; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { display: grid; grid-template-columns: var(--side) 1fr; height: 100vh; }
body.has-detail .app { grid-template-columns: var(--side) 1fr var(--detail); }

/* ---------- 사이드바 ---------- */
.side { border-right: 1px solid var(--line); background: var(--side-bg); display: flex; flex-direction: column; min-height: 0; }
.ws { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; }
.mark { width: 20px; height: 20px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; flex: none; }
.mark::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.ws strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.who { margin: 0 10px 10px; position: relative; }
.who select { width: 100%; appearance: none; height: 30px; padding: 0 28px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.who .ic { position: absolute; right: 8px; top: 7px; transform: rotate(90deg); color: var(--ink-3); pointer-events: none; }
.nav { padding: 2px 8px; display: grid; gap: 1px; }
.nav h6 { margin: 14px 8px 4px; font-size: 12px; font-weight: 500; color: var(--ink-4); }
.nav button { height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
.nav button .ic { color: var(--ink-3); }
.nav button .n { margin-left: auto; font-size: 12px; color: var(--ink-4); font-weight: 500; }
.nav button:hover:not(:disabled) { background: var(--s2); color: var(--ink); }
.nav button[aria-current='true'] { background: var(--s3); color: var(--ink); }
.nav button[aria-current='true'] .ic { color: var(--ink); }
.nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.nav .dot { width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; flex: none; }
.side-foot { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-4); display: grid; gap: 8px; }
.save { display: flex; align-items: center; gap: 7px; color: var(--ink-3); }
.save i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.save[data-state='saving'] i { background: var(--amber); animation: blink 0.9s infinite; }
.save[data-state='saved'] { color: var(--ink-2); }
.save[data-state='saved'] i { background: var(--ok); }
@keyframes blink { 50% { opacity: 0.25; } }
kbd { font: 500 11px var(--sans); padding: 0 5px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--s2); color: var(--ink-3); }

/* ---------- 본문 ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bar { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); }
.bar h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.bar .cnt { font-size: 13px; color: var(--ink-3); }
.fchip { display: none; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 8px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--s2); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.fchip.on { display: inline-flex; }
.fchip button { width: 18px; height: 18px; border: 0; border-radius: 4px; background: none; display: grid; place-items: center; cursor: pointer; color: var(--ink-3); }
.fchip button:hover { background: var(--s3); color: var(--ink); }
.fchip .ic { width: 12px; height: 12px; }
.bar .spacer { flex: 1; }
.tabs { display: inline-flex; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); }
.tabs button { height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font-size: 13px; font-weight: 500; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed='true'] { background: var(--s3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.tabs .ic { width: 14px; height: 14px; }
.grp { position: relative; }
.grp select { appearance: none; height: 28px; padding: 0 26px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.grp .ic { position: absolute; right: 7px; top: 6px; transform: rotate(90deg); color: var(--ink-3); pointer-events: none; }
.view { flex: 1; overflow: auto; min-height: 0; }

/* 단계 아이콘 (Linear 상태 원) */
.si { width: 16px; height: 16px; flex: none; }

/* 목록 */
.ghead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 20px; background: var(--s1); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ghead .n { color: var(--ink-4); font-weight: 500; }
.row { display: grid; grid-template-columns: 16px minmax(220px, 1fr) 110px 86px 150px 64px 70px 118px; align-items: center; gap: 14px; height: 44px; padding: 0 20px; border-bottom: 1px solid var(--line); cursor: pointer; }
.row:hover { background: var(--s1); }
.row[aria-selected='true'] { background: var(--s2); box-shadow: inset 2px 0 0 var(--accent); }
.row.kb { box-shadow: inset 0 0 0 1px var(--line-3); }
.row .t { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.row .t b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t span { font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--s1); font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); flex: none; }
.pill[data-tone='coral'] i { background: var(--coral); } .pill[data-tone='amber'] i { background: var(--amber); } .pill[data-tone='ink'] i { background: var(--ink-3); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-4); }
.dots i.on { background: var(--ink-2); box-shadow: none; }
.muted { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faint { color: var(--ink-4); }
.av { display: inline-flex; }
.av span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--ink); background: var(--s4); box-shadow: 0 0 0 2px var(--canvas); margin-left: -4px; }
.av span:first-child { margin-left: 0; }
.row[aria-selected='true'] .av span { box-shadow: 0 0 0 2px var(--s2); }
.empty { padding: 60px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* 보드 */
.board { display: flex; gap: 12px; padding: 16px 20px; min-height: 100%; align-items: flex-start; }
.col { width: 272px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.col header { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.col header .n { color: var(--ink-4); }
.card { border: 1px solid var(--line); background: var(--s1); border-radius: 8px; padding: 12px; display: grid; gap: 8px; cursor: pointer; text-align: left; box-shadow: var(--shadow-sm); }
a.card { color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--line-2); background: var(--s2); }
.card[aria-selected='true'] { border-color: var(--accent); }
.card .b { font-size: 12px; color: var(--ink-4); }
.card .n2 { font-weight: 500; line-height: 1.4; }
.card .f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .f .av { margin-left: auto; }
.col.is-empty { width: 176px; }
.col .none { padding: 14px; border: 1px dashed var(--line); border-radius: 8px; font-size: 12px; color: var(--ink-4); text-align: center; }

/* 흐름: 프로젝트마다 단계가 한 줄로 */
.flow { padding: 8px 0 40px; }
.frow { display: grid; grid-template-columns: minmax(240px, 300px) 1fr 70px; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); cursor: pointer; }
.frow:hover { background: var(--s1); }
.frow[aria-selected='true'] { background: var(--s2); box-shadow: inset 2px 0 0 var(--accent); }
.frow .t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .t span { font-size: 12px; color: var(--ink-4); }
.track { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.seg { position: relative; height: 6px; border-radius: 3px; background: var(--s3); }
.seg.past { background: var(--ink-4); }
.seg.current { background: var(--ink); }
.seg.current::after { content: ''; position: absolute; inset: -4px -2px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-3); }
.seg.paused { background: var(--amber); }
.seg.skip { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.seg.nodate { opacity: 0.55; }
.seg small { position: absolute; top: 10px; left: 0; font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.seg.current small { color: var(--ink-2); font-weight: 500; }
.flowhead { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(240px, 300px) 1fr 70px; gap: 16px; padding: 8px 20px; background: var(--canvas); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-4); }
.flowhead .track span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .track { padding-bottom: 14px; }

/* 오늘 */
.inbox { padding: 8px 0; }
.irow { display: grid; grid-template-columns: 16px 1fr auto; gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); cursor: pointer; }
.irow:hover { background: var(--s1); }
.irow[aria-selected='true'] { background: var(--s2); box-shadow: inset 2px 0 0 var(--accent); }
.irow .t b { display: block; font-weight: 500; }
.irow .t span { font-size: 12px; color: var(--ink-3); }
.irow .why { font-size: 13px; }
.intro { padding: 20px 20px 8px; }
.intro h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.intro p { margin: 0; color: var(--ink-3); font-size: 13px; }

/* ---------- 상세 ---------- */
.detail { border-left: 1px solid var(--line); background: var(--canvas); display: none; flex-direction: column; min-height: 0; min-width: 0; }
body.has-detail .detail { display: flex; }
.dbar { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.dbar .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar .crumb b { color: var(--ink-2); font-weight: 500; }
.iconbtn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: none; display: grid; place-items: center; cursor: pointer; color: var(--ink-3); flex: none; }
.iconbtn:hover { background: var(--s2); border-color: var(--line); color: var(--ink); }
.dbar .iconbtn:first-of-type { margin-left: auto; }
.dbody { flex: 1; overflow: auto; padding: 22px 20px 32px; }
.dbody h2 { margin: 0 0 16px; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.props { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; align-items: center; margin-bottom: 22px; font-size: 13px; }
.props dt { color: var(--ink-3); }
.props dd { margin: 0; color: var(--ink); display: flex; align-items: center; gap: 8px; min-height: 26px; flex-wrap: wrap; }
.props .lockv { color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.props .lockv .ic { width: 13px; height: 13px; }
.sec { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; }
.sec h3 { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--ink-2); display: flex; justify-content: space-between; }
.sec h3 span { color: var(--ink-4); font-weight: 400; }
.stepper { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin-bottom: 14px; }
.stepper button { height: 28px; border: 0; border-radius: 4px; background: var(--s2); cursor: pointer; position: relative; }
.stepper button::after { content: ''; position: absolute; left: 10%; right: 10%; top: 12px; height: 4px; border-radius: 2px; background: var(--s4); }
.stepper button.past::after { background: var(--ink-4); }
.stepper button.current::after { background: var(--ink); }
.stepper button.paused::after { background: var(--amber); }
.stepper button.skip { opacity: 0.35; cursor: default; }
.stepper button:hover:not(.skip) { background: var(--s3); }
.stepper button[aria-pressed='true'] { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.stagehead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.stagehead b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.stagehead span { font-size: 12px; color: var(--ink-3); }
.stagesub { margin: 0 0 10px; font-size: 12px; color: var(--ink-3); }
.tasks { list-style: none; margin: 0 0 6px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tasks li + li { border-top: 1px solid var(--line); }
.tasks label { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; cursor: pointer; font-size: 13px; background: var(--s1); }
.tasks label:hover { background: var(--s2); }
.tasks input { appearance: none; margin: 0; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-4); flex: none; display: grid; place-items: center; cursor: pointer; }
.tasks input:hover { border-color: var(--ink-3); }
.tasks input:checked { background: var(--accent); border-color: var(--accent); }
.tasks input:checked::after { content: ''; width: 7px; height: 3.5px; border: solid #fff; border-width: 0 0 1.6px 1.6px; transform: translateY(-1px) rotate(-45deg); }
.tasks input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.sample { margin: 0 0 8px; font-size: 12px; color: var(--ink-4); }
.add { display: flex; gap: 6px; margin: 8px 0 16px; }
.add input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); color: var(--ink); font-size: 13px; }
.add input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 0; }
.add input::placeholder { color: var(--ink-4); }
.btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--s2); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: var(--line-2); color: var(--ink); }
.btn.primary { border: 0; background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:active { background: var(--accent-focus); }
.btn.wide { width: 100%; justify-content: center; height: 36px; }
.btn small { font-weight: 400; opacity: 0.85; }
.note { margin: 6px 0 18px; font-size: 12px; color: var(--ink-4); text-align: center; }
.blocked { margin: 0 0 16px; padding: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.log li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start; color: var(--ink-3); }
.log li b { color: var(--ink-2); font-weight: 500; }
.log time { font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.nlink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--accent-hover); text-decoration: none; margin-top: 18px; }
.nlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 알림, 확인 ---------- */
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; }
/* popover 기본 모양(가운데·테두리·배경) 지우기 */
.toasts[popover] { inset: auto auto 20px 50%; margin: 0; padding: 0; border: 0; background: none; overflow: visible; color: inherit; }
.toast { position: relative; display: flex; align-items: center; gap: 14px; min-width: 340px; max-width: 540px; padding: 12px 12px 12px 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--s3); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; animation: rise 0.3s var(--ease); }
.toast.is-leaving { opacity: 0; transition: 0.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.toast-body { flex: 1; } .toast-text { margin: 0; font-weight: 500; font-size: 14px; } .toast-note { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.toast-undo { height: 28px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--s1); color: var(--ink); font-weight: 500; font-size: 13px; cursor: pointer; }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); animation: timer 6s linear forwards; }
@keyframes timer { from { width: 100%; } to { width: 0; } }
dialog { width: min(440px, calc(100vw - 32px)); padding: 22px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s1); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: var(--backdrop); }
dialog h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
dialog .proj { margin: 0 0 16px; font-size: 13px; color: var(--ink-3); }
.move { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--canvas); margin-bottom: 14px; }
.move div { font-size: 14px; font-weight: 600; } .move small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; margin-bottom: 2px; } .move .to { text-align: right; }
.effects { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.effects li { display: flex; gap: 9px; } .effects li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--amber); } .effects b { color: var(--ink); font-weight: 600; }
.acts { display: flex; justify-content: flex-end; gap: 8px; } .acts button { height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; }
.cancel { border: 1px solid var(--line); background: var(--s2); color: var(--ink); } .ok { border: 0; background: var(--accent); color: #fff; } .ok:hover { background: var(--accent-hover); }

/* ---------- 리드 (리더 전용) ---------- */
.lsec { margin-top: 18px; border-top: 1px solid var(--line); }
.lhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 20px; background: var(--canvas); border-bottom: 1px solid var(--line); }
.lhead h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.lhead .n { font-size: 12px; color: var(--ink-4); }
.lhead .spacer { flex: 1; }
.lhead .src { font-size: 12px; color: var(--ink-4); }
.sampletag { height: 20px; padding: 0 7px; border-radius: 5px; border: 1px dashed var(--line-3); font-size: 11px; font-weight: 500; color: var(--ink-3); display: inline-flex; align-items: center; }
.legend { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; font-size: 12px; color: var(--ink-4); }
.legend .lg-c, .legend .lg-u { display: inline-flex; align-items: center; gap: 4px; }
.legend .lg-c i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.legend .lg-c i:first-child { margin-left: 0; }
.legend .lg-u i { width: 16px; height: 16px; font-size: 9.5px; }
.legend .lg-u i:last-of-type { margin-left: 6px; margin-right: 2px; }
.lnote { margin: 0; padding: 14px 20px; font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line); }

/* 팀원 표 */
.tcols, .trow { display: grid; grid-template-columns: minmax(84px, 0.6fr) minmax(210px, 1.3fr) minmax(160px, 1.2fr) minmax(120px, 1fr) 60px 40px 68px; align-items: center; gap: 12px; padding: 0 20px; }
.tcols { height: 30px; font-size: 12px; color: var(--ink-4); border-bottom: 1px solid var(--line); }
.tcols .c-n, .trow .c-n { text-align: right; justify-content: flex-end; }
.tpart { height: 28px; display: flex; align-items: center; padding: 0 20px; font-size: 12px; font-weight: 500; color: var(--ink-3); background: var(--s1); border-bottom: 1px solid var(--line); }
.trow { width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--ink); font-size: 13px; }
.trow:hover { background: var(--s1); }
.trow > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trow .who b { font-weight: 500; white-space: nowrap; }
.trow .who small { font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.trow small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow small.late { color: var(--coral); }
.num { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.num[data-tone='coral'] { color: var(--coral); } .num[data-tone='amber'] { color: var(--amber); }
.zero { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.cond { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cond .cells { display: inline-flex; gap: 3px; }
.cond .cells i { width: 18px; height: 18px; border-radius: 4px; background: var(--s4); }
.cond .cells i.gap { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
[data-s='1'] { --cs: var(--c1); } [data-s='2'] { --cs: var(--c2); } [data-s='3'] { --cs: var(--c3); } [data-s='4'] { --cs: var(--c4); } [data-s='5'] { --cs: var(--c5); }
.cond .cells i[data-s], .legend .lg-c i[data-s] { background: var(--cs); }
.cond b { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cond small { white-space: nowrap; }
.cond b[data-s] { color: var(--cs); }
.cond small { color: var(--ink-4); }
.units { display: inline-flex; gap: 3px; }
/* 진행 칸: 컨디션 칸과 같은 18px 네모, 안에 역할 글자. 주 = 밝게 채움, 부 = 어둡게 채움, 후 = 테두리만, 멈춤 = 노란 점선 테두리 */
.units i, .legend .lg-u i { width: 18px; height: 18px; border-radius: 4px; flex: none; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1; }
.u-main { background: var(--ink-2); color: var(--canvas); }
.u-sub { background: var(--s4); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.u-post { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-3); }
.units i.u-paused, .legend i.u-paused { background: none; color: var(--amber); box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--amber) 75%, transparent); outline-offset: -1.5px; }
.num small { font-weight: 400; color: var(--amber); font-size: 12px; }
.jumps { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.jumps button { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--s1); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.jumps button span { color: var(--ink-4); font-weight: 400; font-size: 12px; }
.jumps button:hover { border-color: var(--line-2); background: var(--s2); color: var(--ink); }

/* 리드 업무 */
.lgroup { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 20px; font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--s1); border-bottom: 1px solid var(--line); }
.lgroup .n { color: var(--ink-4); }
.lgroup .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.lgroup .dot[data-tone='coral'] { background: var(--coral); } .lgroup .dot[data-tone='amber'] { background: var(--amber); }
.lrow { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(200px, 1fr) 104px 76px 20px; align-items: center; gap: 14px; min-height: 48px; padding: 6px 20px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.lrow.link { cursor: pointer; }
.lrow.link:hover { background: var(--s1); }
.lrow.link:hover .go { color: var(--ink-2); }
.lrow .t { min-width: 0; }
.lrow .t b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .t span { font-size: 12px; color: var(--ink-4); }
.lrow .hint { color: var(--ink-3); line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lrow .tag { height: 18px; padding: 0 6px; border-radius: 4px; background: var(--s3); font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; }
.lrow .when { font-size: 12px; color: var(--ink-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lrow .go { color: var(--ink-4); display: grid; place-items: center; }
.lrow .go .ic { width: 14px; height: 14px; }
.irow .warn { color: var(--coral); }
.lsec:last-child { margin-bottom: 40px; }

body.has-detail .tcols, body.has-detail .trow { grid-template-columns: minmax(130px, 1fr) minmax(170px, 1.2fr) minmax(90px, 0.8fr) 64px; }
body.has-detail .trow .c-outs, body.has-detail .tcols .c-outs, body.has-detail .trow .c-n:nth-last-child(-n+2), body.has-detail .tcols .c-n:nth-last-child(-n+2) { display: none; }
body.has-detail .lrow { grid-template-columns: 1fr 104px 70px 20px; } body.has-detail .lrow .hint { display: none; }
@media (max-width: 1100px) {
  .tcols, .trow { grid-template-columns: minmax(130px, 1fr) minmax(170px, 1.2fr) minmax(90px, 0.8fr) 64px; }
  .trow .c-outs, .tcols .c-outs, .trow .c-n:nth-last-child(-n+2), .tcols .c-n:nth-last-child(-n+2) { display: none; }
  .legend { display: none; }
}
@media (max-width: 900px) {
  .tcols, .trow { grid-template-columns: 1fr auto; } .trow > :nth-child(n+3), .tcols > :nth-child(n+3) { display: none; }
  .lrow { grid-template-columns: 1fr auto; } .lrow .hint, .lrow .go, .lrow .when { display: none; }
  .lhead .src { display: none; }
}

/* ---------- 내 업무 입력 (표 입력) ---------- */
.work { min-width: 100%; width: max-content; }
.wtabs { position: sticky; top: 0; left: 0; z-index: 4; display: flex; align-items: center; gap: 2px; height: 46px; padding: 0 16px; background: var(--canvas); border-bottom: 1px solid var(--line); width: 100%; min-width: 100%; }
.wtabs [role='tab'] { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.wtabs [role='tab']:hover { color: var(--ink); background: var(--s2); }
.wtabs [role='tab'][aria-selected='true'] { color: var(--ink); background: var(--s3); box-shadow: inset 0 0 0 1px var(--line-2); }
.wtabs .bl { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.wtabs .spacer { flex: 1; }
.wtoggle { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--s1); color: var(--ink-3); font-size: 12px; font-weight: 500; cursor: pointer; margin-left: 6px; }
.wtoggle:hover { color: var(--ink); border-color: var(--line-2); }
.wtoggle[aria-pressed='true'] { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.wnote { position: sticky; left: 0; margin: 0; padding: 10px 20px; font-size: 12px; color: var(--ink-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: calc(100vw - var(--side)); }
.wnote b { color: var(--amber); font-weight: 500; }
.wpad { margin: 16px 20px; }
.wgrid { border-top: 1px solid var(--line); padding-bottom: 60px; }
.wrow { display: grid; align-items: stretch; min-height: 40px; border-bottom: 1px solid var(--line); }
.wrow > span { min-width: 0; }
.whead { position: sticky; top: 46px; z-index: 3; min-height: 32px; background: var(--canvas); font-size: 12px; color: var(--ink-4); }
.whead > span { display: flex; align-items: center; padding: 0 10px; border-left: 1px solid var(--line); }
.whead > span.need::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); margin-left: 5px; opacity: 0.8; }
.whead .wname { border-left: 0; }
.wgroup { position: sticky; left: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 20px; font-size: 12px; font-weight: 500; color: var(--ink-3); background: var(--s1); border-bottom: 1px solid var(--line); width: calc(100vw - var(--side)); }
.wgroup span { color: var(--ink-4); font-weight: 400; }
.wname { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; background: var(--canvas); border-right: 1px solid var(--line); }
.wrow:hover .wname, .wrow:hover .wcell:not(.sel) { background-color: var(--s1); }
.pname { min-width: 0; border: 0; background: none; padding: 4px 0; text-align: left; cursor: pointer; color: var(--ink); display: grid; }
.pname b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname small { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname small em { font-style: normal; color: var(--amber); }
.pname:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.nooutput { margin-left: auto; flex: none; font-size: 11px; color: var(--amber); }
.wname.sub { padding-left: 34px; font-size: 13px; }
.wname.sub b { font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wname.sub small { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.twig { position: absolute; left: 22px; top: 0; bottom: 50%; width: 8px; border-left: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); border-bottom-left-radius: 4px; }
.wname .rm { margin-left: auto; width: 22px; height: 22px; opacity: 0; }
.wrow:hover .wname .rm, .wname .rm:focus-visible { opacity: 1; }
.wname .rm .ic { width: 12px; height: 12px; }
.drow .wname { background: var(--canvas); }
.dim .wcell, .dim .wname.sub b { color: var(--ink-4); }
.wadd { min-height: 34px; }
.addbtn { height: 26px; margin-left: 14px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ink-4); font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.addbtn:hover:not(:disabled) { color: var(--accent-hover); background: var(--accent-soft); }
.addbtn:disabled { cursor: not-allowed; opacity: 0.5; }
.addbtn .ic { width: 13px; height: 13px; }
.wcell { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-left: 1px solid var(--line); font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.wcell.right { justify-content: flex-end; }
.wcell.na { cursor: default; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--stripe) 6px 7px); }
.wcell.ro { cursor: default; color: var(--ink-3); }
.wcell.sel { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); z-index: 1; }
.wcell.blank { background: color-mix(in srgb, var(--amber) 4%, transparent); }
.wcell .ph { font-style: normal; color: var(--ink-4); font-size: 12px; }
.wcell.blank .ph { color: color-mix(in srgb, var(--amber) 70%, transparent); }
.wcell .past { color: var(--ink-3); }
.wcell .chip { height: 20px; padding: 0 7px; border-radius: 5px; background: var(--s3); color: var(--ink-2); font-size: 12px; display: inline-flex; align-items: center; flex: none; }
.wcell .numv { font-variant-numeric: tabular-nums; font-weight: 500; }
.wcell .more { margin-left: 4px; font-size: 11px; color: var(--ink-4); }
.wcell .wro, .wcell .wlink { font-size: 12px; color: var(--ink-4); }
.wcell .wlink { color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.wcell .wlink:hover { color: var(--accent-hover); }
.wcell .wlink .ic { width: 13px; height: 13px; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.rwbtn { margin-left: auto; flex: none; }
.btn.sm .ic { width: 12px; height: 12px; }

/* 편집 창 */
.wpop { position: fixed; z-index: 70; min-width: 220px; max-width: 320px; padding: 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--s2); box-shadow: var(--shadow-lg); animation: pop 0.14s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-3px); } }
.wpop .pt { margin: 4px 6px 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.wpop .pf { width: 100%; height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--s1); color: var(--ink); font-size: 13px; outline: none; }
.wpop textarea.pf { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; font-family: var(--sans); }
.wpop .pf:focus { border-color: var(--accent); }
.wpop .pf.bad, .wpop .bad { border-color: var(--coral) !important; }
.wpop .pl { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow: auto; }
.wpop .pl li { height: 32px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.wpop .pl li[aria-selected='true'] { background: var(--s4); color: var(--ink); }
.wpop .pl li.clear { color: var(--ink-3); border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; }
.wpop .pl li.none { color: var(--ink-4); cursor: default; }
.wpop .pl li kbd { margin-left: auto; }
.wpop .cb { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink-4); flex: none; }
.wpop .cb.on { background: var(--accent); box-shadow: none; position: relative; }
.wpop .cb.on::after { content: ''; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.wpop .dotsel { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hover); flex: none; }
.wpop .dotsel.off { background: none; }
.wpop .ph2 { margin: 6px 6px 2px; font-size: 11.5px; color: var(--ink-4); }
.wpop-date { width: 264px; }
.wpop .prev { margin: 6px 6px 4px; font-size: 12px; color: var(--ink-2); min-height: 18px; }
.wpop .prev.bad { color: var(--coral); }
.wpop .prev.shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.cal .ch { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 4px; font-size: 12px; color: var(--ink-2); }
.cal .ch .iconbtn { width: 24px; height: 24px; }
.cal .ch .iconbtn:first-child .ic { transform: rotate(-90deg); } .cal .ch .iconbtn:last-child .ic { transform: rotate(-90deg); }
.cal .cg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal .cg i { font-style: normal; font-size: 11px; color: var(--ink-4); text-align: center; padding: 2px 0; }
.cal .cg button { height: 30px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.cal .cg button:hover { background: var(--s4); color: var(--ink); }
.cal .cg button.out { color: var(--ink-4); }
.cal .cg button.today { box-shadow: inset 0 0 0 1px var(--line-3); }
.cal .cg button.on { background: var(--accent); color: #fff; }
.cal .cg button.hint { box-shadow: inset 0 0 0 1.5px var(--accent-hover); color: var(--ink); }
.wpop .pacts { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 6px; }
.wpop .pacts .spacer { flex: 1; order: -1; }
.wpop .pacts .nsbtn, .wpop .pacts [data-noshoot-off] { order: -2; }
/* 촬영 없음: 촬영 없이 만드는 건 (날짜 대신 표시) */
.nsbtn { justify-self: start; height: 24px; padding: 0 9px; border-radius: 6px; border: 1px dashed var(--line-3); background: var(--canvas); color: var(--ink-2); font: 500 12px var(--sans); cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.nsbtn:hover { background: var(--s2); border-color: var(--ink-4); border-style: solid; }
.nsbtn:disabled { opacity: 0.5; cursor: default; }
.wcell .ph.noshoot { color: var(--ink-3); }
.wpop .lnk { height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); font-size: 12px; cursor: pointer; }
.wpop .lnk:hover { color: var(--ink); background: var(--s4); }
.wpop-rework { width: 360px; max-width: 360px; padding: 12px; }
.wpop .fl { display: grid; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.wpop .fl input, .wpop .fl textarea { width: 100%; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--s1); color: var(--ink); font: 13px/1.5 var(--sans); outline: none; }
.wpop .fl input:focus, .wpop .fl textarea:focus { border-color: var(--accent); }
.wpop .rs { display: flex; flex-wrap: wrap; gap: 5px; }
.chipbtn { height: 26px; padding: 0 9px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--s1); color: var(--ink-3); font-size: 12px; cursor: pointer; }
.chipbtn:hover { color: var(--ink); }
.chipbtn[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
@media (max-width: 900px) { .wnote .keys { display: none; } .wgroup, .wnote { width: 100vw; max-width: 100vw; } }

body.has-detail .row { grid-template-columns: 16px minmax(200px, 1fr) 104px 70px 56px 118px; }
body.has-detail .row .c-next, body.has-detail .row .c-av { display: none; }
@media (max-width: 1100px) { .row { grid-template-columns: 16px minmax(180px, 1fr) 100px 80px 60px 110px; } .row .c-next, .row .c-av { display: none; } }
@media (max-width: 900px) {
  .app, body.has-detail .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .detail { position: fixed; inset: 0; z-index: 50; }
  .row { grid-template-columns: 16px 1fr 90px; } .row > :nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* 실서비스 추가: 쓰기 단계 표시, 불러오는 중, 실패 저장 상태 */
.lvl[hidden] { display: none; }
.lvl { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--s2); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.lvl i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.save[data-state='failed'] { color: var(--coral); }
.save[data-state='failed'] i { background: var(--coral); }
.loading { padding: 14px 0; font-size: 13px; color: var(--ink-3); }
.me { display: flex; align-items: center; gap: 8px; margin: 0 10px 10px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); font-size: 13px; }
.me .av span { width: 22px; height: 22px; font-size: 10px; }
.me b { font-weight: 500; }
.me small { color: var(--ink-3); margin-left: 2px; }
.me button { margin-left: auto; border: 0; background: none; color: var(--ink-4); font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.me button:hover { color: var(--ink); background: var(--s2); }
.stale { font-size: 12px; color: var(--amber); }
.btn:disabled, .btn.primary:disabled { opacity: 0.45; cursor: not-allowed; }
.tasks input:disabled { cursor: not-allowed; opacity: 0.6; }
.tabs button[hidden] { display: none; }

/* 리드 업무 보드 끌어 옮기기 */
.lboard .card[draggable='true'] { cursor: grab; }
.lboard .card.dragging { opacity: 0.4; }
.lboard .col.dropzone { display: none; }
body.lead-dragging .lboard .col.dropzone { display: flex; }
.lboard .droparea { min-height: 120px; border: 1px dashed var(--line-2); border-radius: 8px; }
.lboard .col.over .droparea, .lboard .col.over { background: var(--accent-soft); border-radius: 10px; }
.lboard .col.over .droparea { border-color: var(--accent); }
body.lead-dragging .lboard .col:not(.dropzone) { transition: background 0.12s; }
/* 끌 때만 화면 아래에 뜨는 완료·보류 자리 (보드가 길어도 스크롤 없이 닿게) */
.leaddock { position: fixed; left: calc(var(--side) + (100vw - var(--side)) / 2); bottom: 24px; transform: translate(-50%, 16px); z-index: 40; display: flex; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 0.16s var(--ease), transform 0.2s var(--ease); }
body.lead-dragging .leaddock { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.leaddock > div { width: 200px; height: 64px; border-radius: 12px; border: 1px dashed var(--line-3); background: var(--s2); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-content: center; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--ink); }
.leaddock > div .ic { grid-row: span 2; align-self: center; color: var(--ink-3); }
.leaddock > div small { font-size: 11.5px; font-weight: 400; color: var(--ink-4); }
.leaddock > div.over { border: 1px solid var(--accent); background: var(--accent-soft); }
.leaddock > div.over .ic { color: var(--accent-hover); }
/* 프로젝트 보드 끌기: 다음 단계 열만 밝게, 나머지는 흐리게 */
.pboard .card[draggable='true'] { cursor: grab; }
.pboard .card.dragging { opacity: 0.4; }
.pboard .col.dropzone { display: none; }
body.stage-dragging .pboard .col.dropzone.valid { display: flex; }
.pboard .droparea { min-height: 120px; border: 1px dashed var(--line-2); border-radius: 8px; }
body.stage-dragging .pboard .col:not(.valid) { opacity: 0.35; }
body.stage-dragging .pboard .col.valid { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.pboard .col.over { background: var(--accent-soft) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
.pboard .col.over .droparea { border-color: var(--accent); }
.stagehint { position: fixed; left: calc(var(--side) + (100vw - var(--side)) / 2); bottom: 24px; transform: translate(-50%, 12px); z-index: 40; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--s3); color: var(--ink-2); font-size: 13px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.16s var(--ease), transform 0.2s var(--ease); white-space: nowrap; }
body.stage-dragging .stagehint { opacity: 1; transform: translate(-50%, 0); }
/* 상세의 단계 고르기 (노션 status처럼) */
.stagepick { display: inline-flex; align-items: center; gap: 8px; height: 28px; margin-left: -8px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink); font-size: 13px; cursor: pointer; }
.stagepick .ic { width: 12px; height: 12px; color: var(--ink-4); }
.stagepick:hover:not(:disabled) { background: var(--s2); border-color: var(--line); }
.stagepick:disabled { cursor: not-allowed; }
.stagepop { width: 220px; padding: 4px; }
.stagepop .pg { margin: 8px 8px 4px; font-size: 11px; font-weight: 500; color: var(--ink-4); }
.stagepop .pg:first-child { margin-top: 4px; }
.stagepop .po { height: 32px; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.stagepop .po[aria-selected='true'] { background: var(--s4); color: var(--ink); }
.stagepop .po .cur { margin-left: auto; font-size: 11px; color: var(--ink-4); }
/* 긴 이름은 한 줄로 자름 (줄바꿈되면 32px 칸에서 겹침) */
.stagepop .po .pol { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
dialog [data-c-warn] { color: var(--ink); }
dialog [data-c-warn]::before { background: var(--coral) !important; }
dialog [data-c-warn][hidden] { display: none; }
/* 상태 칩 (카드·줄에서 바로 바꾸기) */
.lb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stchip { margin-left: auto; flex: none; height: 22px; padding: 0 6px 0 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--s2); color: var(--ink-2); font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.stchip .ic { width: 10px; height: 10px; color: var(--ink-4); }
.stchip:hover { border-color: var(--line-3); color: var(--ink); }
.stchip.ro { cursor: default; }
.lrow .stchip { margin-left: 0; justify-self: start; }
.sd { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; display: inline-block; }
.sd[data-st='검토 대기'] { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.sd[data-st='예정'] { background: var(--ink-3); } .sd[data-st='진행 중'] { background: var(--accent-hover); }
.sd[data-st='중단됨'] { background: var(--amber); } .sd[data-st='완료'] { background: var(--ok); } .sd[data-st='보류'] { background: var(--ink-4); }
.card .lb .stchip { font-size: 11px; }
.lcard { cursor: pointer; }
.lbar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.lbar .n { font-size: 12px; color: var(--ink-4); } .lbar .spacer, .lhead .spacer { flex: 1; }
.lhead .btn.sm { margin-left: 10px; }
.amenu .po .sd { margin-right: 1px; }
.amenu { max-height: 360px; overflow: auto; }
/* 새 리드 업무 작성 창 */
dialog.composer { width: min(620px, calc(100vw - 32px)); padding: 18px 18px 14px; overflow: visible; }
.composer .ctop { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); display: flex; gap: 10px; align-items: baseline; }
.composer .ctop span { font-weight: 400; color: var(--ink-4); }
.composer .ctitle { width: 100%; border: 0; background: none; color: var(--ink); font: 600 20px/1.35 var(--sans); letter-spacing: -0.015em; padding: 4px 0; outline: none; }
.composer .ctitle::placeholder { color: var(--ink-4); }
.composer .ctitle.bad::placeholder { color: var(--coral); }
.composer .cdone { width: 100%; margin-top: 6px; border: 0; background: none; color: var(--ink-2); font: 14px/1.55 var(--sans); padding: 2px 0; resize: none; outline: none; }
.composer .cdone::placeholder { color: var(--ink-4); }
.composer .cchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.cchip { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--s2); color: var(--ink-3); font-size: 12.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchip:hover { color: var(--ink); border-color: var(--line-3); }
.cchip.set { color: var(--ink); background: var(--s3); }
.composer .cfoot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.composer .cfoot .spacer { flex: 1; }
.composer .cmore { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.composer .btn kbd { margin-left: 4px; background: rgba(255, 255, 255, 0.12); border-color: transparent; color: #fff; }

/* ---------- 노션 태그: 옵션 색 그대로 (선택·단계·상태 값) ---------- */
.tg { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 400; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--tg-default); color: var(--tf-default); flex: none; }
.tg[data-c='gray'] { background: var(--tg-gray); color: var(--tf-gray); }
.tg[data-c='brown'] { background: var(--tg-brown); color: var(--tf-brown); }
.tg[data-c='orange'] { background: var(--tg-orange); color: var(--tf-orange); }
.tg[data-c='yellow'] { background: var(--tg-yellow); color: var(--tf-yellow); }
.tg[data-c='green'] { background: var(--tg-green); color: var(--tf-green); }
.tg[data-c='blue'] { background: var(--tg-blue); color: var(--tf-blue); }
.tg[data-c='purple'] { background: var(--tg-purple); color: var(--tf-purple); }
.tg[data-c='pink'] { background: var(--tg-pink); color: var(--tf-pink); }
.tg[data-c='red'] { background: var(--tg-red); color: var(--tf-red); }
.wcell .tg + .tg { margin-left: 2px; }
.col header .tg { font-size: 12.5px; font-weight: 500; }
/* 상태·단계 칩 = 태그 + 펼침 표시, 테두리는 마우스를 올릴 때만 */
.stchip { border-color: transparent; background: none; padding: 0 3px; gap: 3px; }
.stchip:hover { background: var(--s2); border-color: transparent; }
.stagepick .tg { font-size: 13px; height: 22px; }

/* ---------- 테마 전환 ---------- */
.theme { display: inline-flex; padding: 2px; border-radius: 7px; background: var(--s2); gap: 2px; width: fit-content; }
.theme button { height: 22px; padding: 0 8px; border: 0; border-radius: 5px; background: none; color: var(--ink-3); font-size: 11.5px; font-weight: 500; cursor: pointer; }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed='true'] { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- 노션식 모양 다듬기: 굵은 제목, 6px 버튼, 가벼운 그림자 카드 ---------- */
.intro h2, .dbody h2, dialog h2 { font-weight: 700; letter-spacing: -0.02em; }
.ws strong { font-weight: 600; }
.btn { border-radius: 6px; }
.btn.primary, .ok { background: var(--accent); color: #fff; }
.card { border-radius: 6px; background: var(--canvas); box-shadow: var(--shadow-sm); }
.card:hover { background: var(--s1); }
.mark { background: var(--ink-2); }
.mark::after { background: var(--canvas); }
.pill { background: var(--canvas); }
.tasks label { background: var(--canvas); }
.wcell.sel { background: var(--accent-soft); }
.whead, .lhead, .wtabs, .flowhead { background: var(--canvas); }
.wname, .drow .wname { background: var(--canvas); }
.tpart, .ghead, .lgroup, .wgroup { background: var(--side-bg); }
/* 보드는 열이 이미 단계·상태를 말해 주므로 카드의 칩은 마우스를 올리거나 포커스했을 때만 */
.board .card .stchip { opacity: 0; transition: opacity 0.12s; }
.board .card:hover .stchip, .board .card:focus-within .stchip, .board .card .stchip:focus-visible { opacity: 1; }
@media (hover: none) { .board .card .stchip { opacity: 1; } }

/* ---------- 사이드바 아래 줄: 테마 아이콘 스위치 + 단축키 ⓘ ---------- */
.footrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.theme button { width: 26px; height: 22px; padding: 0; display: grid; place-items: center; }
.theme button .ic { width: 14px; height: 14px; }
.infobtn { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--ink-4); display: grid; place-items: center; cursor: help; }
.infobtn .ic { width: 16px; height: 16px; }
.infobtn:hover, .infobtn:focus-visible { color: var(--ink-2); background: var(--s2); }
.tipwrap { position: relative; display: inline-flex; }
.tip { position: absolute; z-index: 80; width: max-content; max-width: 280px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--canvas); box-shadow: var(--shadow-lg); color: var(--ink-2); font-size: 12px; line-height: 1.4; display: grid; gap: 6px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.12s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.12s; pointer-events: none; }
.tip b { font-weight: 600; color: var(--ink); font-size: 12px; margin-bottom: 2px; }
.tip .kr { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; }
.tip .kr > span:first-child { display: inline-flex; gap: 3px; align-items: center; color: var(--ink-3); }
.tip.up { bottom: calc(100% + 6px); right: 0; }
.tip.down { top: calc(100% + 6px); right: 0; }
.tipwrap:hover .tip, .tipwrap:focus-within .tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wnote .keys { margin-left: auto; }
/* 사이드바 툴팁은 사이드바 왼쪽 끝 기준으로 위로 펼침 (화면 밖으로 잘리지 않게) */
.footrow { position: relative; }
.footrow .tipwrap { position: static; }
.footrow .tip.up { left: 0; right: auto; }

/* ---------- 사이드바 접기 ( [ 키 ) : 아이콘만 남는 52px 레일 ---------- */
.ws .sidebtn { margin-left: auto; width: 26px; height: 26px; }
.ws .sidebtn .ic { width: 16px; height: 16px; }
body.side-min, .side-min-boot body { --side: 52px; }
.app { transition: grid-template-columns 0.18s var(--ease); }
body.side-min .ws { justify-content: center; padding: 0; }
body.side-min .ws .mark, body.side-min .ws strong { display: none; }
body.side-min .ws .sidebtn { margin: 0; }
body.side-min .ws .sidebtn .ic { transform: scaleX(-1); }
body.side-min .me { justify-content: center; margin: 0 6px 10px; padding: 5px 0; }
body.side-min .me b, body.side-min .me small, body.side-min .me button { display: none; }
body.side-min .nav { padding: 2px 6px; }
body.side-min .nav .lbl, body.side-min .nav .n { display: none; }
body.side-min .nav h6 { height: 1px; margin: 10px 6px; background: var(--line); overflow: hidden; }
body.side-min .nav button { justify-content: center; padding: 0; gap: 0; }
body.side-min .nav .dot { margin: 0; }
body.side-min .side-foot { padding: 10px 0; justify-items: center; }
body.side-min .save span, body.side-min #freshness, body.side-min .theme, body.side-min .footrow .tipwrap { display: none; }
body.side-min .footrow { justify-content: center; }

/* ---------- 알림 버튼 ---------- */
.ws .bellbtn { margin-left: auto; position: relative; width: 26px; height: 26px; }
.ws .bellbtn + .sidebtn { margin-left: 2px; }
.ws .bellbtn .ic { width: 16px; height: 16px; }
.bellbtn .badge { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--coral); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--side-bg); }
body.side-min .ws { flex-direction: column; justify-content: center; gap: 4px; height: auto; padding: 10px 0; }
body.side-min .ws .bellbtn { margin: 0; }

/* ---------- 확인 필요 시트 (오른쪽에서 열림) ---------- */
dialog.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; padding: 0; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: sheetin 0.22s var(--ease); }
dialog.sheet:not([open]) { display: none; }
@keyframes sheetin { from { transform: translateX(24px); opacity: 0; } }
.sheet .shead { height: 52px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.sheet .shead h2 { margin: 0; font-size: 15px; font-weight: 700; }
.sheet .sbody { flex: 1; overflow: auto; padding: 8px 0 32px; }
.sheet .sempty { margin: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }
.asec { padding: 14px 20px 6px; }
.asec h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.asec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aitem { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; background: var(--canvas); }
.aitem > .tg, .aitem > .btn { justify-self: start; }
.aproj { display: flex; align-items: flex-start; gap: 8px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--ink); min-width: 0; }
.aproj .si { margin-top: 2px; }
.aproj b { display: block; font-weight: 600; font-size: 13.5px; }
.aproj small { font-size: 12px; color: var(--ink-3); }
.aproj:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.afields { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.afield { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.afield input { height: 30px; padding: 0 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--line-2)); background: color-mix(in srgb, var(--coral) 5%, var(--canvas)); color: var(--ink); font: 13px var(--sans); outline: none; }
.afield input:focus { border-color: var(--accent); background: var(--canvas); }
.afield input::placeholder { color: var(--ink-4); }
.afield input:disabled { opacity: 0.6; cursor: not-allowed; }
.aprev { min-height: 14px; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.aprev.bad { color: var(--coral); }

/* ---------- 성과목표 ---------- */
/* 접힌 줄: 목표 하나 = 한 줄 (점 · 이름 · 막대 · 숫자 · 상태) */
.goals2 { padding: 0 20px 48px; max-width: 760px; }
.ggroup2 { margin: 22px 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.grow { border-bottom: 1px solid var(--line); }
.grow > summary { list-style: none; display: grid; grid-template-columns: 10px minmax(120px, 170px) 1fr 96px 64px 16px; align-items: center; gap: 14px; min-height: 52px; margin: 0 -8px; padding: 0 8px; border-radius: 6px; cursor: pointer; transition: background 0.12s; }
.grow > summary::-webkit-details-marker { display: none; }
.grow > summary:hover { background: var(--s2); }
.grow > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--dt-gray); }
.gdot[data-c='green'] { background: var(--dt-green); } .gdot[data-c='yellow'] { background: var(--dt-yellow); } .gdot[data-c='red'] { background: var(--dt-red); }
.gname2 { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbar2 { position: relative; height: 8px; border-radius: 4px; background: var(--s3); }
.gbar2 i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--dt-gray); }
.gbar2 i[data-c='green'] { background: var(--dt-green); } .gbar2 i[data-c='yellow'] { background: var(--dt-yellow); } .gbar2 i[data-c='red'] { background: var(--dt-red); }
.gbar2 em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }
.gval { text-align: right; white-space: nowrap; }
.gval b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gval small { margin-left: 4px; font-size: 12px; color: var(--ink-3); }
.gst { justify-self: end; font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.gst[data-c='green'] { color: var(--dt-green); } .gst[data-c='yellow'] { color: var(--dt-yellow); } .gst[data-c='red'] { color: var(--dt-red); }
.gchev { display: grid; place-items: center; color: var(--ink-4); transition: transform 0.18s var(--ease), color 0.12s; }
.gchev .ic { width: 14px; height: 14px; }
.grow > summary:hover .gchev { color: var(--ink-2); }
.grow[open] > summary .gchev { transform: rotate(90deg); }

/* 펼친 칸: 따뜻한 종이 위에 정의 → 숫자 → 월별 계획 → 프로젝트 → 인정 기준 */
.gpanel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 4px 0 18px 24px; padding: 20px 22px 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--side-bg); }
.grow.fresh > .gpanel { animation: gopen 0.22s var(--ease); }
@keyframes gopen { from { opacity: 0; transform: translateY(-4px); } }
.gpanel h5 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.gdef { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.gdef span { display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--canvas); font-size: 11.5px; font-weight: 600; line-height: 18px; color: var(--ink-3); vertical-align: 1px; }

.gfacts { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.gfact b { display: block; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.gfact b small { margin-left: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.gfact span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.gfact[data-c='red'] b { color: var(--dt-red); }
.gfnote { margin: -16px 0 0; font-size: 12px; color: var(--ink-3); }

.gtrack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.gtrack li { position: relative; padding: 22px 14px 0 0; }
.gtrack li::before { content: ''; position: absolute; top: 6px; left: 16px; right: 2px; height: 2px; border-radius: 1px; background: var(--line-2); }
.gtrack li:last-child::before { display: none; }
.gtrack li[data-t='past']::before { background: var(--ink-4); }
.gtrack li[data-t='now']::before { background: repeating-linear-gradient(90deg, var(--line-3) 0 4px, transparent 4px 8px); }
.gtn { position: absolute; top: 2px; left: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-3); background: var(--side-bg); box-sizing: border-box; }
.gtrack li[data-t='past'] .gtn { border-color: var(--ink-4); background: var(--ink-4); }
.gtrack li[data-t='now'] .gtn { --c: var(--dt-gray); top: 0; left: -2px; width: 14px; height: 14px; border: 3px solid var(--c); background: var(--canvas); box-shadow: 0 0 0 3px var(--side-bg), 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.gtrack li[data-c='green'] .gtn { --c: var(--dt-green); } .gtrack li[data-c='yellow'] .gtn { --c: var(--dt-yellow); } .gtrack li[data-c='red'] .gtn { --c: var(--dt-red); }
.gtm { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.gtm em { padding: 0 5px; border-radius: 4px; background: var(--tg-blue); color: var(--tf-blue); font-size: 10.5px; font-style: normal; line-height: 16px; }
.gtp { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-3); word-break: keep-all; }
.gtrack li[data-t='now'] .gtm { color: var(--ink); }
.gtrack li[data-t='now'] .gtp { font-weight: 600; color: var(--ink); }
.gtrack li[data-t='next'] .gtm, .gtrack li[data-t='next'] .gtp { color: var(--ink-4); }
.gtv { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gtv[data-ok='true'] { color: var(--dt-green); }
.gtv .ic { width: 13px; height: 13px; stroke-width: 2; }

.glh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.glh i { width: 8px; height: 8px; border-radius: 50%; background: var(--dt-default); }
.glh i[data-c='red'] { background: var(--dt-red); } .glh i[data-c='yellow'] { background: var(--dt-yellow); } .glh i[data-c='green'] { background: var(--dt-green); } .glh i[data-c='blue'] { background: var(--dt-blue); } .glh i[data-c='purple'] { background: var(--dt-purple); } .glh i[data-c='orange'] { background: var(--dt-orange); }
.glh span { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gpjs + .glh { margin-top: 16px; }
.gpjs { border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); overflow: hidden; }
.gpj { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; transition: background 0.12s; }
.gpjs > .gpj:first-child { border-top: 0; }
.gpj:hover { background: var(--s2); }
.gpj-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpj-n b { font-weight: 500; }
.gpj-p { margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--tg-default); color: var(--ink-2); font-size: 11.5px; font-style: normal; font-weight: 500; line-height: 18px; }
.gpj-n small { margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.gpj-d { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gpj-v { font-size: 12.5px; font-weight: 600; color: var(--dt-green); white-space: nowrap; }
.gpj-go { display: grid; place-items: center; color: var(--ink-4); opacity: 0; transition: opacity 0.12s; }
.gpj-go .ic { width: 14px; height: 14px; }
.gpj:hover .gpj-go, .gpj:focus-visible .gpj-go { opacity: 1; }
.gpjmore > summary, .gall > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--ink-3); }
.gpjmore > summary::-webkit-details-marker, .gall > summary::-webkit-details-marker { display: none; }
.gpjmore > summary { padding: 10px 12px; border-top: 1px solid var(--line); }
.gpjmore > summary:hover, .gall > summary:hover { color: var(--ink); }
.gpjmore[open] > summary { display: none; }
.gpjmore .gpj { border-top: 1px solid var(--line); }
.gall { margin-top: 10px; }
.gall > summary { display: inline-flex; align-items: center; gap: 6px; }
.gall > summary::before { content: ''; border-left: 4px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.12s; }
.gall[open] > summary::before { transform: rotate(90deg); }
.gall[open] > .gpjs { margin-top: 8px; }
.gempty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); font-size: 13px; color: var(--ink-2); }
.gempty .ic { width: 15px; height: 15px; color: var(--dt-green); stroke-width: 2; }

.gcrit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gcrit li { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--canvas); font-size: 12.5px; color: var(--ink-2); cursor: help; }

@media (max-width: 640px) {
  .grow > summary { grid-template-columns: 10px 1fr 80px 16px; } .gbar2, .gst { display: none; }
  .gpanel { margin-left: 0; padding: 16px; }
  .gtrack { grid-template-columns: 1fr; gap: 14px; }
  .gtrack li { padding: 0 0 0 24px; }
  .gtrack li::before { top: 16px; bottom: -12px; left: 4px; right: auto; width: 2px; height: auto; }
  .gtrack li[data-t='now']::before { background: repeating-linear-gradient(180deg, var(--line-3) 0 4px, transparent 4px 8px); }
  .gtp { display: inline; margin: 0 0 0 8px; }
  .gtm { display: inline-flex; }
  .gpj-go, .gpj-d, .gpj-n small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .grow.fresh > .gpanel { animation: none; } .gchev { transition: none; } }

/* ---------- 배정 (리더 전용) ---------- */
/* 요청일~최종 D.O. 평일 간트. 사람 줄 색 = 그날 맡은 프로젝트 수(컨디션과 같은 5단계), 검정 원 = 촬영일, 나머지는 회색. 여백으로 묶음 */
.assign { padding: 0 24px 112px; }
.asreqs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; }
.asreq { display: grid; gap: 3px; max-width: 360px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.asreq:hover { border-color: var(--line-3); }
.asreq[aria-selected='true'] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.asreq b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asreq small { font-size: 12.5px; color: var(--ink-3); }
.asreq em { font-style: normal; font-weight: 600; color: var(--ink); }
.asother { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--ink-3); font: 500 13px var(--sans); cursor: pointer; }
.asother:hover { background: var(--s2); color: var(--ink); }
.asother .ic { width: 14px; height: 14px; }
.aslede { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.aslede b { color: var(--ink); font-weight: 600; }
.gt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 16px; font-size: 12px; color: var(--ink-3); }
.gt-legend span { display: inline-flex; align-items: center; gap: 4px; }
.gt-legend .ld { width: 14px; height: 10px; margin: 0 2px 0 6px; border-radius: 2px; }
.gt-legend .sd { position: static; margin: 0 2px 0 0; }
.gt-legend .rq-est { width: 18px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 62%, var(--canvas)); background-image: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--canvas) 30%, transparent) 3px 4px); }
.asscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.gt { --l: 280px; position: relative; min-width: calc(var(--l) + var(--n) * 20px); font-size: 13px; }
.gt-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--l) minmax(0, 1fr); min-height: 36px; }
.gt-l { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 16px; background: var(--canvas); box-shadow: inset -1px 0 0 var(--line); }
.gt-track { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(20px, 1fr)); align-items: center; }
/* 배경 겹: 주 경계(월요일) · 이 요청 촬영일 · 오늘 */
.gt-over { position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--l); right: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(20px, 1fr)); pointer-events: none; }
.gt-over i { grid-row: 1; }
.gt-over .wk { box-shadow: inset 1px 0 0 var(--line); }
.gt-over .sh { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.gt-over .now { justify-self: center; width: 1px; background: var(--accent); opacity: 0.45; }
.gt-axis { min-height: 48px; border-bottom: 1px solid var(--line); }
.gt-axis .gt-track { align-items: end; padding-bottom: 8px; }
.gt-d { position: relative; display: grid; place-items: center; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.gt-d b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-weight: 400; }
.gt-d small { position: absolute; left: 3px; bottom: 22px; font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.gt-d.mon b { color: var(--ink-2); font-weight: 600; }
.gt-d.today b { background: var(--accent); color: #fff; font-weight: 600; }
.gt-d.shoot b { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 600; }
/* 이 요청 */
.gt-req { min-height: 64px; border-bottom: 1px solid var(--line); }
.gt-req .gt-l { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.gt-req .gt-l b { font-size: 14px; font-weight: 600; }
.gt-req .gt-l small { font-size: 12px; color: var(--ink-3); }
/* 이 요청: 가장 진하게 (확정 = 꽉 찬 파랑, 추천안 = 파란 테두리) */
.gt-rq { grid-row: 1; height: 28px; margin: 0 1px; padding: 0 8px; overflow: hidden; border-radius: 6px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; line-height: 28px; white-space: nowrap; text-overflow: ellipsis; }
.gt-rq.est { background: color-mix(in srgb, var(--accent) 62%, var(--canvas)); color: #fff; background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--canvas) 22%, transparent) 6px 8px); }
.gt-rq.shoot { padding: 0; background: var(--ink); }
.gt-rq.shoot.est { background: var(--canvas); box-shadow: inset 0 0 0 2px var(--ink); }
.gt-rq.end { padding: 0; background: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.gt-rq.end.est { background: var(--accent); }
.gt-rq.wait { background: color-mix(in srgb, var(--accent) 18%, var(--canvas)); background-image: none; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
/* 역할 묶음 이름: 칸 없이 여백과 작은 글자만 */
.gt-group { min-height: 0; }
.gt-group .gt-l { padding: 20px 16px 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); box-shadow: none; }
/* 사람 줄: 그날 맡은 프로젝트 수 = 회색 농도 */
.gt-person { min-height: 60px; }
.gt-person + .gt-person, .gt-proj + .gt-person { border-top: 1px solid var(--line); }
.gt-tog { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-left: -4px; border: 0; border-radius: 4px; background: none; color: var(--ink-4); cursor: pointer; }
.gt-tog:hover:not(:disabled) { background: var(--s2); color: var(--ink); }
.gt-tog:disabled { cursor: default; }
.gt-tog .ic { width: 14px; height: 14px; transition: transform 0.15s var(--ease); }
.gt-person.open .gt-tog .ic { transform: rotate(90deg); }
.gt-who { display: grid; gap: 3px; min-width: 0; flex: 1; }
.gt-who > span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.gt-who b { font-size: 14px; font-weight: 600; }
.gt-who small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-who .gt-cond.warn { color: var(--cs); font-weight: 500; }
.gt-who .gt-clash { color: var(--dt-red); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 그날 맡은 프로젝트 수: 1 파랑 · 2 초록 · 3 노랑 · 4 주황 · 5건 이상 빨강 (컨디션 5단계와 같은 색). 이 요청보다 옅게 */
.ld { --lc: var(--c1); grid-row: 1; height: 14px; background: color-mix(in srgb, var(--lc) 45%, var(--canvas)); }
.ld[data-n='2'] { --lc: var(--c2); } .ld[data-n='3'] { --lc: var(--c3); } .ld[data-n='4'] { --lc: var(--c4); } .ld[data-n='5'] { --lc: var(--c5); }
/* 촬영일: 검정 원. 속이 찬 원 = 원장에 확정, 빈 원 = 예상 */
.sd { grid-row: 1; z-index: 1; justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.sd.est { background: var(--canvas); box-shadow: inset 0 0 0 2px var(--ink); }
/* 펼친 프로젝트 줄 */
.gt-proj { min-height: 38px; }
.gt-proj .gt-l { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding-left: 46px; }
.gt-pn { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--ink-2); }
.gt-proj .gt-l small { font-size: 11px; color: var(--ink-4); }
.gt-bar { grid-row: 1; height: 8px; border-radius: 4px; background: var(--s4); }
.dd { grid-row: 1; z-index: 1; justify-self: end; width: 3px; height: 14px; margin-right: 2px; border-radius: 2px; background: var(--ink-3); }
.asroles { flex: none; display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.asrole { height: 26px; min-width: 32px; padding: 0 9px; border: 0; background: var(--canvas); color: var(--ink-3); font: 500 12px var(--sans); cursor: pointer; }
.asrole + .asrole { border-left: 1px solid var(--line-2); }
.asrole:hover { background: var(--s2); color: var(--ink); }
.asrole[aria-pressed='true'] { background: var(--accent); color: #fff; }
.asbar { position: sticky; bottom: 20px; z-index: 5; display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 14px 12px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); font-size: 13.5px; }
.asbar.on { box-shadow: var(--shadow-lg); }
.asbr { margin-right: 20px; }
.asbr small { margin-right: 6px; font-size: 12px; color: var(--ink-3); }
.asdiff { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; gap: 8px; }
.asdiff li { display: grid; grid-template-columns: 36px 1fr 16px 1fr; align-items: center; gap: 8px; font-size: 13.5px; }
.asdiff small { color: var(--ink-3); font-size: 12px; }
.asdiff .ic { width: 14px; height: 14px; color: var(--ink-4); }
.asfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 640px) { .assign { padding: 0 16px 112px; } .asbar { flex-wrap: wrap; } .gt { --l: 220px; } }
/* 추천 담당자: 노션 콜아웃처럼 조용한 종이색 카드 하나 */
.asrec { margin: 0 0 24px; padding: 18px 20px; border-radius: 12px; background: var(--side-bg); }
.asrec-h { display: flex; align-items: center; gap: 10px; }
.asrec-t { padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 20px; }
.asrec-h b { font-size: 15px; font-weight: 600; color: var(--ink); }
.asrec-ok { font-size: 12.5px; color: var(--ink-3); }
.asrec-l { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.asrec-l li { display: flex; gap: 10px; font-size: 13px; color: var(--ink-2); }
.asrec-l li b { flex: none; min-width: 48px; font-weight: 600; color: var(--ink); }
.asrec-n { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.asrec-n + .asrec-n { margin-top: 4px; }
.gt-rec { margin-left: 2px; padding: 0 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-style: normal; font-weight: 600; line-height: 16px; align-self: center; }
.stagepop.amenu { width: max-content; min-width: 240px; max-width: min(380px, calc(100vw - 32px)); }

/* ---------- 사이드 보기: 노션 페이지처럼 ---------- */
.dbody h2.pv-title { margin: 4px 0 10px; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.pv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; font-size: 13px; color: var(--ink-3); }
.pv-sigs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.pv-sec { margin: 22px 0 0; }
.pv-sub { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
/* 희망 ↔ 확정 ↔ 실제 */
.pv-cmp-g { display: grid; grid-template-columns: 52px 1fr 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 13px; }
.pv-cmp-g > span { padding: 9px 10px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pv-cmp-g > span:nth-child(-n+4) { border-top: 0; }
.pv-cmp-g .pv-ch { background: var(--side-bg); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.pv-cmp-g > span:first-child { background: var(--side-bg); }
.pv-cl { background: var(--side-bg); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pv-d { display: block; margin-top: 2px; font-size: 11px; font-style: normal; color: var(--ink-3); }
.pv-d.same { color: var(--ink-4); }
/* 요청자 자료 ↔ 촬영팀 기획안 */
.pv-mat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-mat-c { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.pv-mat-c h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.pv-mat-c .faint { margin: 0; font-size: 12.5px; }
.pv-link, .pv-file { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 0; color: var(--ink); text-decoration: none; font-size: 13px; }
.pv-link:hover, .pv-file:hover { color: var(--accent); }
.pv-link .ic, .pv-file .ic { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.pv-file span, .pv-link { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 속성 목록 */
.pv-gh { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.pv-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: start; gap: 8px; min-height: 32px; padding: 5px 0; font-size: 13.5px; }
.pv-k { padding-top: 1px; color: var(--ink-3); font-size: 13px; }
.pv-v { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ink); }
.pv-text { white-space: normal; line-height: 1.55; overflow-wrap: anywhere; }
.pv-at { color: var(--accent); font-weight: 500; }
.pv-person { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; }
.pv-person .av { width: 18px; height: 18px; font-size: 8px; }
.pv-check { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--line-3); }
.pv-check.on { background: var(--accent); box-shadow: none; color: #fff; }
.pv-check .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.pv-more { display: inline-block; margin: 2px 0 0; padding: 4px 0; border: 0; background: none; color: var(--ink-3); font: 500 12.5px var(--sans); cursor: pointer; }
.pv-more:hover { color: var(--ink); }
/* 댓글 */
.pv-th { padding: 12px 0; border-top: 1px solid var(--line); }
.pv-th:first-of-type { border-top: 0; padding-top: 2px; }
.pv-cm { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.pv-cm + .pv-cm { margin-top: 12px; }
.pv-cm .av { width: 24px; height: 24px; font-size: 9px; }
.pv-cm-h { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 2px; font-size: 13px; }
.pv-cm-h time { font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.pv-cm-t { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.pv-reply { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink-3); font-size: 12.5px; text-decoration: none; }
.pv-reply:hover { color: var(--ink); }
.pv-reply .ic { width: 14px; height: 14px; }
/* 본문 */
.pv-body { font-size: 14px; line-height: 1.65; color: var(--ink); }
.pvb-h { margin: 18px 0 6px; font-size: 15px; font-weight: 700; }
.pvb-h3 { margin: 14px 0 4px; font-size: 14px; font-weight: 600; }
.pvb-p { margin: 4px 0; overflow-wrap: anywhere; }
.pvb-gap { height: 8px; }
.pvb-li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px; margin: 3px 0; }
.pvb-li > i { font-style: normal; color: var(--ink-3); text-align: center; }
.pvb-li .done { color: var(--ink-3); text-decoration: line-through; }
.pvb-tg { margin: 4px 0; }
.pvb-tg > summary { cursor: pointer; font-weight: 500; }
.pvb-tg > div { padding: 2px 0 2px 18px; }
.pvb-co { display: flex; gap: 10px; margin: 8px 0; padding: 12px 14px; border-radius: 8px; background: var(--side-bg); }
.pvb-q { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--ink); }
.pvb-hr { margin: 14px 0; border: 0; border-top: 1px solid var(--line); }
.pvb-code { margin: 8px 0; padding: 10px 12px; border-radius: 6px; background: var(--side-bg); font-size: 12.5px; white-space: pre-wrap; }
.pvb-img { display: block; max-width: 100%; margin: 8px 0; border-radius: 6px; }
.pvb-vid { display: block; width: 100%; max-height: 320px; margin: 8px 0 2px; border-radius: 6px; background: #000; }