/* Navigation drawer and typography refinements.
   Existing workspace components and local data remain unchanged. */
:root {
  --ink: var(--c147);
  --muted: var(--c148);
  --text-secondary: var(--c149);
  --text-muted: var(--c150);
  --sidebar: 16.25rem;
}
body { font-weight: 500; }
.main-shell { margin-left: 0; }
.header-brand { color: var(--c151); font-size: 0.875rem; font-weight: 800; white-space: nowrap; letter-spacing: -0.0312rem; }
.breadcrumb > svg { display: none; }
.mobile-menu { display: inline-flex; }

/* A small edge handle stays visible on desktop, tablet and phone. */
.sidebar {
  width: var(--sidebar);
  padding: 1.8125rem 1.375rem 0;
  transform: translateX(-100%);
  transition: transform .24s ease;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  z-index: 50;
  scrollbar-width: thin;
  scrollbar-color: var(--c152) transparent;
}
.sidebar.open { transform: translateX(0); box-shadow: 0.5rem 0 2.1875rem var(--c153); }
.sidebar > * { flex-shrink: 0; }
.sidebar .brand { font-size: 1.5rem; gap: 0.4375rem; margin: 0 0 1.875rem; white-space: nowrap; letter-spacing: -0.0625rem; }
.sidebar .brand-mark { width: 1.8125rem; }
.sidebar .brand-mark svg { width: 1.8125rem; }
.sidebar .growth-tip { margin: 1.5625rem 0.25rem 1.25rem; }
.sidebar .sidebar-bottom { margin-top: auto; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--c154); cursor: pointer; padding: 0; }
.sidebar-handle {
  position: fixed;
  left: 0;
  /* V1.5: 화면 세로 10:7 지점에 손잡이 가운데가 오도록 */
  top: 70%;
  transform: translateY(-50%);
  z-index: 51;
  width: 2rem;
  min-height: 5.875rem;
  padding: 0.75rem 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  border: 0.0625rem solid var(--c155);
  border-left: 0;
  border-radius: 0 0.8125rem 0.8125rem 0;
  background: var(--c156);
  color: var(--c157);
  box-shadow: 0.1875rem 0.125rem 0.75rem var(--c158);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: left .24s ease, background .15s ease;
  cursor: grab;
}
.sidebar-handle::before { content: ''; position: absolute; inset: -0.3125rem -0.5rem -0.3125rem 0; }
.sidebar-handle:hover { background: var(--c159); }
.handle-grip { width: 0.1875rem; height: 1.0625rem; background: var(--c160); border-radius: 0.1875rem; }
.handle-label { font-size: 0.6875rem; font-weight: 700; writing-mode: vertical-rl; letter-spacing: 0.125rem; }
.sidebar-handle svg { width: 0.875rem; height: 0.875rem; stroke-width: 2.5; }
.sidebar-is-open { overflow: hidden; }
.sidebar-is-open .sidebar-handle { left: var(--sidebar); }
.sidebar-is-open .sidebar-handle svg { transform: rotate(180deg); }
.sidebar-dragging, .sidebar-dragging .sidebar-handle { cursor: grabbing; user-select: none; }

