/* 공통 레이아웃 (사이트 무관). 사이트별 값(--brand, --brand-ink, --accent, 글꼴)은 레이아웃에서 주입된다.
   방향: 법랑 냄비처럼 차가운 자기색 바탕 + 코발트 하나 + 둥근 숫자. 보는 것은 위, 누르는 것은 엄지 닿는 아래. */
:root {
  --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eceff4; --ink: #1b2230; --muted: #5b6577; --line: #dce1e9;
  --warn-bg: #fff3e0; --warn-ink: #7a3d00; --safety-bg: #fdeceb; --safety-ink: #8a1f17; --safety-line: #f1bcb7;
  --egg-white: #ffffff; --egg-line: #c9ced8; --egg-shell: #f1e2cf; --yolk-set: #f7c84f; --yolk-raw: #f39200;
  --heat-go: #2b7a57; --heat-soon: #b3600e; --heat-now: #c0392b; --heat-ink: #ffffff;
  --font-display: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-num: ui-rounded, system-ui, sans-serif;
  --radius: 16px; --shadow: 0 1px 2px rgb(20 30 50 / .06), 0 6px 18px rgb(20 30 50 / .06);
  --bar-h: 76px;
  --a-shadow: rgb(20 30 50 / .08); --a-ink: #1b2230; --a-pot: #2450b8; --a-pot-2: #1a3d8f; --a-pot-rim: #4f78d6; --a-water: #a8cdf3; --a-steam: #c3cddd;
  --a-shell: #ecc9a2; --a-white: #ffffff; --a-white-edge: #eef0f4; --a-yolk: #f7c84f; --a-yolk-2: #f39200;
  --a-goguma: #93487f; --a-goguma-in: #f4b45c; --a-potato: #dcb47d; --a-potato-2: #b98f58; --a-meat: #e9998a; --a-fat: #f8e4da;
  --a-octo: #d9566b; --a-shrimp: #f2855a; --a-chicken: #f4d2b2; --a-noodle: #f5e3ae; --a-bowl: #2450b8; --a-bowl-glass: #dbe8f6;
  --a-ice: #f2f9ff; --a-wood: #d39a64; --a-leaf: #58a46b; --a-plate: #ffffff; --a-plate-line: #e6eaf0; --a-fridge: #e7ecf3; --a-fridge-2: #c3cddb;
  --a-cold: #4f9be8; --a-sun: #f7b733; --a-corn: #f5c842; --a-corn-2: #d9a514; --a-corn-leaf: #79b35d; --a-fire: #f26b3a; --a-counter: #dfe3ea;
  --a-blob-1: #e3ebfb; --a-blob-2: #fdf0d2; --a-ok: #2b9a66; --a-cup: #f08a6b;
  --a-pill-1: #f08a6b; --a-pill-2: #fbd7a1; --a-skin: #f3c9a5; --a-hair: #4a3b35; --a-shirt: #6f9be8; --a-pants: #3b4a6b; --a-iris: #6aa36f;
  --a-shoe: #ef7d5a; --a-tea: #c98b4a; --a-coffee-cup: #ffffff; --a-coffee-lid: #8a5a3c; --a-coffee-band: #c98b4a; --a-pillow: #b9c9f2;
  --a-hair-2: #7a5236; --a-cheek: #f08a8a; --a-mine: #8b6fd6;
  --a-steel: #aeb6c4; --a-screen: #eaf1fd; --a-moon: #f6d77a; --a-rice: #fbf7ee; --a-bag: #8a5a3c; --a-bag-2: #6d452e; --a-house: #fbe3c4; --a-roof: #d9566b; --a-window: #a8cdf3; --a-hat: #c98b4a;
  --fm-bg: var(--brand); --fm-bg-rest: var(--heat-go); --fm-bg-pause: #5d6878; --fm-ink: #ffffff; --fm-strong: #ffffff; --fm-muted: rgb(255 255 255 / .85);
  --fm-c: #ffffff; --fm-c-rest: #ffffff; --fm-c-pause: #ffffff; --fm-ring: 0px; --fm-glow: 0px; --fm-art: rgb(255 255 255 / .92);
  --fm-btn: rgb(255 255 255 / .16); --fm-btn-line: rgb(255 255 255 / .55); --fm-dot: rgb(255 255 255 / .3); --fm-dot-done: rgb(255 255 255 / .75); --fm-track: rgb(255 255 255 / .2);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121519; --surface: #1b2027; --surface-2: #242b35; --ink: #edf0f5; --muted: #a2acbb; --line: #2f3743;
    --warn-bg: #3a2a12; --warn-ink: #ffd59e; --safety-bg: #3a1c1a; --safety-ink: #ffc7c1; --safety-line: #6a2b25;
    --egg-white: #eef0f3; --egg-line: #7d8594; --egg-shell: #d6c1a6; --yolk-set: #f0bd45; --yolk-raw: #e88400;
    --heat-go: #1d5a40; --heat-soon: #8a470a; --heat-now: #96281d; --heat-ink: #ffffff;
    --shadow: none; color-scheme: dark;
    --a-shadow: rgb(0 0 0 / .35); --a-ink: #10141a; --a-pot: #3a66d0; --a-pot-2: #2a4ea8; --a-pot-rim: #6a8fe6; --a-water: #5b8fc9; --a-steam: #5d6878;
    --a-white-edge: #e6e9ee; --a-plate: #2a313c; --a-plate-line: #39424f; --a-fridge: #3a4350; --a-fridge-2: #56616f; --a-bowl-glass: #34475e; --a-ice: #cfe3f5;
    --a-counter: #2c333d; --a-blob-1: #1d2a44; --a-blob-2: #3a3220;
    --a-coffee-cup: #e6e9ee; --a-screen: #2b3a55; --a-steel: #6b7686; --a-house: #c9a77e; --a-rice: #e9e4d8;
  --fm-bg: #0d1014; --fm-bg-rest: #0d1014; --fm-bg-pause: #0d1014; --fm-ink: #d7dce4; --fm-strong: #eef1f6; --fm-muted: #8f99a8;
  --fm-c: #7ea6ff; --fm-c-rest: #4fd394; --fm-c-pause: #8f99a8; --fm-ring: 4px; --fm-glow: 60px; --fm-art: #1b2027;
  --fm-btn: transparent; --fm-btn-line: #343c48; --fm-dot: #2a313c; --fm-dot-done: #4d5766; --fm-track: #1f252e;
  }
}
:root[data-theme="dark"] {
  --bg: #121519; --surface: #1b2027; --surface-2: #242b35; --ink: #edf0f5; --muted: #a2acbb; --line: #2f3743;
  --warn-bg: #3a2a12; --warn-ink: #ffd59e; --safety-bg: #3a1c1a; --safety-ink: #ffc7c1; --safety-line: #6a2b25;
  --egg-white: #eef0f3; --egg-line: #7d8594; --egg-shell: #d6c1a6; --yolk-set: #f0bd45; --yolk-raw: #e88400;
  --heat-go: #1d5a40; --heat-soon: #8a470a; --heat-now: #96281d; --heat-ink: #ffffff;
  --shadow: none; color-scheme: dark;
  --a-shadow: rgb(0 0 0 / .35); --a-ink: #10141a; --a-pot: #3a66d0; --a-pot-2: #2a4ea8; --a-pot-rim: #6a8fe6; --a-water: #5b8fc9; --a-steam: #5d6878;
  --a-white-edge: #e6e9ee; --a-plate: #2a313c; --a-plate-line: #39424f; --a-fridge: #3a4350; --a-fridge-2: #56616f; --a-bowl-glass: #34475e; --a-ice: #cfe3f5;
  --a-counter: #2c333d; --a-blob-1: #1d2a44; --a-blob-2: #3a3220;
  --a-coffee-cup: #e6e9ee; --a-screen: #2b3a55; --a-steel: #6b7686; --a-house: #c9a77e; --a-rice: #e9e4d8;
  --fm-bg: #0d1014; --fm-bg-rest: #0d1014; --fm-bg-pause: #0d1014; --fm-ink: #d7dce4; --fm-strong: #eef1f6; --fm-muted: #8f99a8;
  --fm-c: #7ea6ff; --fm-c-rest: #4fd394; --fm-c-pause: #8f99a8; --fm-ring: 4px; --fm-glow: 60px; --fm-art: #1b2027;
  --fm-btn: transparent; --fm-btn-line: #343c48; --fm-dot: #2a313c; --fm-dot-done: #4d5766; --fm-track: #1f252e;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* 스크롤바가 없는 짧은 페이지도 같은 폭으로 */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  word-break: keep-all; overflow-wrap: break-word; /* anywhere는 표 칸을 한 글자 폭까지 줄여 '스트레/칭'처럼 끊김 */
}
a { color: var(--accent); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
h1 { font-size: 1.6rem; line-height: 1.3; margin: .4em 0 .3em; }
h2 { font-size: 1.3rem; line-height: 1.35; margin: 0 0 .6em; }
h3 { font-size: 1.08rem; margin: 1.2em 0 .3em; }
.h-small { font-size: 1.05rem; color: var(--muted); }
.lead { color: var(--muted); margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--surface); padding: 8px 12px; }

.wrap { max-width: 640px; margin: 0 auto; padding: 4px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.wrap--tool { padding-bottom: calc(var(--bar-h) + 40px + env(safe-area-inset-bottom, 0px)); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); max-width: 640px; margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); text-decoration: none; min-height: 44px; }
.logo .art { width: 30px; height: 30px; }
.logo span { font-weight: 800; }
.site-nav { display: flex; gap: 4px; }
.site-nav a { color: var(--muted); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.site-nav a:hover { color: var(--brand); background: var(--surface-2); }
.site-nav a.site-nav__text { gap: 4px; padding: 0 10px 0 8px; font-size: .88rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.site-nav svg { flex: 0 0 auto; }
.logo { white-space: nowrap; }
/* 아주 좁은 휴대폰: 로고 글자를 숨겨 메뉴 자리 확보(로고 그림은 남김) */
@media (max-width: 370px) { .logo > span:not(:first-child), .logo__name { display: none; } }
.site-nav a[aria-current] { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.theme-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.theme-btn:hover { color: var(--brand); background: var(--surface-2); }
.theme-btn [hidden] { display: none; }
.site-footer { border-top: 1px solid var(--line); padding: 20px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); max-width: 640px; margin: 0 auto; color: var(--muted); font-size: .88rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 16px; margin-bottom: 8px; }
.site-footer a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.crumbs { display: none; } /* 구조화 데이터로만 제공, 화면은 단순하게 */

.section { margin-top: 36px; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.btn:hover { border-color: var(--brand); }
.btn:focus-visible, .choice input:focus-visible + .choice__body, .chip-opt input:focus-visible + span, .stage__range:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn--sm { min-height: 44px; padding: 6px 12px; font-size: .95rem; }
.btn--xl { min-height: 64px; font-size: 1.2rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- 계산기 ---------- */
/* 순서: 그림·슬라이더 → 결과 → 칩·카드 (폼은 display:contents로 풀어 결과를 사이에 둔다) */
.calc { display: flex; flex-direction: column; }
.calc > form { display: contents; }
.calc .stage { order: 1; }
.calc .result { order: 2; }
.calc .chiprow, .calc .field { order: 3; }
.calc noscript { order: 4; }
.calc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.calc__title { font-size: 1.2rem; margin: 6px 0 0; }
.calc__more { font-size: .9rem; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }

/* 큰 그림 + 슬라이더 */
.stage { border: 0; margin: 0; padding: 0; min-width: 0; text-align: center; }
.stage__art { position: relative; height: 150px; margin: 0 auto; max-width: 180px; }
.stage__frame { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.96); transition: opacity .18s ease, transform .18s ease; }
.stage__frame.is-on { opacity: 1; transform: none; }
.stage__frame svg { width: 150px; height: 150px; }
.stage__label { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 2px; min-height: 1.5em; }
.stage__range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; }
.stage__range::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--yolk-raw), var(--yolk-set) 70%, #f6dc8e); }
.stage__range::-moz-range-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--yolk-raw), var(--yolk-set) 70%, #f6dc8e); }
.stage__range::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; margin-top: -14px; border-radius: 50%; background: var(--surface); border: 4px solid var(--brand); box-shadow: var(--shadow); }
.stage__range::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 4px solid var(--brand); }
.stage__ends { display: flex; justify-content: space-between; margin-top: -4px; padding: 0 2px; }
.stage__ends .art { width: 28px; height: 28px; }

/* 칩 한 줄 */
.chiprow { scroll-margin-top: 80px; border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.chiprow__label { float: left; padding: 0; font-size: .9rem; color: var(--muted); width: 2.6em; }
.chiprow__opts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; }
.chiprow__opts::-webkit-scrollbar { display: none; }
.chip-opt { position: relative; flex: 0 0 auto; cursor: pointer; }
.chip-opt input[type=radio] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-opt > span { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-weight: 600; white-space: nowrap; }
.chip-opt small { font-weight: 500; opacity: .75; font-size: .78rem; }
/* 그림 타일 */
.chiprow--pics .chiprow__opts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; overflow: visible; }
.chiprow--pics .chip-opt > span { flex-direction: column; justify-content: flex-end; gap: 0; width: 100%; min-height: 84px; padding: 6px 2px 6px; border-radius: 16px; line-height: 1.15; }
.chiprow--pics .chip-opt .art { width: 38px; height: 38px; }
.chiprow--pics .chip-opt > span { overflow: hidden; }
.chiprow--pics .chip-opt b { font-size: .88rem; }
.chiprow--pics .chip-opt input:checked + span { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--ink); border: 2px solid var(--brand); }
.chiprow--pics .chip-opt input:checked + span b { color: var(--brand); }
.chip-opt input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chiprow.is-custom .chip-opt input:checked + span { background: var(--surface); border-color: var(--line); color: var(--ink); }
.chip-opt--num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; border-radius: 16px; border: 1.5px dashed var(--line); padding: 4px; }
.chip-opt--num small { color: var(--muted); }
.chip-opt--num input { width: 100%; min-width: 0; text-align: center; min-height: 44px; border-radius: 999px; border: 1.5px dashed var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; padding: 4px 12px; }
.chip-opt--num input { border: 0 !important; min-height: 40px; padding: 2px; }
.chip-opt--num:has(input:not(:placeholder-shown)) { border: 2px solid var(--brand); }
.chiprow.is-custom .chip-opt input:checked + span { background: var(--surface); border: 1.5px solid var(--line); }
.chiprow.is-custom .chip-opt input:checked + span b { color: var(--ink); }