/* Stronger text contrast, without changing the soft background palette. */
.workspace-label, .category-label span, .category-item span:last-child,
.sidebar-bottom small, .growth-tip p, .breadcrumb, .local-save, .text-button,
.eyebrow, .page-heading p, .stat-label, .stat-value > span, .stat-note,
.map-crumb, #focus-path, .sample-badge, .map-hint, .map-footer, .map-footer-note,
.map-controls span, .map-controls button, .node-progress-info, .node-children,
.root-node small, .detail-description, .progress-label, .level-caption,
.detail-section h3 small, .subskill-button span, .detail-note, .page-footer,
.section-top p, .list-skill p, .activity-item p, .empty-state,
.dialog-intro, #skill-form label small, .map-empty {
  color: var(--text-muted);
  font-weight: 500;
}
.nav-item, .category-item, .segmented button, .icon-button,
.step-row, .subskill-button, .add-stage, .add-child-button, .detail-actions button,
.section-top select, .search-box input, #skill-form input, #skill-form select, #skill-form textarea {
  color: var(--text-secondary);
  font-weight: 600;
}
.nav-item.active, .category-item.active, .segmented .active { color: var(--c161); font-weight: 700; }
.detail-category, .progress-label strong, .level-caption b, .badge { color: var(--c162); font-weight: 600; }
.step-row.done > span { color: var(--c163); }
.step-row.next > span::after { color: var(--c164); font-weight: 700; }
.detail-actions button:last-child { color: #965b52; }
.search-box input::placeholder, #skill-form input::placeholder, #skill-form textarea::placeholder { color: var(--c165); opacity: 1; }
.primary-button { font-weight: 700; }
.secondary-button, .node-title, .list-skill h3, .detail-section h3 { font-weight: 700; }
.node-progress-info strong, .node-level, .list-skill .list-category { font-weight: 700; }

/* Metadata used to be 8–0.625rem; lift the main labels and reading text slightly. */
.workspace-label, .sidebar-bottom small, .growth-tip p, .local-save,
.eyebrow, .stat-label, .stat-value > span, .map-crumb, .search-box input,
.sample-badge, .map-hint, .map-footer, .map-footer-note,
.map-controls span, .root-node small, .level-caption,
.detail-section h3 small, .subskill-button span, .detail-note, .page-footer,
.activity-item p, .list-skill p, .dialog-intro, #skill-form label small { font-size: 0.6875rem; }
.nav-item, .category-item { font-size: 0.8125rem; }
.page-heading p, .detail-description, .progress-label, .step-row,
.subskill-button, .add-stage, .add-child-button, .section-top p, .detail-actions button { font-size: 0.75rem; }
.stat-note { font-size: 0.625rem; }
.skill-node { line-height: 1.35; }
.node-title { font-size: 1rem; }
.node-level, .node-progress-info { font-size: 0.75rem; }
.node-progress-info { margin-top: 0.4375rem; }
.node-children { font-size: 0.6875rem; margin-top: 0.4375rem; padding-top: 0.375rem; }
.detail-category, .detail-header, .detail-section h3 { font-size: 0.75rem; }
.detail-note { line-height: 1.9; }
.step-row input { border-color: var(--c166); }
.step-row input:checked { background: var(--c167); border-color: var(--c167); }

@media (max-width: 1450px) {
  :root { --sidebar: 16.25rem; }
  .map-footer-note { display: none; }
}
@media (max-width: 1015px) {
  :root { --sidebar: min(16.25rem, calc(100vw - 3.375rem)); }
  .sidebar { padding: 1.625rem 1.25rem 0; }
  .sidebar .brand { font-size: 1.5rem; }
  .header-brand { font-size: 0.8125rem; }
  .breadcrumb { gap: 0.4375rem; }
  #page-breadcrumb { display: none; }
  .breadcrumb > span:first-of-type { display: none; }
  .page-content { padding-left: 1.1875rem; padding-right: 0.9375rem; }
  .local-save { font-size: 0.625rem; }
  .text-button { font-size: 0; }
  .eyebrow { font-size: 0.625rem; }
  .page-heading p { font-size: 0.75rem; }
  .stat-label { font-size: 0.6875rem; }
  .sample-badge { font-size: 0.5625rem; padding: 0.1875rem 0.3125rem; }
  .map-crumb { font-size: 0.625rem; }
  .search-box { max-width: 6.625rem; }
  .map-hint, .map-footer, .page-footer { font-size: 0.625rem; }
  .detail-description, .step-row { font-size: 0.8125rem; }
  .sidebar-handle { width: 1.8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-handle { transition: none; }
}

/* V1.3 가운데 이름 바꾸기 · 스킬 테마 색 */
.node-rename { position: absolute; width: 1.5rem; height: 1.5rem; border: 0.0625rem solid var(--c76); border-radius: 50%; background: #fff; color: var(--c77); display: flex; align-items: center; justify-content: center; left: -0.75rem; top: 2.75rem; padding: 0.1875rem; z-index: 2; }
.node-rename svg { width: 0.75rem; height: 0.75rem; }
.root-node .node-title { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; max-height: 2.625rem; overflow: hidden; }
.root-node .node-title.long { font-size: 0.8125rem; letter-spacing: -0.0312rem; }
.root-node .node-title.longer { font-size: 0.7188rem; max-height: 2.8125rem; }
.root-node.focused-root { background: var(--node-bg); border-color: var(--node-border); }
.root-node.focused-root .node-icon { background: #fff; color: var(--node-color); }
.color-field { margin-top: 0.125rem; }
.color-field-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.5625rem; }
.color-field-label small { font-weight: 400; color: var(--c146); font-size: 0.6875rem; margin-left: 0.375rem; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch { width: 1.75rem; height: 1.75rem; border-radius: 50%; padding: 0; border: 0.125rem solid transparent; outline-offset: 0.125rem; background: var(--swatch, #ccc); box-shadow: inset 0 0 0 0.125rem #fff; }
.swatch.auto { background: conic-gradient(#46668f, #766092, #925764, #95632f, var(--c168), #46668f); }
.swatch[aria-checked="true"] { border-color: var(--c169); box-shadow: inset 0 0 0 0.1875rem #fff; }
#skill-form .color-custom { display: inline-flex; flex-direction: row; align-items: center; gap: 0.5625rem; margin: 0.75rem 0 0; font-size: 0.6875rem; font-weight: 500; color: var(--c103); cursor: pointer; }
#skill-form .color-custom.active { color: var(--c169); font-weight: 700; }
#skill-form .color-custom input[type="color"] { width: 2.625rem; height: 1.75rem; flex: none; padding: 0.125rem; border: 0.0625rem solid var(--c170); border-radius: 0.4375rem; background: #fff; }
#root-form label { display: block; font-size: 0.75rem; font-weight: 600; margin-top: 0.375rem; }
#root-form label span { color: #a55d5d; }
#root-form input { width: 100%; margin-top: 0.5rem; padding: 0.6875rem 0.75rem; border: 0.0625rem solid var(--c171); border-radius: 0.5rem; background: #fcfdf9; }

/* V1.4 맵 5칸 · 가로세로 전환 */
.map-picker { position: relative; flex: none; }
.map-chip { gap: 0.3125rem; font-size: 0.625rem; font-weight: 600; color: var(--c149); background: var(--c70); border: 0.0625rem solid var(--c172); border-radius: 62.4375rem; padding: 0.3125rem 0.5625rem; max-width: 9.375rem; }
.map-chip svg { width: 0.75rem; height: 0.75rem; }
.map-chip #map-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-chip .chip-caret { opacity: .65; }
.map-menu { position: absolute; top: calc(100% + 0.375rem); left: 0; z-index: 30; width: 14.5rem; background: #fff; border: 0.0625rem solid var(--c173); border-radius: 0.625rem; box-shadow: 0 0.625rem 1.625rem var(--c174); padding: 0.375rem; display: flex; flex-direction: column; gap: 0.125rem; }
.map-option { width: 100%; justify-content: flex-start; gap: 0.5625rem; padding: 0.5625rem 0.625rem; border-radius: 0.4375rem; text-align: left; font-size: 0.6875rem; color: var(--c149); }
.map-option:hover { background: var(--c175); }
.map-option.active { background: var(--c11); }
.map-option.locked { color: var(--c176); }
.map-option-no { width: 1.1875rem; height: 1.1875rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c66); font-size: 0.5625rem; font-weight: 700; }
.map-option.active .map-option-no { background: var(--c74); color: #fff; }
.map-option-body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; }
.map-option-body b { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-option-body small { font-size: 0.625rem; color: var(--c146); font-weight: 400; }
.map-option svg { width: 0.8125rem; height: 0.8125rem; flex: none; }
.layout-toggle { margin-left: auto; display: flex; gap: 0.125rem; background: var(--c177); border: 0.0625rem solid var(--c178); border-radius: 0.4375rem; padding: 0.125rem; flex: none; }
.layout-toggle button { font-size: 0.5625rem; font-weight: 600; color: var(--c179); border-radius: 0.3125rem; padding: 0.25rem 0.5rem; gap: 0.25rem; }
.layout-toggle button svg { width: 0.75rem; height: 0.75rem; }
.layout-toggle button.active { background: #fff; color: var(--c162); box-shadow: 0 0.0625rem 0.1875rem var(--c62); }
.map-filterbar .sample-badge { margin-left: 0.375rem; }
.locked-card { padding: 0.25rem 0.125rem 0; }
.locked-list { list-style: none; margin: 1rem 0 0.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.locked-list li { display: flex; gap: 0.6875rem; align-items: flex-start; border: 0.0625rem solid var(--c180); background: #fbfcf7; border-radius: 0.5625rem; padding: 0.75rem 0.8125rem; }
.locked-list svg { width: 1.0625rem; height: 1.0625rem; color: var(--c181); flex: none; margin-top: 0.0625rem; }
.locked-list div { display: flex; flex-direction: column; gap: 0.1875rem; }
.locked-list b { font-size: 0.75rem; color: var(--c151); }
.locked-list span { font-size: 0.6875rem; line-height: 1.6; color: var(--c103); }
@media (max-width: 1015px) {
  .map-filterbar { flex-wrap: wrap; height: auto; padding: 0.5rem 0.6875rem; row-gap: 0.375rem; }
  .map-chip { max-width: 7.375rem; }
  .layout-toggle { margin-left: auto; }
  .map-menu { width: min(15.5rem, calc(100vw - 2rem)); }
}

/* V1.5 단계 삭제 */
.step-line { display: flex; align-items: flex-start; gap: 0.25rem; }
.step-line .step-row { flex: 1; min-width: 0; }
.step-delete { width: 1.375rem; height: 1.375rem; flex: none; border-radius: 0.375rem; color: var(--c182); padding: 0; margin-top: 0.0625rem; }
.step-delete svg { width: 0.8125rem; height: 0.8125rem; }
.step-delete:hover { background: #fbf1f0; color: #a55d5d; }
.delete-warning { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0.875rem 0 0.125rem; padding: 0.8125rem; border: 0.0625rem solid #f0dcda; background: #fdf5f4; border-radius: 0.5625rem; font-size: 0.6875rem; line-height: 1.7; color: #8a6360; }
.delete-warning svg { width: 1.0625rem; height: 1.0625rem; color: #c07a73; flex: none; margin-top: 0.0625rem; }
.delete-warning b { color: #a04b45; }

/* V1.5 맵 제목 바꾸기 */
.map-row { display: flex; align-items: stretch; gap: 0.125rem; border-radius: 0.4375rem; }
.map-row:hover { background: var(--c175); }
.map-row.active { background: var(--c11); }
.map-row .map-option { flex: 1; min-width: 0; }
.map-row .map-option:hover { background: transparent; }
.map-rename { width: 1.75rem; flex: none; border-radius: 0.375rem; color: var(--c183); }
.map-rename:hover { background: #fff; color: var(--c162); }
.map-rename svg { width: 0.8125rem; height: 0.8125rem; }
#map-title-form label { display: block; font-size: 0.75rem; font-weight: 600; margin-top: 0.375rem; }
#map-title-form label span { color: #a55d5d; }
#map-title-form input { width: 100%; margin-top: 0.5rem; padding: 0.6875rem 0.75rem; border: 0.0625rem solid var(--c171); border-radius: 0.5rem; background: #fcfdf9; }

/* V1.5 테마 색 고르개 (이 블록의 색은 미리보기용이라 테마와 함께 바뀌지 않아요) */
.theme-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 0.8125rem; margin-bottom: 0.375rem; }
.theme-dot { width: 1.375rem; height: 1.375rem; border-radius: 50%; padding: 0; border: 0.125rem solid transparent; box-shadow: inset 0 0 0 0.125rem #fff; }
.theme-dot[aria-checked="true"] { border-color: #6b7a63; }
.theme-dot.forest { background: #47785b; }
.theme-dot.ocean { background: #476478; }
.theme-dot.lilac { background: #5e4877; }
.theme-dot.plum { background: #77485e; }
.theme-dot.amber { background: #786347; }
.theme-dot.slate { background: #555f6a; }

/* V1.5 글자를 키우면서 좁은 화면에서 겹치지 않도록 다듬기 */
body { word-break: keep-all; }
.topbar { gap: 0.75rem; }
.breadcrumb { min-width: 0; }
.breadcrumb > span, .breadcrumb #page-breadcrumb, .header-brand { white-space: nowrap; }
@media (max-width: 1015px) {
  /* 좁은 화면에서는 '자동 저장됨' 글자를 접고 구름 아이콘만 남겨요 (사이드바에 같은 내용이 있어요) */
  .local-save span { display: none; }
  .breadcrumb > span:first-of-type, .breadcrumb #page-breadcrumb { display: none; }
  .topbar-right { gap: 0.6rem; }
  .text-button span { display: none; }
  .stat-card { padding: 0.9rem; gap: 0.6rem; }
  .stat-label { font-size: 0.62rem; line-height: 1.45; }
  .page-heading h1 { font-size: 1.5rem; }
}
@media (max-width: 660px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
}
/* 좁은 화면에서 통계 카드가 칸보다 커지지 않도록 (그리드 칸은 기본적으로 내용만큼 벌어져요) */
.stat-card, .stat-card > div, .skill-grid > * { min-width: 0; }
.stat-value { flex-wrap: wrap; }
@media (max-width: 480px) {
  /* 아주 좁은 화면(320px 등)에서는 검색칸이 줄어들도록 */
  .map-toolbar { flex-wrap: wrap; row-gap: 0.5rem; }
  .toolbar-actions { min-width: 0; flex: 1; }
  .search-box { min-width: 0; flex: 1; }
  .search-box input { min-width: 0; width: 100%; }
}

/* ---------- V1.6: 상단바를 테마 색으로, 바탕은 같은 색을 옅게 ---------- */
body { background: var(--page-bg); }
.sidebar { background: var(--side-bg); }
.topbar { background: var(--top-bg); border-bottom-color: transparent; color: var(--top-ink); }
.topbar .breadcrumb,
.topbar .breadcrumb > svg,
.topbar .breadcrumb > span,
.topbar .breadcrumb > span:first-of-type,
.topbar .header-brand,
.topbar #page-breadcrumb,
.topbar .local-save,
.topbar .text-button,
.topbar .icon-button { color: var(--top-ink); }
.topbar .header-brand { font-weight: 800; }
.topbar .breadcrumb > span:first-of-type { opacity: .7; }
.topbar .topbar-divider { background: rgba(255,255,255,.4); }
.topbar .icon-button:hover,
.topbar .text-button:hover { background: rgba(255,255,255,.14); filter: none; }
.topbar .text-button { border-radius: 0.375rem; padding: 0.3rem 0.45rem; }
.topbar .avatar { background: rgba(255,255,255,.2); color: var(--top-ink); box-shadow: inset 0 0 0 0.0625rem rgba(255,255,255,.45); }
.topbar button:focus-visible, .topbar a:focus-visible { outline-color: #fff; }

/* V1.7: 새 테마 점 색 */
.theme-dot.sky { background: #476e78; }
.theme-dot.mint { background: #47786a; }
.theme-dot.coral { background: #784f47; }
.theme-dot.rose { background: #774854; }
.theme-dot.indigo { background: #474d78; }
.theme-dot.grape { background: #6f4877; }
.theme-dot.olive { background: #757748; }
.theme-dot.mocha { background: #6d5e52; }

/* ---------- V1.7: 레벨 칭호 · 반복 할 일 · 나의 칭호 · 테마 직접 고르기 ---------- */
.theme-custom { margin: 0.5rem 0.8125rem 0.375rem; }
.node-badges { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; }
.node-rank { font-size: 0.75rem; font-weight: 700; border-radius: 0.25rem; padding: 0.1875rem 0.3125rem; line-height: inherit; white-space: nowrap;
  color: var(--node-color, var(--c3)); background: var(--node-bg, var(--c4)); box-shadow: inset 0 0 0 0.0625rem var(--node-border, var(--c5)); }
.node-rank.rank-novice { color: #6b6f6c; background: #f1f2f0; box-shadow: inset 0 0 0 0.0625rem #e2e4e1; }
.node-rank.rank-normal { color: #3f6f50; background: #ecf5ee; box-shadow: inset 0 0 0 0.0625rem #d3e6d8; }
.node-rank.rank-mid { color: #2f5f8f; background: #eaf2fb; box-shadow: inset 0 0 0 0.0625rem #cfe0f2; }
.node-rank.rank-high { color: #7a4d14; background: #fbf1e2; box-shadow: inset 0 0 0 0.0625rem #f0dbbb; }
.node-rank.rank-master { color: #fff; background: linear-gradient(135deg, #b8860b, #8a5a00); box-shadow: none; }
.node-level { line-height: inherit; white-space: nowrap; }
.root-node { width: 10.5rem; height: 8.5rem; min-height: 8.5rem; padding: 0.75rem 0.625rem; }
.root-node .node-icon { width: 1.625rem; height: 1.625rem; }
.root-node .node-title { margin: 0.375rem 0 0.375rem; max-height: 2.4rem; }
.root-node .root-level { display: flex; align-items: center; justify-content: center; gap: 0.3125rem; }
.root-node .root-level strong { font-size: 0.75rem; color: var(--node-color, var(--c3)); font-weight: 700; }
.root-node .root-level .node-level { color: var(--node-color, var(--c3)); background: #fff; }
.root-node .root-track { margin-top: 0.4375rem; height: 0.3125rem; background: rgba(255,255,255,.75); }
.root-node .root-track span { background: var(--node-color, var(--c3)); }
.detail-level { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin: 0.625rem 0 0.25rem; }
.detail-exp { font-size: 0.6875rem; color: var(--c99); font-weight: 600; }
.field-title-chip { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; font-size: 0.6875rem; font-weight: 700; color: #7a4d14; background: #fbf1e2; border-radius: 1rem; padding: 0.1875rem 0.5rem; }
.field-title-chip svg { width: 0.75rem; height: 0.75rem; }
.detail-category { flex-wrap: wrap; }
.section-hint { font-size: 0.625rem; color: var(--c99); margin: -0.25rem 0 0.5rem; line-height: 1.5; }
.limit-note { display: flex; gap: 0.375rem; align-items: flex-start; font-size: 0.6875rem; line-height: 1.5; color: var(--c99); background: var(--c4); border-radius: 0.375rem; padding: 0.5rem 0.625rem; margin: 0.625rem 0 0; }
.limit-note svg { width: 0.8125rem; height: 0.8125rem; margin-top: 0.125rem; }
.habits-list { display: grid; gap: 0.375rem; }
.habit-line { display: flex; align-items: center; gap: 0.25rem; }
.habit-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--c103); cursor: pointer; border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 0.4375rem 0.5625rem; background: #fff; }
.habit-row input { appearance: none; width: 0.9375rem; height: 0.9375rem; border: 0.0625rem solid var(--c166); border-radius: 50%; flex: none; margin: 0; cursor: pointer; background: #fff; display: grid; place-content: center; }
.habit-row input:checked { background: var(--node-color, var(--c167)); border-color: var(--node-color, var(--c167)); }
.habit-row input:checked::after { content: '✓'; color: #fff; font-size: 0.5625rem; }
.habit-row.done { background: var(--node-bg, var(--c4)); border-color: var(--node-border, var(--c5)); }
.habit-title { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.habit-meta { display: inline-flex; gap: 0.25rem; flex: none; }
.habit-freq, .habit-exp { font-size: 0.625rem; font-weight: 700; border-radius: 0.25rem; padding: 0.125rem 0.3125rem; white-space: nowrap; }
.habit-freq { color: var(--c99); background: var(--c4); }
.habit-exp { color: var(--node-color, var(--c3)); background: #fff; box-shadow: inset 0 0 0 0.0625rem var(--node-border, var(--c5)); }
.habit-empty { font-size: 0.6875rem; color: var(--c99); line-height: 1.5; margin: 0; }
.habit-form { display: flex; gap: 0.25rem; margin-top: 0.625rem; flex-wrap: wrap; }
.habit-form input { flex: 1 1 9rem; min-width: 0; font-size: 0.6875rem; border: 0.0625rem solid var(--c110); padding: 0.4375rem; border-radius: 0.3125rem; outline-color: var(--c111); }
.habit-form select { font-size: 0.6875rem; border: 0.0625rem solid var(--c110); border-radius: 0.3125rem; padding: 0.375rem; background: #fff; color: var(--c103); }
.habit-form button { font-size: 0.6875rem; background: var(--c112); border-radius: 0.3125rem; padding: 0.375rem 0.5rem; white-space: nowrap; gap: 0.25rem; }
.habit-form button svg { width: 0.75rem; height: 0.75rem; }
.title-strip { margin: 0 0 1.25rem; }
.title-strip-head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--ink); }
.title-strip-head svg { width: 0.9375rem; height: 0.9375rem; color: var(--c3); }
.title-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; }
.title-chip { display: flex; align-items: center; gap: 0.5rem; min-width: 0; background: #fff; border: 0.0625rem solid var(--line); border-radius: 0.625rem; padding: 0.5rem 0.625rem; }
.title-chip > div { min-width: 0; display: grid; gap: 0.0625rem; }
.title-chip b { font-size: 0.75rem; overflow-wrap: anywhere; line-height: 1.35; }
.title-chip small { font-size: 0.5625rem; color: var(--c99); line-height: 1.4; overflow-wrap: anywhere; }
.title-chip-icon { width: 1.625rem; height: 1.625rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--category, var(--c3)) 14%, #fff); color: var(--category, var(--c3)); }
.title-chip-icon svg { width: 0.875rem; height: 0.875rem; }
.title-chip.root-chip { border-color: var(--c3); background: color-mix(in srgb, var(--c3) 7%, #fff); }
.title-chip.root-chip .title-chip-icon { background: var(--c3); color: #fff; }
.title-chip.locked { opacity: .62; border-style: dashed; }
.title-chip.locked .title-chip-icon { background: #f1f2f0; color: #8a8f8b; }
@media (max-width: 600px) { .title-chips { grid-template-columns: 1fr; } .title-chip small { font-size: 0.625rem; } }
.root-node { display: flex; flex-direction: column; justify-content: center; }
.root-node .node-icon { margin: 0 auto; flex: none; }

/* ---------- V1.8: 위치 옮기기 · 상위 맵으로 ---------- */
.node-move { position: absolute; left: -0.625rem; top: -0.625rem; width: 1.375rem; height: 1.375rem; padding: 0; border-radius: 50%; background: #fff; border: 0.0625rem solid var(--node-border, var(--c76)); color: var(--node-color, var(--c77)); box-shadow: 0 0.0625rem 0.25rem var(--c61); z-index: 2; cursor: grab; }
.node-move svg { width: 0.75rem; height: 0.75rem; }
.node-move:hover { background: var(--node-bg, var(--c4)); }
.skill-node.placed .node-move { background: var(--node-color, var(--c3)); color: #fff; border-color: transparent; }
.skill-node.moving { z-index: 5; cursor: grab; outline: 0.125rem dashed var(--node-color, var(--c3)); outline-offset: 0.25rem; box-shadow: 0 0.75rem 1.75rem rgba(0,0,0,.16); }
.map-canvas.is-moving .skill-node:not(.moving):not(.root-node) { opacity: .72; }
.map-canvas.dragging .skill-node.moving { cursor: grabbing; }
.move-tools { position: absolute; left: 50%; bottom: calc(100% + 0.625rem); transform: translateX(-50%); display: flex; gap: 0.25rem; background: #fff; border: 0.0625rem solid var(--line); border-radius: 0.625rem; padding: 0.25rem; box-shadow: 0 0.375rem 1rem rgba(0,0,0,.14); white-space: nowrap; z-index: 6; }
.move-tools button { height: 1.75rem; min-width: 1.75rem; padding: 0 0.375rem; border-radius: 0.4375rem; font-size: 0.6875rem; font-weight: 700; color: var(--c103); gap: 0.25rem; }
.move-tools button svg { width: 0.8125rem; height: 0.8125rem; }
.move-tools .move-save { background: var(--node-color, var(--c3)); color: #fff; padding: 0 0.625rem; }
.focus-up { margin-left: 0.875rem; flex: none; display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.5625rem; font-weight: 700; color: var(--c162); background: #fff; border: 0.0625rem solid var(--c178); border-radius: 0.4375rem; padding: 0.3125rem 0.5625rem; }
.focus-up svg { width: 0.75rem; height: 0.75rem; }
@media (max-width: 1015px) { .focus-up { margin-left: 0.5rem; padding: 0.3125rem 0.4375rem; } .focus-up span { display: none; } }
@media (max-width: 400px) { .topbar .local-save { display: none; } }
.map-view-tools { margin-left: auto; display: flex; align-items: center; flex: none; }
.map-view-tools .layout-toggle { margin-left: 0; }

/* V1.11: 광고 보고 맵 2 열기 */
#locked-dialog .dialog-actions { gap: 0.5rem; }
.ad-slot { margin-top: 0.875rem; border: 0.0625rem dashed var(--c180); background: #fbfcf7; border-radius: 0.5625rem; padding: 1.25rem 1rem; text-align: center; min-height: 9rem; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.ad-slot p { margin: 0; font-size: 0.75rem; color: var(--c103); line-height: 1.6; }
.ad-badge { align-self: center; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; border: 0.0625rem solid var(--c180); border-radius: 0.25rem; padding: 0.0625rem 0.375rem; color: var(--c103); }
.ad-count b { font-size: 1.125rem; color: var(--c151); font-variant-numeric: tabular-nums; }
.ad-progress { height: 0.3125rem; border-radius: 9rem; background: var(--c180); overflow: hidden; }
.ad-progress span { display: block; height: 100%; width: 0; background: var(--c181); transition: width 0.25s linear; }
#ad-error { margin-top: 0.75rem; }

/* V1.12: 반복 퀘스트 — 요일·할 시각·수정 */
.habit-line.editing .habit-row { border-color: var(--node-color, var(--c3)); }
.habit-row.rest { opacity: .6; cursor: default; }
.habit-row input:disabled { cursor: default; background: var(--c4); }
.quest-time { display: inline-flex; align-items: center; gap: 0.1875rem; margin-left: 0.375rem; font-size: 0.625rem; font-weight: 600; color: var(--c99); white-space: nowrap; font-variant-numeric: tabular-nums; }
.quest-time svg { width: 0.6875rem; height: 0.6875rem; }
.habit-freq.freq-days { color: var(--node-color, var(--c3)); }
.quest-edit svg { width: 0.75rem; height: 0.75rem; }
.quest-form { flex-direction: column; flex-wrap: nowrap; gap: 0.4375rem; border: 0.0625rem dashed var(--c110); border-radius: 0.5rem; padding: 0.5625rem; }
.quest-form input[name="title"] { flex: none; width: 100%; }
.quest-form-title { margin: 0; display: flex; align-items: center; gap: 0.3125rem; font-size: 0.6875rem; font-weight: 700; color: var(--node-color, var(--c3)); }
.quest-form-title svg { width: 0.75rem; height: 0.75rem; }
.quest-plan { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.quest-time-field { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--c99); }
.quest-time-field svg { width: 0.8125rem; height: 0.8125rem; }
.quest-form .quest-time-field input { flex: none; width: 6.5rem; padding: 0.3125rem 0.375rem; }
.quest-days { display: flex; gap: 0.1875rem; flex-wrap: wrap; }
.day-chip { position: relative; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.day-chip span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; color: var(--c103); border: 0.0625rem solid var(--c110); background: #fff; }
.day-chip.sun span { color: #b45454; }
.day-chip.sat span { color: #4a6aa8; }
.day-chip input:checked + span { background: var(--node-color, var(--c3)); border-color: var(--node-color, var(--c3)); color: #fff; }
.day-chip input:focus-visible + span { outline: 0.1875rem solid var(--c6); outline-offset: 0.125rem; }
.quest-days-label { margin: 0; font-size: 0.625rem; color: var(--c99); }
.quest-actions { display: flex; justify-content: flex-end; gap: 0.25rem; }
.quest-actions .secondary-button { background: #fff; }

/* V1.12: 개인정보 처리방침 링크 */
.footer-link { color: inherit; text-decoration: underline; text-underline-offset: 0.125rem; }
.consent-box a { color: var(--c3); font-weight: 600; }
/* V1.12: 좁은 화면에서 퀘스트 이름이 한 글자씩 꺾이지 않게 — 요일·경험치는 아래 줄로 */
.habit-row { flex-wrap: wrap; row-gap: 0.25rem; }
.habit-title { flex: 1 1 4.5rem; }
@media (max-width: 480px) { .day-chip span { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; } }