/* 큰 선택 카드 (그림·칩 표시가 아닌 입력) */
.field { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.field__label { display: block; font-weight: 700; margin-bottom: 8px; padding: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.choices--many { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; text-decoration: none; color: inherit; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; min-height: 60px; height: 100%; padding: 10px 8px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); }
.choice__label { font-weight: 700; line-height: 1.3; }
.choice__hint { font-size: .85rem; color: var(--muted); line-height: 1.3; }
.choice input:checked + .choice__body { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.num { display: flex; align-items: center; gap: 8px; }
.num input, .mt-add input[type=text], .mt-target { min-height: 52px; font: inherit; font-size: 1.1rem; padding: 8px 12px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; max-width: 220px; }
.mt-add input[type=text] { max-width: none; }
.num span { color: var(--muted); }

/* 결과: "지금 넣으면 / 오후 7:12에 건지세요" */
.result { margin: 10px 0 4px; }
.result:empty { display: none; }
.result__main { text-align: center; padding: 10px 8px 10px; border-radius: calc(var(--radius) + 4px); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); }
.result__lead { margin: 0; color: var(--muted); font-size: .95rem; }
.result__clock { margin: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: 6px; line-height: 1.05; }
.result__ap { font-family: var(--font-display); font-size: 1.2rem; color: var(--muted); }
.result__hm { font-family: var(--font-num); font-weight: 600; font-size: clamp(3rem, 15vw, 4.2rem); color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.result__tail { font-family: var(--font-display); font-size: 1.25rem; }
.result__sub { margin: 2px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }
.result__sub b { font-family: var(--font-num); font-weight: 600; font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.result__basis-ic .art { width: 26px; height: 26px; display: block; }
.result__change { font-size: .9rem; white-space: nowrap; }
.result__basis { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }
.result__range-tip { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.result__main--pending .result__hm { color: var(--muted); font-family: var(--font-display); font-size: 2rem; margin: 0; }
.result__hint { text-align: center; color: var(--muted); }
.note { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); font-size: .95rem; }
.note p { margin: 0; }
.note__title { font-weight: 700; margin-bottom: 2px !important; }
.note--warn { background: var(--warn-bg); color: var(--warn-ink); }
.note--safety { background: var(--safety-bg); color: var(--safety-ink); border: 1px solid var(--safety-line); }
/* 결과 아래: 항상 보이는 한 줄 + 접힌 안내 칩 */
.line { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0 0; padding: 8px 12px; border-radius: 14px; font: inherit; font-size: .93rem; text-align: left; border: 0; }
.line svg { width: 22px; height: 22px; flex: 0 0 auto; }
.line--safety { background: var(--safety-bg); color: var(--safety-ink); cursor: pointer; }
.line--warn { background: var(--warn-bg); color: var(--warn-ink); }
.more { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.more__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .93rem; font-weight: 600; cursor: pointer; }
.more__chip svg { width: 24px; height: 24px; }
.more__chip[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.more__panel { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: .95rem; }
.more__panel p { margin: 0; }
.more__panel ul { margin: 0; padding-left: 1.1em; }
.more__panel li + li { margin-top: 6px; }
.more__panel--safety { background: var(--safety-bg); color: var(--safety-ink); }
.basis__opts { font-size: .9rem; color: var(--muted); }
.tips { margin: 14px 0 0; padding-left: 1.2em; font-size: .95rem; color: var(--muted); }
.tips li { margin: 6px 0; }
.tips__warn { color: var(--warn-ink); font-weight: 600; }
.method-note { font-size: .92rem; color: var(--muted); }

/* 엄지 닿는 아래 버튼 바 (계산기가 보일 때만) */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 64px; gap: 10px;
  max-width: 640px; margin: 0 auto;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease;
}
.actionbar.is-away { transform: translateY(calc(100% + 10px)); }
.actionbar__go { min-height: 60px; font-size: 1.15rem; border-radius: 999px; }
.actionbar__play { font-size: .9em; }
.actionbar__time { font-family: var(--font-num); font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
.actionbar__multi { min-height: 60px; padding: 0; border-radius: 999px; position: relative; color: var(--brand); }
.actionbar__multi svg { width: 28px; height: 28px; }
.actionbar__plus { position: absolute; top: 8px; right: 10px; font-weight: 800; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .actionbar, .stage__frame { transition: none; } }

.basis__detail { font-size: .95rem; color: var(--muted); }
.basis__sources { font-size: .92rem; color: var(--muted); padding-left: 1.2em; }

/* 광고 — 입력/버튼과 간격 확보 */
.ad { margin: 40px 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.ad__label { font-size: .75rem; color: var(--muted); margin: 0 0 4px; }

/* 카드·칩 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; min-height: 96px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; }
.card:hover { border-color: var(--brand); }
.card__icon .art { width: 52px; height: 52px; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.guide-links { padding-left: 1.2em; }
.guide-links li { margin: 8px 0; }

/* 홈: 오늘 뭐 삶아요? */
.home-hero { margin: 0 -8px; }
.home-hero .art { width: 100%; height: auto; display: block; max-height: 220px; }
.home-q__title { font-size: 2rem; margin: 4px 0 14px; text-align: center; }
.sits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sit { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; min-height: 148px; border-radius: calc(var(--radius) + 2px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.sit:hover { border-color: var(--brand); }
.sit:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 120px 1fr; column-gap: 12px; align-items: center; }
.sit:last-child:nth-child(odd) .sit__art { grid-row: span 2; }
.sit__art .art { width: 100%; max-width: 132px; height: auto; display: block; }
.sit:last-child:nth-child(odd) .sit__art .art { max-width: 120px; }
.sit__title { font-family: var(--font-display); font-size: 1.15rem; }
.sit__items { display: flex; flex-wrap: wrap; gap: 4px; font-size: .88rem; }
.sit__items > span { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); }
.sit__items .sit__soon { color: var(--muted); background: transparent; border: 1px dashed var(--line); }
.sit__soon small { font-size: .78em; }
.sit__go { position: absolute; top: 12px; right: 14px; color: var(--muted); }
.home-about p { color: var(--muted); }

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; padding: 12px 0; min-height: 48px; font-weight: 600; }
.faq__item p { margin: 0 0 14px; color: var(--muted); }
.affiliate { font-size: .95rem; }
.affiliate__disclosure { font-size: .85rem; color: var(--muted); }

/* 표 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
th { white-space: nowrap; }
.tag { display: inline-block; font-size: .75rem; padding: 0 6px; border-radius: 6px; background: var(--surface-2); }
.formula { overflow-x: auto; background: var(--surface-2); padding: 12px; border-radius: var(--radius); font-family: ui-serif, Georgia, serif; }
.article h2 { margin-top: 1.6em; }
.article blockquote { margin: 1.4em 0; padding: 12px 16px; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- 조리 모드: 화면 전체 색으로 남은 시간 ---------- */
html.is-cooking, html.is-cooking body { overflow: hidden; }
.cook {
  position: fixed; inset: 0; z-index: 1000; background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; gap: 10px;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow-y: auto; transition: background-color .8s ease;
}
.cook > * { flex-shrink: 0; }
.cook[data-heat="go"] { --heat: var(--heat-go); }
.cook[data-heat="soon"] { --heat: var(--heat-soon); }
.cook[data-heat="now"], .cook[data-heat="done"] { --heat: var(--heat-now); }
.cook[data-heat="go"], .cook[data-heat="soon"], .cook[data-heat="now"], .cook[data-heat="done"] { background: var(--heat); color: var(--heat-ink); }
.cook[data-heat="done"] { animation: flash 1s steps(2, jump-none) infinite; }
@keyframes flash { 0% { background: var(--heat-now); } 100% { background: color-mix(in srgb, var(--heat-now) 55%, #000); } }
@media (prefers-reduced-motion: reduce) { .cook { transition: none; } .cook[data-heat="done"] { animation: none; } }
/* 김 모락모락 (타이머가 도는 동안 조리 모드, 그리고 홈 장면) */
@keyframes rise { 0% { transform: translateY(4px); opacity: .2; } 50% { opacity: 1; } 100% { transform: translateY(-6px); opacity: .1; } }
.cook[data-heat="go"] .steam, .cook[data-heat="soon"] .steam, .cook[data-heat="now"] .steam, .art--hero .steam { animation: rise 2.4s ease-in-out infinite; transform-box: fill-box; }
@media (prefers-reduced-motion: reduce) { .steam { animation: none !important; } }
.cook__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cook__close { white-space: nowrap; color: inherit; opacity: .85; }
.cook__title { margin: 0; font-weight: 700; opacity: .8; font-size: .95rem; min-width: 0; }
.cook__notice { display: flex; align-items: center; gap: 8px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 999px; padding: 2px 4px 2px 14px; font-size: .88rem; }
.cook__notice[hidden] { display: none; }
.cook__notice p { margin: 0; flex: 1; }
.cook__notice-x { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: 1rem; cursor: pointer; }
.cook__mid { margin: auto 0; display: flex; flex-direction: column; }
.cook:not([data-heat="idle"]) .cook__detail { display: none; } /* 타이머가 돌면 짧은 문장만 */
.cook__art { display: grid; place-items: center; margin: 0 auto 4px; width: min(42vw, 170px); aspect-ratio: 4 / 3; max-width: 100%; border-radius: 28px; background: var(--surface); }
.cook__art:empty { display: none; }
.cook__art .art { width: 86%; height: auto; }
.cook[data-heat="go"] .cook__art, .cook[data-heat="soon"] .cook__art, .cook[data-heat="now"] .cook__art, .cook[data-heat="done"] .cook__art { background: rgb(255 255 255 / .92); }
.cook__detail { margin: 0 0 6px; font-size: .92rem; opacity: .75; }
.cook__stepno { margin: 0; opacity: .75; font-weight: 700; }
.cook__step { font-family: var(--font-display); font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 1.3; margin: 2px 0 2px; }
.cook__clock { font-family: var(--font-num); font-weight: 600; font-size: clamp(4.2rem, 24vw, 10rem); line-height: 1; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--brand); }
.cook[data-heat="go"] .cook__clock, .cook[data-heat="soon"] .cook__clock, .cook[data-heat="now"] .cook__clock, .cook[data-heat="done"] .cook__clock { color: var(--heat-ink); }
.cook[data-heat="idle"] .cook__clock, .cook[data-heat="paused"] .cook__clock { color: var(--muted); }
.cook__at { text-align: center; margin: 6px 0 0; font-weight: 700; min-height: 1.6em; opacity: .9; }
.cook__sub { text-align: center; min-height: 1.6em; margin: 4px 0 0; font-size: 1.02rem; }
.cook__alarm { text-align: center; background: var(--heat-ink); color: var(--heat-now); border-radius: var(--radius); padding: 12px; }
.cook__alarm p { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 8px; }
.cook__alarm .btn { background: var(--heat-now); color: var(--heat-ink); border-color: var(--heat-now); width: 100%; }
.cook__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cook__btns [data-act="next"] { grid-column: 1 / -1; border-radius: 999px; }
.cook__btns .btn { border-radius: 999px; }
.cook[data-heat="go"] .cook__btns .btn, .cook[data-heat="soon"] .cook__btns .btn, .cook[data-heat="now"] .cook__btns .btn, .cook[data-heat="done"] .cook__btns .btn { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .55); color: var(--heat-ink); }
.cook[data-heat="go"] .cook__btns .btn--primary, .cook[data-heat="soon"] .cook__btns .btn--primary, .cook[data-heat="now"] .cook__btns .btn--primary, .cook[data-heat="done"] .cook__btns .btn--primary { background: var(--heat-ink); border-color: var(--heat-ink); color: var(--heat); }
.cook__extra { text-align: center; }
.cook__extra .btn { color: inherit; }

/* 멀티 타이머 */
.mt-list { list-style: none; padding: 0; margin: 0 0 16px; }
.mt-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mt-item__name { flex: 1; font-weight: 700; min-width: 0; }
.mt-item__time { color: var(--muted); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mt-empty { color: var(--muted); }
.mt-add { display: grid; gap: 8px; background: var(--surface-2); padding: 14px; border-radius: var(--radius); }
.mt-add__time { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-add .num input { max-width: none; }
.err { color: var(--safety-ink); margin: 0; min-height: 1em; }
.mt-target { margin-top: 6px; max-width: 160px; position: relative; z-index: 1; }
.mt-pic { display: inline-flex; vertical-align: middle; }
.mt-pic .art { width: 30px; height: 30px; }
.mt-flow { list-style: none; display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 8px; }
.mt-flow li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-num); font-weight: 600; font-size: .9rem; min-width: 64px; }
.mt-flow li > span:first-child { display: flex; }
.mt-flow .mt-pic .art { width: 36px; height: 36px; }
.mt-flow__done { background: var(--brand) !important; color: var(--brand-ink); border-color: var(--brand) !important; }
.mt-flow__flag { font-size: 1.4rem; line-height: 36px; }
.timeline { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 8px; }
.timeline__row { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 8px; align-items: center; font-size: .92rem; }
.timeline__label { display: flex; align-items: center; gap: 4px; font-weight: 700; min-width: 0; }
.timeline__label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline__label .art { width: 24px; height: 24px; }
.mt-pic, .mt-pic .art { flex-shrink: 0; }
.timeline__track { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; display: flex; }
.timeline__bar { display: block; height: 100%; background: var(--brand); border-radius: 7px; }
.timeline__time { color: var(--muted); font-variant-numeric: tabular-nums; }
.mt.is-running > .section { display: none; }
.mt-run { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.mt-run__next { text-align: center; font-weight: 700; margin: 0; }
.mt-run .cook__clock { margin: 8px 0 16px; font-size: clamp(4rem, 22vw, 8rem); }
.mt-run .cook__alarm { background: var(--heat-now); color: var(--heat-ink); }
.mt-run .cook__alarm .btn { background: var(--heat-ink); color: var(--heat-now); }
.mt-steps { padding-left: 1.2em; }
.mt-steps li { margin: 6px 0; }
.mt-steps .art { width: 24px; height: 24px; vertical-align: middle; }
.mt-steps .is-past { color: var(--muted); text-decoration: line-through; }

/* ---------- 하루 흐름 ---------- */
.df-head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.df-head__art .art { width: 56px; height: 56px; display: block; }
.df-head__title { flex: 1; font-size: 1.3rem; margin: 0; font-weight: 800; }
.df-head__title b { color: var(--brand); font-weight: inherit; }
/* 모바일: 제목이 한 줄에 들어가게 캐릭터·글씨·아이콘 간격을 조금 줄인다 */
@media (max-width: 899px) { .df-head { gap: 6px; } .df-head__art .art { width: 40px; height: 40px; } .df-head__title { font-size: 1.15rem; } .df-head__bell, .df-tools__more, .df-head__edit { min-width: 40px; } }
.df-head__edit { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 14px; color: var(--muted); }
.df-head__edit:hover { background: var(--surface-2); color: var(--brand); }
.df-head__bell { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 14px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.df-head__bell:hover { background: var(--surface-2); color: var(--brand); }
.df-head__bell .bell-on { display: none; }
.df-head__bell[aria-pressed="true"] { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.df-head__bell[aria-pressed="true"] .bell-on { display: inline; }

.df-now { margin-top: 12px; padding: 14px; border-radius: 22px; background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow); }
.df-now__cur { display: flex; align-items: center; gap: 12px; }
.df-now__cur .art { flex: 0 0 auto; background: rgb(255 255 255 / .92); border-radius: 18px; padding: 6px; width: 72px; height: 72px; }
.df-now__tag { margin: 0; font-size: .85rem; opacity: .88; font-weight: 700; }
.df-now__name { margin: 0; font-family: var(--font-display); font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; -webkit-text-stroke: .6px currentColor; }
.df-now__next { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 10px; border-radius: 14px; background: rgb(255 255 255 / .16); font-size: .95rem; }
.df-now__next .art { flex: 0 0 auto; background: rgb(255 255 255 / .92); border-radius: 9px; padding: 2px; }
.df-now__next b { font-family: var(--font-num); font-weight: 600; }
.df-now__next > span:nth-child(2) { flex: 1; min-width: 0; }
.df-now__in { font-family: var(--font-num); font-weight: 600; white-space: nowrap; }
.df-week { margin-top: 12px; font-size: .88rem; }
.df-week p { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.df-week b { font-family: var(--font-num); font-weight: 600; }
.df-week__goal { opacity: .8; }
.df-week--empty p { display: block; margin: 0; opacity: .85; }
.df-week__goal a { color: inherit; }
.df-week__bar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--brand-ink) 18%, transparent); overflow: hidden; }
.df-week__bar i { display: block; height: 100%; background: var(--brand-ink); border-radius: 3px; }

.df-line { margin: 16px 0 0; display: grid; gap: 14px; }
.df-seg__title { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: .9rem; color: var(--muted); font-family: inherit; font-weight: 700; }
.df-seg__list { list-style: none; padding: 0; margin: 0; position: relative; }
.df-seg__list::before { content: ""; position: absolute; left: 86px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.df-row { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; border-radius: 14px; }
.df-row__main { display: grid; grid-template-columns: 48px 40px 1fr; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.df-row__time { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .95rem; }
.df-row__pic { display: grid; place-items: center; position: relative; z-index: 1; background: var(--bg); border-radius: 50%; width: 40px; height: 40px; }
.df-row__label { font-weight: 700; line-height: 1.3; min-width: 0; }
.df-row__label small { display: block; font-weight: 500; color: var(--muted); font-size: .82rem; }
.df-row__check { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: transparent; cursor: pointer; display: grid; place-items: center; }
.df-row__check svg { width: 22px; height: 22px; }
.df-row__check[aria-pressed="true"] { background: var(--a-ok); border-color: var(--a-ok); color: #fff; }
.df-row.is-anchor .df-row__main { min-height: 40px; cursor: default; }
.df-row.is-anchor .df-row__label { font-weight: 600; color: var(--ink); opacity: .7; font-size: .9rem; }
.df-row.is-anchor .df-row__time { font-size: .85rem; }
.df-row.is-past .df-row__time, .df-row.is-past .df-row__label { color: var(--muted); }
.df-row.is-past .df-row__label { font-weight: 600; }
.df-row.is-done .df-row__label { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.df-row__more { grid-column: 1 / -1; margin: 0 0 8px 126px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: .92rem; }
.df-row__more p { margin: 0; }
.df-row__more p + p { margin-top: 6px; }
.df-tag { font-size: .82rem; color: var(--muted); }
.df-tag--label { color: var(--warn-ink); }

.df-edit { margin-top: 28px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 12px; }
.df-edit__title { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 4px; color: var(--ink); }
.df-fold { display: inline-flex; margin-left: auto; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.df.is-folded .df-edit > div[data-ref="edit"] { display: none; }
.df.is-folded .df-edit__title { margin: 0; }
.df-h { font-size: .95rem; color: var(--muted); margin: 18px 0 8px; font-family: inherit; font-weight: 700; }
/* 내 하루 맞추기 영역 제목: 가이드 본문 중간 제목과 같은 색, 바로 위에 구분선 */
.df-edit__col > .df-h:first-child { color: var(--brand); font-size: 1.05rem; padding-top: 14px; border-top: 1px solid var(--line); }
.df-anchors { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.df-anchor { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 16px; background: var(--surface-2); font-size: .85rem; font-weight: 600; }
.df-anchor input::-webkit-calendar-picker-indicator, .df-opt input[type=time]::-webkit-calendar-picker-indicator { display: none; }
.df-anchor input { font: inherit; font-family: var(--font-num); font-weight: 600; font-size: .98rem; min-width: 0; border: 0; background: transparent; color: var(--ink); text-align: center; min-height: 36px; width: 100%; }
.df-it__group { margin: 14px 0 6px; font-size: .88rem; font-weight: 700; color: var(--muted); }
.df-items { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.df-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 0 12px 0 0; border-top: 1px solid var(--line); }
.df-it:first-child { border-top: 0; }
.df-it__main { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding: 8px 4px 8px 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
div.df-it__main { cursor: default; }
.df-it__text b { display: block; font-size: 1rem; }
.df-it__text small { display: block; color: var(--muted); font-size: .84rem; font-family: var(--font-num); }
.df-it__chev { color: var(--muted); font-size: .85rem; padding: 0 4px; }
.df-it.is-off .art { opacity: .45; filter: grayscale(.6); }
.df-it.is-off .df-it__text b { color: var(--muted); }
.df-it__opts { grid-column: 1 / -1; padding: 0 0 12px 62px; }
.df-it__opts input[type=time] { font: inherit; font-family: var(--font-num); font-weight: 600; font-size: 1.05rem; min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 2px 8px; }
.df-items--time .df-it { padding-right: 8px; }
label.df-it__main { cursor: pointer; }
.df-it__time { font: inherit; font-family: var(--font-num); font-weight: 600; font-size: 1.02rem; min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink); padding: 2px 8px; }
.df-it__text small.is-need { color: var(--brand); font-family: inherit; font-weight: 700; }
.df-it .df-x { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; border-radius: 12px; }
.df-it .df-x:hover { background: var(--surface-2); }
.df-it__opts .df-note { margin: 0 0 6px; }
.df-supp-add { display: flex; flex-wrap: wrap; gap: 6px; }
.df-chip--add { min-height: 36px; font-size: .84rem; color: var(--muted); border-style: dashed; }
.df-chip--add:hover { color: var(--brand); border-color: var(--brand); }
.df-sw { position: relative; flex: 0 0 auto; width: 50px; height: 30px; border-radius: 999px; border: 0; background: var(--line); cursor: pointer; padding: 0; transition: background-color .15s; }
.df-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: left .15s; }
.df-sw[aria-checked="true"] { background: var(--brand); }
.df-sw[aria-checked="true"]::after { left: 23px; }
@media (prefers-reduced-motion: reduce) { .df-sw, .df-sw::after { transition: none; } }
.df-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.df-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 88px; padding: 8px 4px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.df-tile .art { opacity: .5; filter: grayscale(.6); transition: opacity .15s; }
.df-tile[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.df-tile[aria-pressed="true"] .art { opacity: 1; filter: none; }
.df-tiles--supp { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.df-tile--sm { min-height: 64px; font-size: .8rem; }
.df-opts { display: grid; gap: 8px; margin-top: 10px; }
.df-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.df-opt__name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; flex: 1 1 auto; min-width: 0; }
.df-opt input[type=time] { font: inherit; font-family: var(--font-num); font-weight: 600; font-size: 1.05rem; min-height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 2px 8px; }
.df-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.df-chip { min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.df-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.df-opt--supp .df-chips { flex-basis: 100%; }
.df-x { min-width: 40px; min-height: 40px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.df-note { font-size: .82rem; color: var(--muted); margin: 8px 0 0; }
.df-add { display: flex; gap: 6px; margin-top: 10px; }
.df-add input { flex: 1; min-width: 0; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; padding: 4px 12px; }
.df > [data-ref="warn"] .line--warn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
[data-clear-all].is-armed { color: #fff !important; background: #c0392b !important; border-radius: 999px; text-decoration: none; padding: 0 14px; }
.df-edit .line { cursor: default; }

.actionbar--df { grid-template-columns: 1fr auto; }
.actionbar--df .actionbar__go { min-width: 0; padding: 0 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.actionbar--df .actionbar__go.is-done { background: var(--surface); color: var(--brand); border: 1.5px solid var(--brand); }
.actionbar__amb { min-height: 60px; padding: 0 18px; border-radius: 999px; gap: 6px; color: var(--ink); font-weight: 700; }
.actionbar__amb svg { color: var(--brand); }
.df-now__body { display: contents; }
/* 위쪽 도구: 모바일은 ⋯ 메뉴, PC는 글자 버튼 */
.df-tools { position: relative; display: inline-flex; }
.df-tools__more { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 14px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; }
.df-tools__more:hover, .df-tools.is-open .df-tools__more { background: var(--surface-2); color: var(--brand); }
.df-tools__menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px rgb(20 30 50 / .18); }
.df-tools.is-open .df-tools__menu { display: block; }
.df-tool { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer; text-align: left; }
.df-tool:hover { background: var(--surface-2); }
.df-tool svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--brand); }
.df-tool i { font-style: normal; }
/* 다시 시작 */
.df-restart { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.df-restart + .df-fold { margin-left: 6px !important; }
.df-sheet__bg { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / .4); }
.df-sheet__box { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-width: 520px; margin: 0 auto; padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -6px 24px rgb(0 0 0 / .15); }
.df-sheet__box h3 { margin: 4px 4px 12px; font-size: 1.1rem; }
.df-sheet__opt { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.df-sheet__opt:hover { background: var(--surface-2); }
.df-sheet__opt i { flex: 0 0 32px; display: flex; justify-content: center; color: var(--brand); }
.df-sheet__opt b { display: block; font-size: 1rem; }
.df-sheet__opt small { color: var(--muted); font-size: .85rem; }
.df-sheet__opt--warn b, .df-sheet__opt--warn i { color: var(--safety-ink, #b42318); }
.df-sheet__close { width: 100%; min-height: 46px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
@media (min-width: 900px) { .df-sheet__box { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 22px; } }
/* 펼친 항목: 테두리와 옅은 바탕으로 영역 구분 */
.df-row.is-open { background: color-mix(in srgb, var(--brand) 6%, var(--surface)) !important; box-shadow: 0 0 0 2px var(--brand), 0 6px 18px rgb(20 30 50 / .12) !important; border-radius: 18px; }
/* 모바일: 항목을 펼치면 아래 버튼 바를 내려 가리지 않게 */
@media (max-width: 899px) { .df:has(.df-row.is-open) .actionbar--df { transform: translateY(calc(100% + 10px)); } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: min(92vw, 420px); padding: 12px 14px; border-radius: 16px; background: var(--ink); color: var(--bg); font-size: .92rem; box-shadow: var(--shadow); }
.toast[hidden] { display: none; }
.toast p { margin: 0; }
.toast input { margin-top: 8px; width: 100%; min-height: 40px; border-radius: 10px; border: 0; padding: 4px 8px; font: inherit; font-size: .8rem; }

/* 홈: 페르소나 카드 */
.personas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.persona { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.persona__art .art { width: 84px; height: 84px; display: block; }
.persona__name { font-family: var(--font-display); font-size: 1.1rem; }
.persona__go { position: absolute; top: 10px; right: 12px; color: var(--muted); }
.persona.is-soon { opacity: .55; box-shadow: none; }
.persona.is-soon small { color: var(--muted); font-size: .78rem; }
a.persona:hover { border-color: var(--brand); }

/* 집중 모드: 밝게는 진한 바탕, 어둡게는 검은 바탕에 숫자·테두리·막대만 색 (--fm-* 토큰) */
.fm { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; gap: 10px; color: var(--fm-ink); background: var(--fm-bg); --c: var(--fm-c);
  padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); transition: background-color .8s ease; overflow-y: auto; }
.fm > * { flex-shrink: 0; }
.fm[data-phase="rest"], .fm[data-phase="done"] { background: var(--fm-bg-rest); --c: var(--fm-c-rest); }
.fm.is-paused { background: var(--fm-bg-pause); --c: var(--fm-c-pause); }
.fm::after { content: ""; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 var(--fm-ring) var(--c), inset 0 0 var(--fm-glow) color-mix(in srgb, var(--c) 35%, transparent); }
.fm[data-phase="done"]::after { animation: fm-blink 1s ease-in-out 6; }
@keyframes fm-blink { 50% { opacity: .15; } }
.fm__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fm__dots { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }
.fm__dots li { width: 22px; height: 8px; border-radius: 4px; background: var(--fm-dot); }
.fm__dots li.rest { width: 10px; }
.fm.is-single .fm__dots { visibility: hidden; }
.fm__dots li.is-done { background: var(--fm-dot-done); }
.fm__dots li.is-on { background: var(--c); }
.fm__tools { display: flex; align-items: center; gap: 2px; }
.fm__theme { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--fm-muted); cursor: pointer; padding: 0; }
.fm__theme svg { width: 22px; height: 22px; }
.fm__end { min-height: 44px; padding: 4px 12px; border: 0; background: none; color: var(--fm-muted); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fm__mid { margin: auto 0; text-align: center; }
.fm__art { width: min(44vw, 180px); aspect-ratio: 1; margin: 0 auto 8px; border-radius: 32px; background: var(--fm-art); display: grid; place-items: center; }
.fm__art .art { width: 78%; height: 78%; }
.fm__phase { font-family: var(--font-display); font-size: 1.5rem; margin: 0; color: var(--fm-strong); }
/* 숫자마다 폭을 고정해서 초가 바뀌어도 전체가 흔들리지 않게 */
.fm__clock { display: flex; justify-content: center; color: var(--c); font-family: var(--font-num); font-weight: 600; font-size: clamp(4.4rem, 26vw, 10rem); line-height: 1; font-variant-numeric: tabular-nums; }
.fm__clock > span { display: inline-block; width: .62em; text-align: center; }
.fm__clock > span.is-sep { width: .3em; }
.fm__next { margin: 6px 0 0; color: var(--fm-muted); font-weight: 600; }
.fm__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fm__btn { min-height: 64px; border-radius: 999px; border: 2px solid var(--fm-btn-line); background: var(--fm-btn); color: var(--fm-strong); font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.fm__btn:disabled { opacity: .4; }
.fm__bar { position: fixed; left: 0; right: 0; bottom: 0; height: 8px; background: var(--fm-track); }
.fm__bar > i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 0 4px 4px 0; }
.fm .steam { animation: rise 2.4s ease-in-out infinite; transform-box: fill-box; }
@media (prefers-reduced-motion: reduce) { .fm { transition: none; } .fm[data-phase="done"]::after { animation: none; } }

/* 켜 두기 화면: 큰 시계 + 지금/다음 (타이머 화면과 같은 밝게/어둡게 토큰) */
html.is-ambient, html.is-ambient body { overflow: hidden; }
.am { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; gap: 12px; color: var(--fm-ink); background: var(--fm-bg); --c: var(--fm-c);
  padding: max(12px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.am[data-state="done"] { --c: var(--fm-c-rest); }
.am::after { content: ""; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 var(--fm-ring) var(--c), inset 0 0 var(--fm-glow) color-mix(in srgb, var(--c) 30%, transparent); opacity: .6; }
.am[data-state="wait"]::after { opacity: .25; }
.am__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.am__date { margin: 0; color: var(--fm-muted); font-weight: 700; }
.am__main { margin: auto 0; display: grid; gap: 18px; justify-items: center; text-align: center; }
.am__clock { display: flex; justify-content: center; font-family: var(--font-num); font-weight: 600; font-size: clamp(5rem, 30vw, 13rem); line-height: 1; color: var(--fm-strong); font-variant-numeric: tabular-nums; }
.am__clock > span { display: inline-block; width: .62em; text-align: center; }
.am__clock > span.is-sep { width: .3em; }
.am__side { display: grid; gap: 14px; justify-items: center; width: min(100%, 520px); }
.am__now { display: flex; align-items: center; gap: 14px; text-align: left; }
.am__art { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 26px; background: var(--fm-art); display: grid; place-items: center; }
.am__art .art { width: 78%; height: 78%; }
.am__tag { margin: 0; color: var(--fm-muted); font-weight: 700; font-size: .95rem; }
.am__name { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.2; color: var(--c); }
.am[data-state="wait"] .am__name { color: var(--fm-strong); }
.am__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.am__btns:empty { display: none; }
.am__btns .fm__btn { min-height: 56px; padding: 0 22px; }
.am__ok { margin: 0; font-weight: 700; color: var(--c); }
.am__next { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--fm-btn-line); background: var(--fm-btn); color: var(--fm-ink); width: 100%; text-align: left; }
.am__next:empty { display: none; }
.am__nextart { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--fm-art); display: grid; place-items: center; }
.am__next > span:nth-child(2) { flex: 1; min-width: 0; }
.am__next b, .am__in { font-family: var(--font-num); font-weight: 600; }
.am__in { white-space: nowrap; color: var(--fm-muted); }
/* 가로로 놓인 태블릿·모니터: 시계 왼쪽, 지금/다음 오른쪽 */
@media (orientation: landscape) and (min-width: 700px) {
  .am__main { grid-template-columns: auto minmax(0, 440px); align-items: center; justify-content: center; column-gap: 56px; justify-items: start; text-align: left; }
  .am__side { justify-items: start; }
  .am__btns { justify-content: flex-start; }
  .am__clock { font-size: clamp(6rem, 17vw, 15rem); }
}

.df-edit__col { min-width: 0; }

/* ---------- PC: 넓은 화면은 옆으로 ---------- */
@media (min-width: 900px) {
  .df-now { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; padding: 18px 22px; }
  .df-now__next { margin: 0; justify-self: end; min-width: 320px; }
  .df-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .df-seg { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 12px 12px 6px; }
  .df-seg__title { margin-bottom: 4px; }
  .df-row__main { grid-template-columns: 44px 36px 1fr; gap: 6px; }
  .df-seg__list::before { left: 61px; }
  .df-row__more { margin-left: 0; }
  .df-edit > div[data-ref="edit"] { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 24px; align-items: start; }
  .df-edit__col .df-h:first-child { margin-top: 8px; }
  .actionbar--df { position: static; display: flex; flex: 1 0 100%; gap: 10px; max-width: none; margin: 0; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none !important; }
  .actionbar--df .actionbar__go { min-height: 52px; padding: 0 24px; background: var(--brand-ink); color: var(--brand); border: 0; }
  .actionbar--df .actionbar__go.is-done { background: rgb(255 255 255 / .16); color: var(--brand-ink); border: 0; }
  .actionbar--df .actionbar__amb { min-height: 52px; background: transparent; color: var(--brand-ink); border: 1.5px solid rgb(255 255 255 / .6); }
  .actionbar--df .actionbar__amb svg { color: currentColor; }
  /* 위쪽 도구: ⋯ 없이 글자 버튼으로 나란히 */
  .df-tools { gap: 8px; }
  .df-tools__more { display: none; }
  .df-tools__menu { display: contents !important; }
  .df-tool { width: auto; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .9rem; font-weight: 700; }
  .df-tool svg { width: 18px; height: 18px; }
  .df-tool i { display: none; }
  .wrap--tool:has(.df) ~ .actionbar--df, .wrap--tool:has(.df) { padding-bottom: 0; }
  .toast { bottom: 32px; }

  .home-q--split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; margin-top: 16px; }
  .home-q--split .home-hero .art { max-height: 320px; }
  .home-q--split .home-q__title { text-align: left; font-size: 2.4rem; margin-bottom: 20px; }
  .home-about { max-width: 720px; }
}

/* 드래그·편집 */
.df-row__grip { display: grid; place-items: center; width: 22px; min-height: 44px; color: var(--line); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.df-row__grip svg { fill: currentColor; }
.df-row:hover .df-row__grip, .df-row__grip:active { color: var(--muted); }
.df-row.is-dragging { z-index: 5; background: var(--surface); box-shadow: 0 8px 28px rgb(20 30 50 / .18); cursor: grabbing; }
.df-row.is-dragging .df-row__time { color: var(--brand); font-size: 1.1rem; }
.df-row.is-dragging .df-row__main { opacity: 1; }
.df-row__time { position: relative; white-space: nowrap; }
.df-row.is-mine .df-row__time::after { content: ""; position: absolute; right: -2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--brand); }
.df-row.is-open { background: var(--surface); box-shadow: var(--shadow); }
.df-ed { grid-column: 1 / -1; padding: 4px 12px 12px 30px; display: grid; gap: 10px; }
.df-ed__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.df-ed__field { display: grid; gap: 2px; font-size: .8rem; color: var(--muted); font-weight: 700; }
.df-ed__field--grow { flex: 1 1 160px; }
.df-ed__field input { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1rem; padding: 4px 10px; min-width: 0; }
.df-ed__field input[type=time] { font-family: var(--font-num); font-weight: 600; }
.df-ed__arts { display: flex; flex-wrap: wrap; gap: 4px; }
.df-ed__art { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); cursor: pointer; padding: 0; }
.df-ed__art[aria-checked="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.df-ed__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.df-ed__timer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.df-chip--go { min-height: 44px; background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }
.df-ed__info { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .9rem; }
.df-ed__info p { margin: 0; }
.df-ed__info a { font-weight: 700; white-space: nowrap; }
.df-ed__basis { margin: 0; font-size: .8rem; color: var(--muted); }
.df-ed__done { margin-left: auto; min-width: 88px; }
.df-ed__mins { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; color: var(--muted); }
.df-ed__mins input { width: 4.2em; min-height: 40px; padding: 4px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-num); text-align: right; }
.df-chip--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.df-chip--warn { color: var(--safety-ink); }
.df-ed__how { margin: 0; font-size: .9rem; }
.df-ed .df-tag { margin: 0; }
.df-line__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.df-addrow { min-height: 48px; padding: 6px 18px; border-radius: 999px; border: 2px dashed var(--line); background: none; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.df-addrow:hover { border-color: var(--brand); }
.df-addform { flex: 1 1 100%; display: grid; gap: 10px; padding: 14px; border-radius: 18px; border: 2px dashed var(--brand); background: var(--surface); }
.df-addform__title { margin: 0; font-weight: 700; color: var(--brand); }
.df-addform .df-ed__field input { width: 100%; }
.df-addform .df-ed__row .df-ed__field { flex: 1 1 120px; }
.df-row.is-new { animation: df-new 2s ease-out; border-radius: 14px; }
@keyframes df-new { 0%, 40% { background: color-mix(in srgb, var(--brand) 18%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .df-row.is-new { animation: none; outline: 2px solid var(--brand); } }
.df-link { min-height: 44px; border: 0; background: none; color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.df-link:hover { color: var(--brand); }
.df-hint { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--muted); }
@media (hover: none) { .df-row__grip { color: var(--muted); } }

/* PC: 흐름은 왼쪽 한 줄, 내 하루 맞추기는 오른쪽 */
@media (min-width: 900px) {
  .df { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 28px; align-items: start;
    grid-template-areas: "head today" "now today" "warn today" "line today" "guides today"; }
  .df > .df-guidebox { grid-area: guides; }
  .df-head { grid-area: head; }
  .df-now { grid-area: now; }
  .df-line { grid-area: line; grid-template-columns: 1fr !important; }
  .df > [data-ref="warn"] { grid-area: warn; }
  .df-edit { grid-area: edit; grid-row: 1 / span 7; position: sticky; top: 12px; margin-top: 4px; max-height: calc(100vh - 24px); overflow-y: auto; }
  .df-edit > div[data-ref="edit"] { display: block !important; }
  .df-now__next { min-width: 0 !important; }
  /* 흐름 목록: 이름 아래 작은 줄(분·반복·메모)을 이름 옆에 나란히 */
  .df-row:not(.is-anchor) .df-row__label, .df-group__main .df-row__label { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
  .df-row:not(.is-anchor) .df-row__label small, .df-group__main .df-row__label small { display: inline; white-space: nowrap; }
  .df-row:not(.is-anchor) .df-row__label small.df-row__memo, .df-group__main .df-row__label small.df-row__memo { white-space: normal; }
  .df-row:not(.is-anchor) .df-row__label small::before, .df-group__main .df-row__label small::before { content: "·"; margin-right: 10px; opacity: .5; }
  /* 내 하루 맞추기 접기 */
  .df-fold { display: inline-flex; margin-left: auto; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
  .df.is-folded .df-edit { padding: 12px 6px; overflow: visible; }
  .df.is-folded .df-edit__title { flex-direction: column; gap: 10px; }
  .df.is-folded .df-edit__title > span, .df.is-folded .df-edit > div[data-ref="edit"] { display: none !important; }
  .df.is-folded .df-fold { margin: 0 !important; padding: 0; width: 40px; height: 40px; justify-content: center; align-items: center; font-size: 1.2rem; }
  /* 접으면 흐름은 펼친 때와 같은 폭으로 두고 막대 옆에 모은다(너무 넓으면 체크 칸이 멀어짐) */
  .df.is-folded { grid-template-columns: minmax(0, 760px) 64px; justify-content: center; }
  .df.is-folded .df-restart { display: none; }
  .df.is-folded .df-edit { cursor: pointer; }
  .df.is-folded .df-edit:hover { border-color: var(--brand); }
  /* 지금 카드: 첫 줄 지금·다음, 둘째 줄 버튼(왼쪽)·주간 안내(오른쪽) */
  .df-now .actionbar--df { order: 2; flex: 0 0 auto; }
  .df-now .df-week { order: 3; flex: 1 1 240px !important; align-self: center; }
  .df-now .df-week--empty p { justify-content: flex-end; text-align: right; }
  /* 지금 카드: 자리가 모자라면 '다음'은 아래 줄로, 타이머 버튼·주간 합계는 각각 한 줄 */
  .df-now { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
  .df-now > .df-now__cur { flex: 1 1 260px; min-width: 0; }
  .df-now > .df-now__next { flex: 0 0 auto; max-width: 100%; margin: 0; }
  .df-now > .df-now__next > span:nth-child(2) { white-space: nowrap; }
  .df-now > .df-week { flex: 1 0 100%; margin-top: 0; }
  .df-row__main { grid-template-columns: 52px 40px 1fr !important; }
  .df-seg__list::before { left: 90px !important; }
}

/* 샘플 고르기 */
.df.is-picking > :not(.df-head):not(.df-pick) { display: none !important; }
.df-pick { margin-top: 10px; }
.df-pick__title { font-size: 1.45rem; margin: 6px 0 2px; }
.df-pick__sub { margin: 0 0 14px; color: var(--muted); }
.df-pick__cards { display: grid; gap: 10px; }
.df-pick__card { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 22px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow); }
.df-pick__card:hover, .df-pick__card:focus-visible { border-color: var(--brand); }
.df-pick__art { grid-row: span 2; }
.df-pick__art .art { width: 92px; height: 92px; display: block; }
.df-pick__who { display: flex; flex-direction: column; align-self: end; }
.df-pick__who small { color: var(--brand); font-weight: 700; font-size: .85rem; }
.df-pick__who b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.df-pick__line { align-self: start; color: var(--muted); font-size: .95rem; }
.df-pick__more { display: flex; gap: 16px; margin-top: 8px; }
.df-banner { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 8px 6px 12px; border-radius: 18px; background: var(--surface-2); font-size: .92rem; }
.df-banner[hidden] { display: none; }
.df-banner p { margin: 0; flex: 1; min-width: 0; }
.df-banner__art .art { width: 40px; height: 40px; display: block; }
.df-banner__btns { display: flex; gap: 6px; }
@media (min-width: 900px) {
  .df.is-picking { display: block; }
  .df-pick__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .df-pick__card { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 20px 14px; }
  .df-pick__art { grid-row: auto; }
  .df-pick__art .art { width: 140px; height: 140px; }
  .df-pick__who { align-items: center; }
  .df { grid-template-areas: "head today" "banner today" "now today" "warn today" "line today" "guides today"; }
  .df-banner { grid-area: banner; }
  .df-pick { grid-column: 1 / -1; }
}

/* ---------- 흐름도 가독성 ---------- */
.df-line { gap: 0; }
.df-seg__list { margin-top: 4px; }
/* 기준 시각 = 얇은 구분선 */
.df-row.is-anchor { margin: 6px 0 2px; }
.df-row.is-anchor .df-row__main { min-height: 34px; }
.df-row.is-anchor .df-row__pic { width: 26px; height: 26px; justify-self: center; }
.df-row.is-anchor .df-row__label { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--muted); opacity: 1; letter-spacing: .02em; }
.df-row.is-anchor .df-row__label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.df-row.is-anchor .df-row__time { font-size: .82rem; color: var(--muted); }
/* 지금 선 */
.df-nowline { position: relative; display: flex; align-items: center; gap: 8px; margin: 4px 0; padding-left: 22px; color: var(--heat-now); font-family: var(--font-num); font-weight: 600; font-size: .85rem; }
.df-nowline span { background: var(--heat-now); color: #fff; padding: 2px 10px; border-radius: 999px; z-index: 1; }
.df-nowline::after { content: ""; flex: 1; height: 2px; background: var(--heat-now); border-radius: 1px; }
/* 빈 시간 */
.df-gap { padding: 2px 0 2px 70px; font-size: .78rem; color: var(--muted); position: relative; z-index: 1; }
.df-gap::before { content: "· "; }
/* 반복 쉬기 묶음 */
.df-group { list-style: none; }
.df-group__main { display: grid; grid-template-columns: 48px 40px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 4px 0 4px 22px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.df-group__main .df-row__label small { display: block; font-weight: 500; color: var(--muted); font-size: .82rem; }
.df-group__chev { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--brand); font-size: .9rem; transition: transform .15s; }
.df-group.is-open .df-group__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .df-group__chev { transition: none; } }
.df-row.is-sub .df-row__main { min-height: 44px; }
.df-row.is-sub .df-row__label { font-weight: 500; font-size: .92rem; }
.df-row.is-sub .df-row__pic { transform: scale(.8); }
/* 군더더기 줄이기: 손잡이는 마우스 올릴 때 / 순서 바꾸기 중에만 */
.df-row__grip { visibility: hidden; }
.df-row__check { width: 34px; height: 34px; border-width: 1.5px; border-color: var(--line); }
.df-row__check svg { width: 18px; height: 18px; }
.df-row__check:not([aria-pressed="true"]) { opacity: .7; }
.df-arrange[aria-pressed="true"] { color: var(--brand); font-weight: 700; }
@media (min-width: 900px) {
  .df-group__main { grid-template-columns: 52px 40px 1fr auto; gap: 6px; }
}

/* ---------- 항목 칸: 1 먹고 마시기 / 2 몸 쓰기 / 3 쉬기·집중 — 그림·이름만 오른쪽으로 + 세로선에서 가지 선 ---------- */
.df-seg__list { --lane-2: 22px; --lane-3: 44px; }
.df-seg__list::before { left: 97px !important; } /* 1칸 그림 가운데 */
.df-row.lane-2, .df-group.lane-2 { --shift: var(--lane-2); }
.df-row.lane-3, .df-group.lane-3 { --shift: var(--lane-3); }
.df-row:is(.lane-2, .lane-3) .df-row__main { grid-template-columns: 48px calc(40px + var(--shift)) 1fr; }
.df-group:is(.lane-2, .lane-3) .df-group__main { grid-template-columns: 48px calc(40px + var(--shift)) 1fr auto; }
:is(.df-row, .df-group):is(.lane-2, .lane-3) .df-row__pic { justify-self: end; position: relative; }
:is(.df-row, .df-group):is(.lane-2, .lane-3) .df-row__pic::before { content: ""; position: absolute; right: 100%; top: 50%; width: calc(var(--shift) - 18px); height: 2px; margin-top: -1px; background: var(--line); }
.df-row.is-sub:is(.lane-2, .lane-3) .df-row__pic::before { width: calc(var(--shift) - 14px); }
@media (min-width: 900px) {
  .df-seg__list { --lane-2: 26px; --lane-3: 52px; }
  .df-seg__list::before { left: 100px !important; }
  .df-row:is(.lane-2, .lane-3) .df-row__main { grid-template-columns: 52px calc(40px + var(--shift)) 1fr !important; }
  .df-group:is(.lane-2, .lane-3) .df-group__main { grid-template-columns: 52px calc(40px + var(--shift)) 1fr auto; }
}

/* ---------- 구역: 아침 / 업무 시간 / 퇴근 후 ---------- */
.df-line { display: grid; gap: 12px; }
.df-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 10px 10px 6px 0; min-width: 0; }
.df-sec.is-now { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.df-sec__title { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; padding-left: 14px; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--ink); }
.df-sec__title .art { width: 24px; height: 24px; }
.df-sec__title small { font-family: var(--font-num); font-weight: 600; font-size: .85rem; color: var(--muted); }
.df-sec .df-seg__list { margin-top: 0; }
.df-sec--am { --sec-bg: color-mix(in srgb, var(--a-sun) 7%, var(--surface)); }
.df-sec--work { --sec-bg: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.df-sec--pm { --sec-bg: color-mix(in srgb, var(--a-moon) 8%, var(--surface)); }
.df-sec { background: var(--surface); }
.df-sec .df-row__pic { background: var(--surface); }
.df-sec.is-now { --sec-bg: color-mix(in srgb, var(--brand) 7%, var(--surface)); background: var(--sec-bg); box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 12%, transparent); }
.df-sec.is-now .df-row__pic { background: var(--sec-bg); }
.df-sec__now { margin-left: 2px; padding: 2px 9px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-family: inherit; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.df-line__foot { margin-top: 2px; }

/* 메모 */
.df-row__memo { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--brand) !important; font-weight: 500 !important; font-size: .78rem !important; }
.df-ed__field--memo { flex: 1 1 100%; }
.df-ed__field--memo input { width: 100%; }
.df-groupmemo { list-style: none; padding: 4px 12px 6px 70px; }

/* ---------- 가이드 연결 ---------- */
.df-ed__guide { margin: 0; font-size: .9rem; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.df-ed__guide a { font-weight: 700; white-space: nowrap; }
.df-guides { margin-top: 18px; }
.df-guides__title { font-size: 1rem; margin: 0 0 8px; }
.df-guides__list { display: grid; gap: 8px; margin-bottom: 6px; }
.df-guide { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.df-guide:hover { border-color: var(--brand); }
.df-guide b { display: block; font-size: .95rem; }
.df-guide small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.45; }
/* 휴대폰: 가이드 목록은 설정 아래, 요약 없이 제목만 */
@media (max-width: 899px) {
  .df-guide { padding: 8px 10px; }
  .df-guide small { display: none; }
  .df-guide .art { width: 32px; height: 32px; }
  .df-guide { grid-template-columns: 36px 1fr; }
}

/* ---------- 가이드 페이지 ---------- */
.gd { max-width: 680px; }
.gd-head { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; margin-top: 8px; }
.gd-head__art { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.gd-head__kind { margin: 0; font-size: .85rem; font-weight: 700; color: var(--brand); }
.gd-head__title { margin: 2px 0 4px; font-size: 1.5rem; }
.gd-head__date { margin: 0; font-size: .82rem; color: var(--muted); font-family: var(--font-num); }
.gd-answer { margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); }
.gd-answer b { display: block; font-size: .82rem; color: var(--brand); margin-bottom: 2px; }
.gd-body ul { padding-left: 1.2em; }
.gd-body li { margin: 6px 0; }
.gd-body blockquote { margin: 1.6em 0; padding: 12px 16px; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; font-size: .92rem; color: var(--muted); }
.gd-src { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.gd-src h2 { font-size: 1rem; }
.gd-src ol { padding-left: 1.2em; font-size: .88rem; }
.gd-src li { margin: 6px 0; overflow-wrap: anywhere; }
.gd-cta { margin: 24px 0; }
.gd-rel { margin-top: 28px; }
.gd-cards { display: grid; gap: 10px; }
.gd-card { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.gd-card:hover { border-color: var(--brand); }
.gd-card b { display: block; }
.gd-card small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.45; }
@media (min-width: 900px) { .gd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 가이드 본문 제목 구분 (A안: 색 + 구분선, 작은 제목은 이름표) */
.gd-body h2 { color: var(--brand); font-size: 1.3rem; font-weight: 700; margin-top: 2em; padding-top: 18px; border-top: 1px solid var(--line); }
.gd-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 1.4em; }
.gd-body .md-label strong { display: inline-block; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--ink); font-size: .95rem; }

/* 켜 두기: PC 작게 띄우기 버튼 */
.am__widget { min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--fm-btn-line); background: var(--fm-btn); color: var(--fm-strong); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; margin-right: 4px; }

/* PC 작은 위젯 (항상 위에 뜨는 창 안). 멀리서도 보이게 글씨를 크게 */
.wg-body { margin: 0; background: var(--fm-bg); }
.wg { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px 16px 16px; background: var(--fm-bg); color: var(--fm-ink); position: relative; --c: var(--fm-c); }
.wg[data-state="done"], .wg[data-state="rest"] { --c: var(--fm-c-rest); }
.wg[data-state="rest"] { background: var(--fm-bg-rest); }
.wg::after { content: ""; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 calc(var(--fm-ring) * .6) var(--c); }
.wg__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wg__clock { font-family: var(--font-num); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--fm-strong); font-variant-numeric: tabular-nums; }
.wg[data-state="run"] .wg__clock, .wg[data-state="rest"] .wg__clock { color: var(--c); }
.wg__side { display: flex; align-items: center; gap: 6px; }
.wg__date { font-size: .95rem; color: var(--fm-muted); font-weight: 700; }
.wg__expand { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--fm-btn-line); background: var(--fm-btn); color: var(--fm-strong); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0; }
.wg__now { display: flex; align-items: center; gap: 12px; }
.wg__art { width: 56px; height: 56px; border-radius: 16px; background: var(--fm-art); display: grid; place-items: center; flex: 0 0 auto; }
.wg__tag { margin: 0; font-size: .9rem; color: var(--fm-muted); font-weight: 700; }
.wg__name { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; color: var(--c); -webkit-text-stroke: .5px currentColor; }
.wg[data-state="wait"] .wg__name { color: var(--fm-strong); }
.wg__bar { height: 7px; border-radius: 4px; background: var(--fm-track); overflow: hidden; }
.wg__bar i { display: block; height: 100%; width: 0; background: var(--c); }
.wg__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wg__next { font-size: 1rem; color: var(--fm-ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg__next b { font-family: var(--font-num); }
.wg__btns { display: flex; gap: 6px; flex: 0 0 auto; }
.wg__btn { width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--fm-btn-line); background: var(--fm-btn); color: var(--fm-strong); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; padding: 0; }
.wg__ok { color: var(--c); font-weight: 700; font-size: 1.2rem; }

/* ---------- 집중·휴식 타이머 페이지 ---------- */
.tp { max-width: 980px; margin: 0 auto; padding: 8px 0 32px; }
.tp-h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; margin: 8px 0 4px; }
.tp-sub { margin: 0 0 8px; color: var(--muted); }
.tp-g, .tp-g--row h2 { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--brand); font-size: 1.05rem; font-weight: 700; }
.tp-g--row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tp-g--row h2 { margin: 0; padding: 0; border: 0; }
.tp-edit { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.tp-edit[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .tp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tp-card { display: grid; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.tp-btn { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 76px; padding: 14px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.tp-btn:hover { background: var(--surface-2); }
.tp-btn b { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-btn small { display: block; color: var(--muted); font-size: .82rem; font-family: var(--font-num); white-space: nowrap; }
.tp.is-editing .tp-btn { cursor: default; }
.tp.is-editing [data-ref="body"] .tp-btn:hover { background: none; }
.tp-adj { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 12px 12px; }
.tp-adj__b { min-height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-family: var(--font-num); font-weight: 700; cursor: pointer; }
.tp-make-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tp-make-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tp-make { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.tp-make__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.tp-make input { width: 4.2em; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); font: inherit; font-family: var(--font-num); font-weight: 600; font-size: 1.05rem; text-align: center; color: var(--ink); }
.tp-total { color: var(--muted); font-weight: 600; white-space: nowrap; }
.tp-go { margin-top: auto; width: 100%; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 700; cursor: pointer; }
.tp-flow { margin-top: 22px; padding: 14px; border-radius: 18px; background: var(--surface-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tp-flow p { margin: 0; font-weight: 700; }

/* ---------- 루틴 카드 공유 시트 ---------- */
.sh { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: end center; background: rgb(10 14 20 / .55); padding: 12px; }
@media (min-width: 700px) { .sh { place-items: center; } }
.sh__panel { width: min(100%, 440px); max-height: calc(100vh - 24px); overflow-y: auto; display: grid; gap: 12px; padding: 16px; border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.sh__head { display: flex; align-items: center; justify-content: space-between; }
.sh__h { margin: 0; font-size: 1.1rem; color: var(--brand); }
.sh__x { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 1rem; cursor: pointer; }
.sh__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.sh__seg button { min-height: 38px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.sh__seg button[aria-checked="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.sh__pv { display: grid; place-items: center; }
.sh__cv { display: block; width: auto; max-width: 100%; border-radius: 18px; box-shadow: 0 6px 20px rgb(0 0 0 / .14); }
.sh__pv[data-fmt="story"] .sh__cv, .sh__pv[data-fmt="wall"] .sh__cv { height: min(56vh, 520px); }
.sh__pv[data-fmt="square"] .sh__cv { width: min(100%, 360px); }
.sh__pv[data-fmt="card"] .sh__cv { width: min(100%, 340px); max-height: 52vh; object-fit: contain; }
.sh__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh__f { display: grid; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.sh__f input, .sh__title { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: .95rem; padding: 4px 10px; min-width: 0; }
.sh__title { text-align: left; font-weight: 700; color: var(--brand); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh__title:disabled { cursor: default; color: var(--ink); }
.sh__btns { display: flex; gap: 8px; }
.sh__btn { flex: 1; min-height: 48px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.sh__btn--go { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.sh__note { margin: 0; font-size: .78rem; color: var(--muted); text-align: center; }

/* ================================================================
   디자인 규칙 (사이트 전체)
   - 폭: 머리·꼬리·도구 화면 1120px, 글 페이지 720px
   - 제목: 페이지 제목 28 / 큰 구역 21 / 작은 구역 17 (모두 굵게)
   - 링크: 본문 안 글자 링크만 옅은 밑줄, 카드·버튼은 밑줄 없음
   ================================================================ */
:root { --w-page: 1120px; --w-read: 720px; --gutter: 16px; }
.wrap { max-width: calc(var(--w-read) + var(--gutter) * 2); }
.site-header, .site-footer { max-width: calc(var(--w-page) + var(--gutter) * 2); }
@media (min-width: 900px) {
  .wrap--tool:has(.df), .wrap--home, main:has(.tp) { max-width: calc(var(--w-page) + var(--gutter) * 2); }
  /* 흐름 화면에서 오른쪽을 접으면 머리·본문·꼬리를 모두 흐름 폭(760+28+64)에 맞춘다 */
  body:has(.df.is-folded) .site-header, body:has(.df.is-folded) .site-footer, .wrap--tool:has(.df.is-folded) { max-width: calc(852px + var(--gutter) * 2); }
}

/* 머리: 화면 끝까지 흰 띠 + 아랫선 (가로 스크롤 없이 그림자로 늘림) */
.site-header { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface), 0 1px 0 100vmax var(--line); clip-path: inset(0 -100vmax -1px); padding-top: 8px; padding-bottom: 8px; margin-bottom: 16px; }
/* 꼬리: 화면 끝까지 옅은 띠 + 윗선 */
.site-footer { border-top: 0; margin-top: 56px; padding-top: 24px; background: var(--surface-2); box-shadow: 0 0 0 100vmax var(--surface-2), 0 -1px 0 100vmax var(--line); clip-path: inset(-1px -100vmax 0); }
.site-footer a { text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--brand); }
/* 아래 버튼 바가 있는 화면(모바일): 바가 꼬리를 가리지 않게 꼬리 아래에 자리 */
.wrap--tool { padding-bottom: 8px; }
body:has(.actionbar) .site-footer { padding-bottom: calc(var(--bar-h) + 40px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body:has(.actionbar--df) .site-footer { padding-bottom: 40px; } }

/* 제목 세 단계 */
main h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; }
main h2 { font-size: 1.3rem; font-weight: 700; }
main h3 { font-size: 1.05rem; font-weight: 700; }
.gd-head__title { font-size: 1.75rem; font-weight: 800; }
/* 글 페이지의 큰 구역 제목: 파란 글씨 + 위 구분선 (가이드와 같은 모양) */
main.wrap:not(.wrap--tool):not(.wrap--home) :is(.section, .gd-body, .article) > h2 { color: var(--brand); margin-top: 1.8em; padding-top: 18px; border-top: 1px solid var(--line); }
main.wrap:not(.wrap--tool):not(.wrap--home) .article > h1 + h2,
main.wrap:not(.wrap--tool):not(.wrap--home) .gd-body > h2:first-child { border-top: 0; padding-top: 0; }
.gd-src h2, main .gd-src > h2 { font-size: 1rem !important; color: var(--ink) !important; border-top: 0 !important; padding-top: 0 !important; }

/* 본문 링크: 파란 글씨 + 옅고 얇은 밑줄, 올리면 진하게 */
main :is(p, li, td, dd, blockquote) a:not(.btn):not(.chip):not(.gd-plain) { color: var(--brand); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
main :is(p, li, td, dd, blockquote) a:not(.btn):not(.chip):hover { text-decoration-color: currentColor; }
/* 이동 링크: 밑줄 없이 → */
.more-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--brand); font-weight: 700; font-size: .92rem; text-decoration: none; }
.more-link::after { content: "→"; transition: transform .15s; }
.more-link:hover::after { transform: translateX(3px); }

/* 흐름 화면 아래 설명·질문: 카드 (PC는 두 칸) */
.wrap--tool .basis, .wrap--tool .faq { margin-top: 24px; padding: 20px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.wrap--tool .basis > h2, .wrap--tool .faq > h2 { font-size: 1.15rem; margin-top: 0; }
@media (min-width: 900px) {
  .wrap--tool:has(.df) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  .wrap--tool:has(.df) > * { grid-column: 1 / -1; }
  .wrap--tool:has(.df) > .basis, .wrap--tool:has(.df) > .faq { grid-column: auto; margin-top: 40px; }
}
/* 자주 묻는 질문: ▾/▴ 로 펼치기 */
.faq__item:last-child { border-bottom: 0; }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "▾"; flex: 0 0 auto; color: var(--muted); }
.faq__item[open] summary::after { content: "▴"; }
.faq__item summary:hover { color: var(--brand); }

/* 표: 둥근 카드 안 */
.table-wrap { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.table-wrap table { font-size: .9rem; }
.table-wrap th { background: var(--surface-2); font-weight: 700; }
.table-wrap th, .table-wrap td { padding: 10px 12px; }
.table-wrap tr:last-child td { border-bottom: 0; }

/* 가이드 카드 설명은 세 줄까지 (카드 높이 고르게) */
.gd-card small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 위젯 알림 화면: 구간 바뀜(3초) / 모두 끝남(누를 때까지, 테두리 깜빡임) */
.wg__notice { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; text-align: center; background: var(--fm-bg); color: var(--fm-strong); cursor: pointer; }
.wg__notice[hidden] { display: none; }
.wg__notice b { font-family: var(--font-display); font-size: 2rem; line-height: 1.2; color: var(--c); }
.wg__notice small { font-size: 1rem; color: var(--fm-ink); }
.wg__notice .wg__notice-hint { margin-top: 6px; font-size: .85rem; opacity: .7; }
.wg__notice-ok { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c); color: var(--fm-bg); font-size: 1.7rem; font-weight: 800; }
.wg.is-switch .wg__notice { animation: wg-pop .3s ease-out; }
.wg.is-finished::after { animation: wg-blink 1s ease-in-out infinite; }
@keyframes wg-blink { 50% { opacity: .15; } }
@keyframes wg-pop { from { transform: scale(.94); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wg.is-finished::after, .wg.is-switch .wg__notice { animation: none; } }

/* 휴대폰 가로(높이가 낮은 화면): 켜 두기는 시계 왼쪽·내용 오른쪽, 타이머는 그림 왼쪽·남은 시간 오른쪽 */
@media (orientation: landscape) and (max-height: 520px) {
  .fm, .am { gap: 6px; padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .fm__mid { display: grid; grid-template-columns: auto auto; grid-template-areas: "art phase" "art clock" "art next"; column-gap: 32px; align-items: center; justify-content: center; text-align: left; margin: auto 0; }
  .fm__art { grid-area: art; width: min(36vh, 150px); margin: 0; border-radius: 24px; }
  .fm__phase { grid-area: phase; font-size: 1.2rem; align-self: end; }
  .fm__clock { grid-area: clock; justify-content: flex-start; font-size: min(32vh, 15vw); }
  .fm__next { grid-area: next; margin: 0; align-self: start; }
  .fm__btns { width: min(100%, 560px); margin: 0 auto; }
  .fm__btn { min-height: 48px; font-size: 1rem; }
  .am__main { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: center; column-gap: 36px; justify-items: start; text-align: left; gap: 10px 36px; }
  .am__clock { font-size: min(36vh, 17vw); }
  .am__side { gap: 10px; justify-items: start; width: min(100%, 420px); }
  .am__now { gap: 10px; }
  .am__art { width: 60px; height: 60px; border-radius: 18px; }
  .am__name { font-size: 1.5rem; }
  .am__btns { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; }
  .am__btns .fm__btn { min-height: 44px; padding: 0 16px; }
  .am__next { padding: 6px 10px; }
  .am__nextart { width: 32px; height: 32px; border-radius: 10px; }
}
/* 가로로 보기 버튼(안드로이드) · 돌려 보라는 안내(아이폰, 처음 한 번) */
.fm__rotate { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 12px; margin-right: 4px; border-radius: 999px; border: 1.5px solid var(--fm-btn-line); background: var(--fm-btn); color: var(--fm-strong); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.fm__rotate[hidden] { display: none; }
.fm__landtip { position: absolute; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--fm-btn); border: 1px solid var(--fm-btn-line); color: var(--fm-strong); font-size: .9rem; }
.fm__landtip span { flex: 1; }
.fm__landtip button { flex: 0 0 auto; min-width: 36px; min-height: 36px; border: 0; background: none; color: var(--fm-muted); font: inherit; cursor: pointer; }

/* ---------- 처음 시작: 질문 3개 ---------- */
.df-q { max-width: 560px; margin: 4px auto 0; display: flex; flex-direction: column; min-height: calc(100svh - 190px); }
.df-q__steps { display: flex; gap: 6px; margin-bottom: 16px; }
.df-q__steps i { flex: 1; height: 5px; border-radius: 9px; background: var(--line); }
.df-q__steps i.on { background: var(--brand); }
.df-q__kick { margin: 0; color: var(--brand); font-weight: 800; font-size: .85rem; }
main .df-q__title { margin: 4px 0 6px; font-size: 1.55rem; font-weight: 800; }
.df-q__sub { margin: 0 0 18px; color: var(--muted); }
.df-q__grid, .df-q__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.df-q__list { display: grid; gap: 10px; }
.df-q__opt { min-height: 62px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.df-q__grid .df-q__opt { font-family: var(--font-num); font-size: 1.25rem; }
.df-q__list .df-q__opt { text-align: left; padding: 0 18px; font-size: 1.08rem; }
.df-q__opt[aria-pressed="true"], .df-q__card[aria-pressed="true"] { border: 2.5px solid var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }
.df-q__opt:hover, .df-q__card:hover { border-color: var(--brand); }
.df-q__more { align-self: flex-start; margin-top: 12px; min-height: 44px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); cursor: pointer; }
.df-q__custom { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; color: var(--muted); }
.df-q__custom2 .df-q__custom span { min-width: 2.2em; }
.df-q__custom input { min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 1.15rem; font-family: var(--font-num); }
.df-q__custom2 { display: flex; flex-wrap: wrap; gap: 0 18px; }
.df-q__err { margin: 12px 0 0; color: var(--safety-ink, #b42318); font-weight: 700; font-size: .92rem; }
.df-q__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.df-q__card b { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .72rem; display: grid; place-items: center; }
.df-q__foot { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
.df-q__foot button { min-height: 56px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.df-q__back { flex: 0 0 auto; padding: 0 20px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); }
.df-q__next { flex: 1; border: 0; background: var(--brand); color: var(--brand-ink); }
.df-q__cancel { align-self: center; margin-top: 6px; }
@media (min-width: 900px) { .df-q { min-height: 0; margin-top: 12px; } .df-q__foot { padding-top: 32px; } }
/* 질문·샘플 고르는 동안에는 아래 설명·질문 카드도 숨겨 한 가지에만 집중 */
.wrap--tool:has(.df.is-picking) > .basis, .wrap--tool:has(.df.is-picking) > .faq { display: none; }

/* ---------- 항목 편집: 한 줄 = 이름표 + 조절 ---------- */
.df-ed__line { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.df-ed__line > span:first-child { font-size: .85rem; font-weight: 700; color: var(--muted); font-family: var(--font-num); }
.df-ed__line--top { align-items: start; }
.df-chip--type { display: inline-flex; align-items: center; gap: 6px; padding-left: 6px; }
.df-chip--type svg { flex: none; border-radius: 50%; }
.df-chip--type[aria-pressed="true"] svg { background: #fff; }
.df-ed__field--type { margin: 4px 0 8px; }
.df-ed__line--top > span:first-child { padding-top: 10px; }
.df-ed__note { font-size: .9rem; color: var(--muted); }
.df-step { display: inline-flex; align-items: center; gap: 6px; }
.df-step__b { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--brand); font: inherit; font-size: 1.35rem; font-weight: 800; line-height: 1; cursor: pointer; touch-action: manipulation; }
.df-step__b:hover:not(:disabled) { border-color: var(--brand); }
.df-step__b:disabled { opacity: .35; cursor: default; }
.df-step__v, .df-step__n { min-width: 84px; text-align: center; font-family: var(--font-num); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.df-step__v { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; min-height: 44px; padding: 0 4px; border-radius: 12px; cursor: pointer; }
.df-step__v:hover { background: var(--surface-2); }
.df-step__v:has(:focus-visible) { outline: 2px solid var(--brand); }
/* 휴대폰 시간 선택기는 숨겨서 깔아 둔다: 시각을 누르면 열림, 화면에는 24시간 표기만 */
.df-step__pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; font-size: 16px; }
.df-step__n { font-size: 1.15rem; min-width: 96px; }
.df-ed__occ { gap: 6px; }
.df-occ { font-family: var(--font-num); font-weight: 700; }
.df-occ i { font-style: normal; color: var(--brand); margin-left: 2px; }
.df-occ[aria-pressed="true"] i { color: inherit; }
.df-ed__saved { margin: -2px 0 0; font-size: .8rem; color: var(--muted); }
.df-ed > .df-ed__timer { padding-left: 60px; }
/* 내 하루 맞추기: 펼친 항목 조절도 흐름 편집 창과 같은 모양 */
.df-it__ctl { display: grid; gap: 10px; padding: 4px 0 6px; }
.df-it__ctl .df-ed__actions { margin-top: 2px; }
/* 내 시간: 이름은 한 줄, −/+ 는 조금 작게 */
.df-items--time .df-it__text b { white-space: nowrap; }
.df-items--time .df-step { gap: 2px; }
.df-items--time .df-step__b { width: 40px; height: 40px; font-size: 1.2rem; }
.df-items--time .df-step__v { min-width: 70px; }
.df-items--time .df-step__v b { font-size: 1.15rem; }

/* ---------- 편집 창 (휴대폰: 아래에서, PC: 가운데) — 닫기 버튼으로만 닫힘 ---------- */
html.is-sheet, html.is-sheet body { overflow: hidden; }
.df-edsheet[hidden] { display: none; }
.df-edsheet__dim { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / .45); }
.df-edsheet__box { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-height: 78vh; max-height: 78svh; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -8px 30px rgb(0 0 0 / .2); }
.df-edsheet__box.is-enter { animation: df-sheet-up .22s ease-out; }
.df-edsheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 14px 0 12px; margin-bottom: 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.df-edsheet__head .art { flex: 0 0 auto; width: 40px; height: 40px; }
.df-edsheet__head > div { flex: 1; min-width: 0; }
.df-edsheet__head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.df-edsheet__head small { display: block; color: var(--muted); font-weight: 600; font-size: .85rem; font-family: var(--font-num); }
.df-edsheet__close { flex: 0 0 auto; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 800; cursor: pointer; }
.df-edsheet .df-ed { padding: 4px 0 0; }
.df-ed__warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--safety-bg, #fdecea); color: var(--safety-ink, #b42318); font-size: .88rem; }
.df-ed__more { justify-self: start; }
@keyframes df-sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 900px) {
  .df-edsheet__box { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 520px; max-height: 84vh; border-radius: 24px; padding: 0 22px 22px; }
  .df-edsheet__box.is-enter { animation: df-sheet-pop .18s ease-out; }
  @keyframes df-sheet-pop { from { transform: translate(-50%, -48%); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .df-edsheet__box { animation: none; } }

/* 고른 시간 바꾸기 영역: 고른 칩이 있는 줄 바로 아래, 꼬리로 그 칩을 가리킨다 */
.df-ed__occ { display: flex; flex-wrap: wrap; }
.df-selbox { --sel-bg: color-mix(in srgb, var(--brand) 9%, var(--surface)); flex: 1 0 100%; box-sizing: border-box; position: relative; display: grid; gap: 6px; margin: 4px 0 6px; padding: 10px 12px 12px; border-radius: 16px; background: var(--sel-bg); border: 2px solid var(--brand); }
.df-selbox::before { content: ""; position: absolute; top: -9px; left: var(--tip, 24px); width: 14px; height: 14px; background: var(--sel-bg); border-left: 2px solid var(--brand); border-top: 2px solid var(--brand); transform: rotate(45deg); }
.df-selbox > p { margin: 0; font-size: .82rem; font-weight: 800; color: var(--brand); font-family: var(--font-num); }
.df-selbox .df-step__b { background: var(--surface); }
/* 창 맨 위 버튼: 닫기 / 취소·저장 / 버릴까요? */
.df-edsheet__btns { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.df-edsheet__btns button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer; }
.df-edsheet__save { border: 0; background: var(--brand); color: var(--brand-ink); }
.df-edsheet__cancel { border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); }
.df-edsheet__discard { border: 0; background: var(--safety-ink, #b42318); color: #fff; }
.df-edsheet__head:has(.df-edsheet__ask) { flex-wrap: wrap; }
.df-edsheet__ask { flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; }
.df-edsheet__ask b { flex: 1 0 100%; text-align: right; font-size: .85rem; color: var(--safety-ink, #b42318); }
.df-edsheet__ask button { min-height: 40px; padding: 0 14px; }

/* ---------- PC 오른쪽 '오늘 한눈에' (휴대폰에는 없음: 위 '지금' 카드가 대신) ---------- */
.df-today { display: none; }
@media (min-width: 900px) {
  .df-today { grid-area: today; grid-row: 1 / span 6; position: sticky; top: 12px; align-self: start; display: grid; gap: 14px; margin-top: 4px; }
}
.df-today__card { padding: 16px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
main .df-today__card h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 1rem; font-weight: 800; }
.df-today__card h2 small { color: var(--muted); font-weight: 700; font-size: .85rem; font-family: var(--font-num); }
.df-today__big { margin: 0; color: var(--muted); font-weight: 700; }
.df-today__big b { font-family: var(--font-num); font-size: 2rem; color: var(--ink); }
.df-today__bar { display: block; height: 8px; margin-top: 10px; border-radius: 9px; background: var(--surface-2); overflow: hidden; }
.df-today__bar i { display: block; height: 100%; border-radius: 9px; background: var(--brand); }
.df-today__next { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.df-today__next li { display: grid; grid-template-columns: 46px 30px 1fr; align-items: center; gap: 6px; }
.df-today__next b { font-family: var(--font-num); color: var(--muted); }
.df-today__next .art { width: 28px; height: 28px; }
.df-today__guides a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.df-today__guides a:last-child { border-bottom: 0; }
.df-today__guides a:hover { color: var(--brand); }

/* ---------- 항목 추가 · 전체 설정 창 ---------- */
.df-tabs { display: flex; gap: 6px; margin: 4px 0 14px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.df-tab { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.df-tab[aria-selected="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 4px rgb(0 0 0 / .12); }
.df-panel { display: grid; gap: 10px; }
.df-panel .df-h { margin: 6px 0 0; color: var(--brand); }
.df-panel .df-note { margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
.df-panel__reset { display: flex; flex-wrap: wrap; gap: 8px; }
.df-panel .df-addform { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.df-panel .df-addform__title { display: none; }
.df-head__edit { border: 0; background: none; cursor: pointer; padding: 0; }

/* 배경화면 만들기는 휴대폰 메뉴에만(PC는 공유 창에서 고를 수 있음) */
@media (min-width: 900px) { .df-tool--wall { display: none !important; } }
.sh__f[hidden] { display: none !important; }
/* 운동 여러 개 */
.df-addmore { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 6px 0 2px; border: 1.5px dashed var(--brand); border-radius: 14px; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); color: var(--brand); font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; }
.df-addmore small { font-weight: 600; color: var(--muted); font-size: .76rem; }
.df-q__n { position: absolute; top: 6px; left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-style: normal; font-size: .72rem; font-weight: 800; }
/* 지난 시간 접기 · 지금으로 */
.df-earlier { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.df-earlier b { font-weight: 700; color: var(--muted); }
.df-earlier small { font-family: var(--font-num); font-weight: 600; font-size: .8rem; }
.df-earlier span { margin-left: auto; font-size: .8rem; }
.df-earlier:hover b { color: var(--brand); }
.df-gonow { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar-h) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: inherit; font-weight: 800; font-size: .92rem; box-shadow: 0 6px 18px rgb(0 0 0 / .22); cursor: pointer; }
.df-gonow small { font-family: var(--font-num); font-weight: 600; opacity: .8; }
.df-gonow[hidden] { display: none; }
@media (min-width: 900px) { .df-gonow { bottom: 24px; } }
/* 가이드 목록: 분류 칩 · 새로 올라온 글 · 새 글 표시 */
.gd-topics { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px 0 4px; padding: 2px; }
.gd-topics::-webkit-scrollbar { display: none; }
.gd-topic { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .9rem; text-decoration: none; }
.gd-topic small { font-family: var(--font-num); color: var(--muted); font-weight: 600; }
.gd-topic:hover { border-color: var(--brand); }
.gd-topic[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.gd-topic[aria-current="page"] small { color: inherit; opacity: .8; }
.gd-latest__list { list-style: none; margin: 0; padding: 4px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.gd-latest__list li + li { border-top: 1px solid var(--line); }
.gd-latest__list a { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; color: var(--ink); text-decoration: none; }
.gd-latest__list a:hover b { color: var(--brand); }
.gd-latest__art svg { width: 32px; height: 32px; }
.gd-latest__list b { font-weight: 700; font-size: .95rem; }
.gd-latest__list time { font-family: var(--font-num); font-size: .8rem; color: var(--muted); }
.gd-group__h a { color: inherit; text-decoration: none; }
.gd-group__h a::after { content: " →"; color: var(--muted); font-weight: 400; }
.gd-new { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); font-style: normal; font-size: .72rem; font-weight: 800; vertical-align: 2px; }
/* 가이드 '한눈에 보기' 그림 */
.gd-fig { margin: 1.6em 0; }
.gd-fig img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
/* 가이드: 본문 링크를 더 잘 보이게 */
main .gd-body :is(p, li, td, blockquote) a:not(.btn) { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 4px; }
main .gd-body :is(p, li, td, blockquote) a:not(.btn):hover { background: color-mix(in srgb, var(--brand) 10%, transparent); text-decoration-color: var(--brand); }
/* 그림 확대 */
.gd-fig { position: relative; }
.gd-fig img { cursor: zoom-in; }
.gd-fig__zoom { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgb(20 30 50 / .6); color: #fff; cursor: pointer; }
.gd-fig__zoom:hover { background: rgb(20 30 50 / .8); }
.gd-lb { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 64px 12px 48px; background: #0b0f17; overflow: auto; touch-action: pinch-zoom; }
.gd-lb img { max-width: 100%; max-height: 100%; border-radius: 12px; background: #fff; }
.gd-lb__x { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .16); color: #fff; font-size: 20px; cursor: pointer; }
.gd-lb__tip { position: fixed; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; color: rgb(255 255 255 / .7); font-size: .85rem; }
html.is-zoom { overflow: hidden; }
/* 글 중간 카드 · 맨 아래 상자: 하루흐름으로 */
.gd-mid { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; margin: 18px 0 8px; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); }
.gd-mid__art svg { width: 44px; height: 44px; display: block; }
.gd-mid p { margin: 0; }
.gd-mid b { display: block; font-size: 1rem; color: var(--ink); }
.gd-mid small { color: var(--muted); font-size: .86rem; }
main .gd-body .gd-mid a.gd-mid__go { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-weight: 800; text-decoration: none; }
main .gd-body .gd-mid a.gd-mid__go:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }
@media (min-width: 700px) { .gd-mid { grid-template-columns: auto 1fr auto; } main .gd-body .gd-mid a.gd-mid__go { grid-column: auto; } }
.gd-go { margin: 28px 0; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.gd-go__t { margin: 0 0 4px; font-weight: 800; font-size: 1.05rem; }
.gd-go__s { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }
/* 가이드 글 끝: 같은 분류 더 보기 · 전체 보기 */
.gd-more { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.gd-more__a { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; }
.gd-more__a::after { content: "→"; color: var(--muted); transition: transform .15s; }
.gd-more__a:hover { border-color: var(--brand); color: var(--brand); }
.gd-more__a:hover::after { transform: translateX(3px); color: var(--brand); }
.gd-more__a--all { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--brand); }
/* 휴대폰: 그림은 눌러서 크게 보면 되니 확대 버튼은 숨김 */
@media (max-width: 640px) { .gd-fig__zoom { display: none; } }
/* 자주 묻는 질문: 질문에 Q 표시, 답은 같은 들여쓰기로 */
.gd-body h3.faq-q { position: relative; margin: 1.6em 0 .4em; padding-left: 38px; font-size: 1.05rem; font-weight: 800; line-height: 1.45; color: var(--ink); }
.gd-body h3.faq-q::before { content: "Q"; position: absolute; left: 0; top: .05em; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--brand); color: var(--brand-ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .9rem; font-weight: 800; line-height: 1; }
.gd-body h3.faq-q + p, .gd-body h3.faq-q + p + p { margin-top: 0; padding-left: 38px; color: color-mix(in srgb, var(--ink) 85%, var(--muted)); }
/* 그림: 화면 모드에 맞는 쪽만 보이기 */
.gd-fig__dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gd-fig__light { display: none; } :root:not([data-theme="light"]) .gd-fig__dark { display: block; } }
:root[data-theme="dark"] .gd-fig__light { display: none; }
:root[data-theme="dark"] .gd-fig__dark { display: block; }
.gd-fig__light { display: block; }
:root[data-theme="dark"] .gd-fig img { border-color: rgb(255 255 255 / .1); background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gd-fig img { border-color: rgb(255 255 255 / .1); background: transparent; } }
/* PC: 그림 속 글씨가 본문과 비슷하게 580px, 가운데 */
@media (min-width: 641px) { .gd-fig { max-width: 580px; margin-left: auto; margin-right: auto; } }
/* 타이머: 반복 칸은 묶음별로, 휴대폰에서는 한 줄씩 */
.tp-pair { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .tp-make__row--rep { display: grid; gap: 8px; } }
/* 타이머: 고르는 법 안내 */
.tp-about { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.tp-about h2 { margin: 0 0 8px; font-size: 1.1rem; }
.tp-about ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); line-height: 1.6; }
.tp-about li b { color: var(--ink); }
.tp-about li a { font-weight: 600; white-space: nowrap; }
.tp-about__more { margin: 8px 0 0; }
/* 404: 갈 곳 안내 */
.nf-links { display: grid; gap: 10px; margin-top: 18px; }
.nf-link { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; }
.nf-link:hover { border-color: var(--brand); color: var(--brand); }
/* 아주 좁은 휴대폰(360px 미만): 타이머 타일은 한 줄에 하나씩 — 이름이 잘리지 않게 */
@media (max-width: 359px) { .tp-grid { grid-template-columns: 1fr !important; } }
/* 첫 화면 아래: 쓰는 법 · 새 가이드 · 도구 */
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.home-steps li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.home-steps__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: .9rem; }
.home-steps p { margin: 0; }
.home-steps p b { display: block; }
.home-steps small { display: block; color: var(--muted); font-size: .86rem; }
@media (min-width: 900px) { .home-steps { grid-template-columns: repeat(3, 1fr); } }
.home-more { margin: 6px 0 0; }
.home-tools__list { display: grid; gap: 10px; }
@media (min-width: 640px) { .home-tools__list { grid-template-columns: 1fr 1fr; } }
.home-tool { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-decoration: none; }
.home-tool:hover { border-color: var(--brand); }
.home-tool__art svg { display: block; width: 40px; height: 40px; }
.home-tool b { display: block; }
.home-tool small { display: block; color: var(--muted); font-size: .86rem; }
.home-note { margin-top: 18px; }
/* 계산 근거: 출처를 항목별 접기 카드로 */
.src-g { margin: 10px 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.src-g summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 12px 16px; font-weight: 800; cursor: pointer; }
.src-g summary::-webkit-details-marker { display: none; }
.src-g summary small { margin-left: 8px; color: var(--muted); font-weight: 600; font-size: .85rem; }
.src-g summary::after { content: "▾"; color: var(--muted); }
.src-g[open] summary::after { content: "▴"; }
.src-c { padding: 12px 16px; border-top: 1px solid var(--line); }
.src-c p { margin: 0 0 6px; font-size: .93rem; line-height: 1.65; }
.src-c__t { font-size: .86rem !important; overflow-wrap: anywhere; }
.src-c__d { display: inline-block; margin-top: 2px; padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .78rem; font-weight: 700; }
/* 어두운 화면: 현재 메뉴 배경을 조금 더 진하게 */
:root[data-theme="dark"] .site-nav a[aria-current] { background: color-mix(in srgb, var(--brand) 20%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-nav a[aria-current] { background: color-mix(in srgb, var(--brand) 20%, transparent); } }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

/* ================================================================
   홈 첫 화면: 하루 흐름도(일자형) + 시간 문장 + 시작 버튼
   PC: 흰 카드 안 한 줄 / 휴대폰: 카드 없이 흰 띠 위 오전·오후 두 줄
   ================================================================ */
:root { --hf-sleep: #dfe5f0; --hf-morn: #f7c84f; --hf-work: #7f9ee6; --hf-lunch: #f08a6b; --hf-eve: #58a46b; }
:root[data-theme="dark"] { --hf-sleep: #2c3442; --hf-morn: #c9a23e; --hf-work: #4f6fb8; --hf-lunch: #c4664c; --hf-eve: #3f8052; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hf-sleep: #2c3442; --hf-morn: #c9a23e; --hf-work: #4f6fb8; --hf-lunch: #c4664c; --hf-eve: #3f8052; } }
.hx { margin-top: 28px; }
.hx__h { font-size: clamp(1.75rem, 5.4vw, 2.6rem); line-height: 1.25; letter-spacing: -.03em; margin: 0; word-break: keep-all; }
.hx__lead { margin: 10px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; word-break: keep-all; }
.hx__flow { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 18px 0 0; }
.hf { display: block; width: 100%; height: auto; overflow: visible; }
.hf text { font-family: inherit; dominant-baseline: middle; text-anchor: middle; }
.hf .hf-sleep { fill: var(--hf-sleep); } .hf .hf-morn { fill: var(--hf-morn); } .hf .hf-work { fill: var(--hf-work); } .hf .hf-lunch { fill: var(--hf-lunch); } .hf .hf-eve { fill: var(--hf-eve); }
.hf-seg { font-size: 13px; font-weight: 700; fill: var(--muted); }
.hf-row { font-size: 11px; font-weight: 800; fill: var(--muted); text-anchor: start !important; }
.hf-t { font-size: 15px; font-weight: 800; fill: var(--ink); }
.hf-l { font-size: 12.5px; font-weight: 600; fill: var(--muted); }
.hf--two .hf-t { font-size: 10.5px; } .hf--two .hf-l { font-size: 9.5px; }
.hf-m > rect { fill: var(--surface); stroke: var(--line); filter: drop-shadow(0 4px 10px var(--a-shadow)); }
.hf-now line { stroke: var(--brand); stroke-width: 2; stroke-dasharray: 3 3; }
.hf-now rect { fill: var(--brand); }
.hf-now text { font-size: 12px; font-weight: 800; fill: var(--brand-ink); }
.hf--two .hf-now line { stroke-width: 1.6; stroke-dasharray: 2.5 2.5; } .hf--two .hf-now text { font-size: 9.5px; }
.hx__two { display: none; }
.hx__ask { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 0 24px; padding: 18px 0 22px; border-top: 1px dashed var(--line); }
.hx__say { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 2.1; word-break: keep-all; }
.hx__say br { display: none; }
.hf-chip { position: relative; display: inline-block; font-weight: 800; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); border-bottom: 2px solid var(--brand); border-radius: 8px 8px 2px 2px; padding: 1px 8px; margin: 0 1px; cursor: pointer; line-height: 1.5; font-variant-numeric: tabular-nums; }
.hf-chip:hover, .hf-chip:focus-within { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.hf-chip:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.hf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; font: inherit; }
.hx__gobox { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; justify-content: center; }
.hx__go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 22px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: 1.05rem; text-decoration: none; white-space: nowrap; }
.hx__go i { font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-ink); color: var(--brand); }
.hx__go:hover { filter: brightness(1.06); }
.hx__go[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.hx__micro { font-size: .84rem; color: var(--muted); font-weight: 600; }
.hx__err { margin: -6px 0 0; color: var(--danger, #c0392b); font-size: .9rem; font-weight: 700; }
.home-h { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin: 0 0 14px; }
@media (min-width: 900px) { .home-new__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .home-new__cards .gd-card small { -webkit-line-clamp: 2; } }
.site-nav__lbl { display: none; }
@media (min-width: 900px) {
  .site-nav a:has(.site-nav__lbl) { gap: 6px; padding: 0 12px 0 10px; font-size: .88rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
  .site-nav__lbl { display: inline; }
}
/* 넓은 PC: 문장 · 버튼 · 안내를 한 줄로 */
@media (min-width: 1200px) { .hx__ask { flex-direction: row; justify-content: center; gap: 28px; } }
/* 좁은 PC·태블릿: 한 줄 흐름도는 글씨가 너무 작아지므로 두 줄로 */
@media (max-width: 999px) {
  .hx__line { display: none; }
  .hx__two { display: block; max-width: 560px; margin: 0 auto; padding: 0 16px; }
}
@media (max-width: 640px) {
  .hx { margin-top: 20px; }
  .hx__lead { font-size: .98rem; margin-top: 8px; }
  .hx__flow { position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; padding: 0; margin-top: 10px; }
  .hx__flow::before { content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); top: -14px; height: 300px; z-index: -1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 0%, transparent) 0%, var(--surface) 16%, var(--surface) 62%, color-mix(in srgb, var(--surface) 0%, transparent) 100%); }
  .hx__ask { margin: 0; padding: 12px 0 4px; border-top: 0; }
  .hx__say { font-size: 1.04rem; line-height: 2.2; }
  .hx__say br { display: inline; }
  .hx__gobox { width: 100%; flex-direction: column; align-items: stretch; }
  .hx__go { justify-content: center; }
  .hx__micro { text-align: center; }
  .hx__two { padding: 6px 0 0; max-width: none; }
}