/* digital_binder UX-005 v0.4 — 시작 화면 프로토타입. 층: desk(책상) → paper(종이) → photo/sticker → chrome(조작). */
:root {
  --desk: #efe8dc;
  --desk-deep: #e4dccd;
  --paper: #fffdf8;
  --paper-line: #ece4d6;
  --ink: #2b2f2c;
  --ink-soft: #5c625d;
  --ink-faint: #676b65;
  --chrome: #fbfaf7;
  --chrome-line: #e6e2da;
  --sage: #4f6b58;
  --sage-soft: #e3ebe4;
  --tan: #b4875e;
  --plan: #4d6f96;
  --plan-soft: #e6edf5;
  --memory: #b8693c;
  --memory-soft: #f7e9df;
  --sample: #675c4b;
  --sample-soft: #f3eee5;
  --shadow-paper: 0 1px 0 #e7dfd0, 0 14px 30px rgba(64, 50, 30, .13);
  --shadow-photo: 0 2px 6px rgba(40, 30, 20, .18);
  --serif: "Nanum Myeongjo", "Noto Serif KR", "AppleMyungjo", "Batang", Georgia, serif;
  --sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: #f4f1ea; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #8fb09c; outline-offset: 2px; }
.hidden { display: none !important; }

/* ───────── 검토 셸 (chrome) ───────── */
.shell { max-width: 1500px; margin: 0 auto; padding: 0 32px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2ddd2; gap: 12px; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 30px; height: 36px; border: 2px solid var(--sage); border-radius: 7px; display: flex; flex-direction: column; justify-content: space-evenly; padding: 4px; }
.brand-mark i { display: block; height: 2px; background: #7d927f; border-radius: 2px; }
.brand-mark i:nth-child(2) { width: 70%; }
.brand strong { font-family: var(--serif); font-size: 20px; display: block; }
.brand em { font-style: normal; color: var(--tan); }
.brand small { font-size: 9px; letter-spacing: 2px; color: #a3a69d; font-weight: 700; }
.status-chip { font-size: 12px; background: #e8ece2; color: #55705b; padding: 8px 12px; border-radius: 16px; font-weight: 700; }
.workspace { display: grid; grid-template-columns: minmax(250px, 1fr) auto minmax(250px, .9fr); gap: 36px; padding: 32px 0 48px; align-items: start; }
.panel { padding-top: 12px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; color: #a19c8c; font-weight: 800; margin: 0 0 10px; }
.panel h1 { font-family: var(--serif); font-size: 34px; line-height: 1.25; letter-spacing: -1px; margin: 0 0 14px; }
.lede { font-size: 14px; line-height: 1.85; color: var(--ink-soft); margin: 0 0 24px; }
.concepts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.concept { display: flex; gap: 14px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: transparent; }
.concept[aria-selected="true"], .concept:hover { background: #fffdf8; border-color: #e4dfd2; }
.concept-key { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sage-soft); color: var(--sage); font-weight: 800; font-family: var(--serif); }
.concept[aria-selected="true"] .concept-key { background: var(--sage); color: #fff; }
.concept strong { display: block; font-size: 14px; }
.concept small { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.rules ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.9; color: var(--ink-soft); }
.stage { display: flex; flex-direction: column; align-items: center; }
.stage-caption { font-size: 11px; color: #9ea397; margin-top: 14px; }
.timer-card, .data-card { background: #fffdf8; border: 1px solid #e6e1d5; border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.timer-card span { font-size: 12px; color: var(--ink-soft); }
.timer-card strong { display: block; font-family: var(--serif); font-size: 40px; margin: 4px 0; font-variant-numeric: tabular-nums; }
.timer-card small { font-size: 11px; color: var(--ink-faint); }
.timer-bar { height: 6px; background: #ece8de; border-radius: 6px; overflow: hidden; margin: 10px 0 12px; }
.timer-bar i { display: block; height: 100%; width: 0; background: var(--sage); transition: width .3s linear; }
.timer-bar i.over { background: var(--memory); }
.metrics { display: flex; gap: 20px; margin: 0; }
.metrics dt { font-size: 10px; color: var(--ink-faint); }
.metrics dd { margin: 2px 0 0; font-weight: 800; font-size: 14px; }
.data-card ul { margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.9; color: var(--ink-soft); }
.data-card li b { color: var(--ink); }
.ghost-btn { width: 100%; padding: 11px; border-radius: 11px; border: 1px solid #d9dcd3; background: transparent; color: #5f7363; font-size: 12px; margin-bottom: 8px; }
.fine { font-size: 11px; line-height: 1.8; color: var(--ink-faint); }
.test-notice { max-width: 390px; font-size: 12px; line-height: 1.7; color: #6b5a3f; background: #f6efdf; border: 1px solid #e8dcc2; border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.toggle-row { display: flex; gap: 10px; align-items: flex-start; background: #fffdf8; border: 1px solid #e6e1d5; border-radius: 12px; padding: 12px; margin-bottom: 8px; font-size: 12px; cursor: pointer; }
.toggle-row input { margin-top: 2px; accent-color: var(--sage); width: 16px; height: 16px; }
.toggle-row small { display: block; color: var(--ink-faint); font-size: 11px; margin-top: 2px; }

/* ───────── 휴대폰 ───────── */
.phone { width: 390px; height: 844px; border-radius: 46px; border: 8px solid #242725; background: var(--desk); position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 16px 40px rgba(37, 52, 43, .14), 0 40px 90px rgba(38, 60, 50, .12); }
.phone::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 104px; height: 22px; background: #242725; border-radius: 0 0 18px 18px; z-index: 20; }
.statusbar { height: 46px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 28px 8px; font-size: 12px; font-weight: 800; color: #3f4740; position: relative; z-index: 5; }
.sb-icons { display: flex; gap: 3px; align-items: flex-end; }
.sb-icons i { width: 4px; background: #3f4740; border-radius: 1px; }
.sb-icons i:nth-child(1) { height: 5px; } .sb-icons i:nth-child(2) { height: 8px; } .sb-icons i:nth-child(3) { height: 11px; }
.screen-host { position: absolute; inset: 46px 0 0 0; overflow-y: auto; scrollbar-width: none; }
.screen-host::-webkit-scrollbar { display: none; }
.screen { min-height: 100%; padding: 6px 18px 28px; animation: screenIn .28s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 공통 화면 요소 */
.top-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.binder-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); background: rgba(255, 255, 255, .55); padding: 6px 10px; border-radius: 20px; }
.binder-pill i { width: 8px; height: 10px; border-radius: 2px; background: var(--sage); }
.icon-btn { width: 36px; height: 36px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .6); display: grid; place-items: center; color: var(--ink-soft); }
.icon-btn svg, .btn svg, .chip svg, .mini svg { width: 18px; height: 18px; }
.h-serif { font-family: var(--serif); letter-spacing: -.6px; }
.screen-title { font-family: var(--serif); font-size: 25px; line-height: 1.25; letter-spacing: -1px; margin: 10px 2px 4px; }
.screen-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 2px 16px; line-height: 1.6; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 15px 18px; font-weight: 800; font-size: 14px; }
.btn-primary { background: var(--sage); color: #fff; box-shadow: 0 6px 16px rgba(79, 107, 88, .28); }
.btn-primary:active { transform: translateY(1px); }
.btn-quiet { background: rgba(255, 255, 255, .7); color: var(--ink-soft); font-weight: 700; }
.btn-block { width: 100%; }
.cta-stack { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--ink-soft); line-height: 1.6; margin-top: 12px; padding: 0 4px; }
.privacy svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--sage); }
.badge-sample { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: var(--sample); background: var(--sample-soft); border: 1px dashed #c9bda8; border-radius: 6px; padding: 2px 6px; letter-spacing: .5px; vertical-align: middle; }
.tag-plan, .tag-memory { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 3px 7px; }
.tag-plan { color: #3b5a80; background: var(--plan-soft); }
.tag-memory { color: #8f4a20; background: var(--memory-soft); }
.tag-plan svg, .tag-memory svg { width: 12px; height: 12px; }

/* 종이(paper) + 바인더 링 */
.paper { background: var(--paper); border-radius: 6px 14px 14px 6px; box-shadow: var(--shadow-paper); position: relative; padding: 16px 14px 16px 30px; }
.paper::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; border-right: 1px dashed #e3d9c7; }
.rings { position: absolute; left: 6px; top: 18px; bottom: 18px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.rings i { width: 9px; height: 9px; border-radius: 50%; background: var(--desk); box-shadow: inset 1px 1px 2px rgba(70, 55, 35, .35); }
.paper-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.paper-head h3 { font-family: var(--serif); font-size: 19px; margin: 0; letter-spacing: -.5px; }
.paper-head span { font-family: Georgia, serif; font-size: 10px; letter-spacing: 1.5px; color: #77654c; }

/* A. 사진 달력 */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10px; color: var(--ink-faint); text-align: center; margin-bottom: 4px; }
.cal-week span:first-child { color: #a0513f; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { aspect-ratio: 1 / 1.08; border-radius: 6px; border: 0; background: #f6f1e7; position: relative; padding: 0; overflow: hidden; font-size: 10px; color: #8d8679; }
.cal-cell.blank { background: transparent; pointer-events: none; }
.cal-cell .d { position: absolute; top: 3px; left: 4px; font-weight: 700; z-index: 2; }
.cal-cell.has-photo .d { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.cal-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cal-cell.is-sample img { filter: saturate(.85); }
.cal-cell.is-sample::after { content: "예시"; position: absolute; right: 2px; bottom: 2px; font-size: 8px; font-weight: 800; color: #fff; background: rgba(90, 80, 65, .55); border-radius: 3px; padding: 0 3px; }
.cal-cell.today { outline: 2px dashed var(--sage); outline-offset: -2px; background: #f0f4ee; }
.cal-cell.today.has-photo { outline: 2px solid var(--sage); }
.cal-cell.today:not(.has-photo)::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; color: var(--sage); font-weight: 300; }
.cal-cell.just-added { animation: stick .7s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes stick { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.cal-cell .multi { position: absolute; right: 3px; top: 3px; z-index: 2; width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .85); font-size: 8px; color: var(--ink); display: grid; place-items: center; font-weight: 800; }
.feature { margin: 16px auto 0; width: 76%; background: #fff; padding: 10px 10px 30px; box-shadow: var(--shadow-photo), 0 16px 26px rgba(60, 45, 25, .12); transform: rotate(-2.2deg); position: relative; border-radius: 3px; }
.feature img, .feature .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 2px; background: #efe9de; }
.feature .ph { display: grid; place-items: center; color: #b9ad97; font-size: 12px; text-align: center; padding: 12px; }
.feature figcaption { position: absolute; left: 12px; right: 12px; bottom: 7px; font-family: var(--serif); font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.tape { position: absolute; top: -10px; left: 50%; width: 74px; height: 20px; transform: translateX(-50%) rotate(3deg); background: rgba(214, 196, 160, .62); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }

/* B. 타임라인 */
.timeline { position: relative; padding: 6px 0 6px 0; }
.hour { position: relative; height: 60px; display: flex; }
.hour-label { width: 44px; flex-shrink: 0; font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 0; transform: translateY(-6px); }
.hour-slot { flex: 1; border-top: 1px solid var(--paper-line); border-radius: 0; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; padding: 0 6px; color: transparent; position: relative; }
.hour-slot:hover, .hour-slot:focus-visible { background: rgba(79, 107, 88, .06); color: var(--sage); }
.hour-slot.hint { background: rgba(79, 107, 88, .07); }
.hour-slot.hint::after { content: "+ 여기를 눌러 일정 넣기"; position: absolute; left: 8px; top: 12px; font-size: 11.5px; color: var(--sage); font-weight: 800; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.now-line { position: absolute; left: 40px; right: 0; height: 0; border-top: 2px solid var(--memory); z-index: 3; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--memory); }
.now-line span { position: absolute; right: 0; top: -17px; font-size: 9.5px; color: #8f4a20; font-weight: 800; background: var(--paper); padding: 0 3px; }
.block { position: absolute; left: 50px; right: 4px; border-radius: 10px; border: 0; text-align: left; padding: 7px 9px; display: flex; gap: 8px; align-items: flex-start; z-index: 2; background: #e9efe8; color: #2f4635; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); overflow: hidden; }
.block.past { background: #efece5; color: #5b5a52; }
.block.mine { background: #dfe9e0; box-shadow: 0 0 0 2px var(--sage) inset; }
.block.just-added { animation: stick .6s cubic-bezier(.2, .9, .3, 1.25) both; }
.block .b-main { flex: 1; min-width: 0; }
.block strong { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block small { font-size: 10px; color: var(--ink-soft); }
.block .thumbs { display: flex; gap: 3px; flex-shrink: 0; }
.block .thumbs img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; box-shadow: var(--shadow-photo); }
.block .thumbs img.plan { outline: 2px solid var(--plan); outline-offset: -2px; }
.block .thumbs img.memory { outline: 2px solid var(--memory); outline-offset: -2px; }
.block .badge-sample { margin-left: 4px; }
.anchor { position: absolute; left: 50px; right: 4px; font-size: 10.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; z-index: 1; pointer-events: none; }
.anchor::before, .anchor::after { content: ""; flex: 1; border-top: 1px dashed #d8ccb6; }

/* C. 목적 선택 */
.purpose { display: grid; gap: 12px; margin-top: 8px; }
.purpose-card { border: 0; border-radius: 20px; padding: 0; text-align: left; background: var(--paper); box-shadow: var(--shadow-paper); overflow: hidden; display: flex; flex-direction: column; }
.purpose-card .art { height: 132px; position: relative; overflow: hidden; }
.purpose-card .copy { padding: 13px 16px 15px; display: flex; justify-content: space-between; align-items: center; }
.purpose-card strong { font-family: var(--serif); font-size: 19px; display: block; letter-spacing: -.5px; }
.purpose-card small { font-size: 11.5px; color: var(--ink-soft); display: block; margin-top: 3px; }
.purpose-card .go { width: 34px; height: 34px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.purpose-card .go svg { width: 16px; height: 16px; }
.mini-collage { position: absolute; inset: 0; background: linear-gradient(160deg, #f3ead9, #e9dcc5); }
.mini-collage img { position: absolute; width: 92px; height: 92px; object-fit: cover; border: 5px solid #fff; box-shadow: var(--shadow-photo); border-radius: 2px; }
.mini-timeline { position: absolute; inset: 0; background: linear-gradient(160deg, #eef2ec, #dfe8e0); padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.mini-timeline i { display: block; height: 22px; border-radius: 7px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.purpose-alt { background: transparent; border: 1px dashed #c8bda9; border-radius: 16px; padding: 14px; font-size: 13px; color: var(--ink-soft); font-weight: 700; }

/* 바텀시트 (chrome) */
.sheet-scrim { position: absolute; inset: 0; background: rgba(30, 36, 32, .42); z-index: 30; animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--chrome); border-radius: 24px 24px 0 0; padding: 10px 20px 26px; max-height: 86%; overflow-y: auto; box-shadow: 0 -8px 30px rgba(20, 30, 24, .16); animation: sheetUp .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.grabber { width: 44px; height: 4px; border-radius: 4px; background: #d8dcd4; margin: 0 auto 14px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sheet-head h3 { margin: 0; font-size: 18px; }
.sheet-sub { font-size: 12px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.6; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick { position: relative; border: 0; padding: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: #eee; }
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick .star { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .85); display: grid; place-items: center; color: #a49b8a; }
.pick .star svg { width: 14px; height: 14px; }
.pick.rep { box-shadow: 0 0 0 3px var(--sage); }
.pick.rep .star { background: var(--sage); color: #fff; }
.pick .src { position: absolute; left: 5px; bottom: 5px; }
.field-label { display: block; font-size: 12px; font-weight: 800; color: #4d5c52; margin: 12px 0 7px; }
.text-input { width: 100%; padding: 13px 12px; border-radius: 12px; border: 1px solid #d5dbd2; background: #fff; font-size: 15px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid #dbe0d8; background: #fff; border-radius: 11px; padding: 9px 13px; font-size: 13px; font-weight: 700; color: var(--ink-soft); display: inline-flex; gap: 6px; align-items: center; }
.chip[aria-pressed="true"] { background: var(--sage); color: #fff; border-color: var(--sage); }
.sheet-actions { display: flex; gap: 8px; margin-top: 18px; }
.sheet-actions .btn { flex: 1; }
.photo-section { border-radius: 14px; padding: 12px; margin-top: 12px; }
.photo-section.plan { background: var(--plan-soft); }
.photo-section.memory { background: var(--memory-soft); }
.photo-section header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.photo-section p { font-size: 11.5px; line-height: 1.6; margin: 0 0 8px; color: var(--ink-soft); }
.photo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-item { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-photo); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item .mini { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); display: grid; place-items: center; color: #6a6a62; padding: 0; }
.photo-item .mini svg { width: 12px; height: 12px; }
.add-tile { width: 76px; height: 76px; border-radius: 10px; border: 1.5px dashed currentColor; background: rgba(255, 255, 255, .6); display: grid; place-items: center; font-size: 11px; font-weight: 800; padding: 6px; text-align: center; }
.photo-section.plan .add-tile { color: var(--plan); }
.photo-section.memory .add-tile { color: var(--memory); }
.meta-line { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.group-title { font-size: 12px; font-weight: 800; color: #4d5c52; margin: 14px 0 8px; display: flex; gap: 6px; align-items: center; }

/* 완료·재방문 */
.done-hero { text-align: center; padding-top: 18px; }
.done-hero .seal { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; background: var(--sage); color: #fff; display: grid; place-items: center; animation: stick .6s cubic-bezier(.2, .9, .3, 1.3) both; }
.done-hero .seal svg { width: 30px; height: 30px; }
.result-card { margin: 18px 0 6px; }
.desk { background: linear-gradient(180deg, #e9e1d3, #e2d8c6); border-radius: 22px; padding: 18px; min-height: 260px; }
.binder-cover { width: 150px; height: 196px; margin: 6px auto 0; border-radius: 6px 14px 14px 6px; background: linear-gradient(135deg, #5c7a66, #4a6553); position: relative; box-shadow: inset 10px 0 0 rgba(0, 0, 0, .12), 0 14px 24px rgba(40, 50, 35, .25); }
.binder-cover .ring-strip { position: absolute; left: 4px; top: 22px; bottom: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.binder-cover .ring-strip i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #f1efe9, #a6a8a0); box-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.binder-cover .label { position: absolute; left: 28px; right: 14px; top: 22px; background: #fbf7ee; border-radius: 3px; padding: 8px; font-family: var(--serif); font-size: 13px; color: #3b4a3f; text-align: center; }
.binder-cover .cover-photo { position: absolute; left: 36px; right: 22px; bottom: 26px; height: 74px; border: 4px solid #fff; transform: rotate(3deg); box-shadow: var(--shadow-photo); background: #eee; }
.binder-cover .cover-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note-box { background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 12px 14px; font-size: 12px; line-height: 1.7; color: var(--ink-soft); margin-top: 14px; }
.note-box a { color: var(--sage); font-weight: 800; }

.toast { position: absolute; left: 22px; right: 22px; top: 58px; z-index: 40; background: #33463a; color: #fff; padding: 11px 14px; border-radius: 13px; font-size: 12px; text-align: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); animation: fade .2s ease both; }

/* 반응형 */
@media (max-width: 1180px) {
  .workspace { grid-template-columns: auto minmax(260px, 1fr); }
  .workspace > .panel:first-child { grid-column: 1 / -1; }
  .concepts { flex-direction: row; flex-wrap: wrap; }
  .concept { flex: 1 1 200px; }
}
@media (max-width: 760px) {
  .shell { padding: 0 16px; }
  .workspace { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
  .stage { order: -1; }
  .status-chip { display: none; }
}
@media (max-width: 430px) {
  .phone { width: calc(100vw - 24px); height: calc((100vw - 24px) * 2.164); max-height: 844px; border-width: 6px; border-radius: 38px; }
}

/* ───────── v0.2: 시작 화면·하단 탭·공통 추가·다중 등록·달력 완성도 ───────── */
.toggle-pair { display: grid; gap: 6px; }
.toggle-pair .ghost-btn { margin: 0; text-align: left; }
.ghost-btn[aria-pressed="true"] { background: var(--sage); color: #fff; border-color: var(--sage); }

/* 하단 탭 (chrome) */
.phone.with-nav .screen-host { bottom: 76px; }
.bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; z-index: 20; background: var(--chrome); border-top: 1px solid var(--chrome-line); display: flex; align-items: center; justify-content: space-around; padding: 4px 8px 14px; }
.nav-btn { flex: 1; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: #656b64; padding: 6px 0; }
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn.on { color: var(--sage); font-weight: 800; }
.nav-add { width: 52px; height: 52px; border-radius: 18px; border: 0; background: var(--sage); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(79, 107, 88, .32); margin-top: -18px; flex-shrink: 0; }
.nav-add svg { width: 24px; height: 24px; }

/* 상단: 바인더 전환·시작 화면 표시 */
.binder-switch { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(0, 0, 0, .06); background: rgba(255, 255, 255, .75); border-radius: 20px; padding: 7px 10px 7px 12px; font-size: 12.5px; font-weight: 800; color: var(--ink); max-width: 230px; }
.binder-switch i { width: 9px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.binder-switch svg { width: 14px; height: 14px; color: var(--ink-faint); }
.mode-chip { font-size: 10.5px; color: var(--ink-faint); background: rgba(255, 255, 255, .5); padding: 5px 8px; border-radius: 10px; }
.text-back { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-soft); padding: 6px 2px; }
.text-back svg { width: 16px; height: 16px; }

/* 목록·공통 추가 시트 */
.list { display: flex; flex-direction: column; gap: 6px; }
.list-row { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid #e3e6df; background: #fff; border-radius: 13px; padding: 12px; font-size: 13.5px; }
.list-row.on { border-color: var(--sage); box-shadow: 0 0 0 1px var(--sage) inset; }
.list-row small { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.list-row > span:nth-child(2) { flex: 1; }
.list-row .dot { width: 10px; height: 14px; border-radius: 2px; }
.list-row .tick svg { width: 18px; height: 18px; color: var(--sage); }
.add-list { display: grid; gap: 8px; }
.add-row { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; background: #fff; border-radius: 15px; padding: 13px 14px; box-shadow: 0 1px 0 #ebe6dc; }
.add-row strong { display: block; font-size: 14.5px; }
.add-row small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.add-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--sage-soft); color: var(--sage); display: grid; place-items: center; flex-shrink: 0; }
.add-ic svg { width: 20px; height: 20px; }
.add-row[data-add-kind="photo"] .add-ic { background: #f6eee2; color: var(--tan); }
.add-row[data-add-kind="event"] .add-ic { background: var(--plan-soft); color: var(--plan); }
.hour-chips .chip { min-width: 70px; justify-content: center; }

/* 다중 등록 트레이 */
.target-box { display: grid; gap: 4px; border-radius: 14px; padding: 11px 12px; margin-bottom: 12px; background: #f6f3ec; border: 1px solid #e6dfd1; }
.target-box.t-plan { background: var(--plan-soft); border-color: #cfdcea; }
.target-box.t-memory { background: var(--memory-soft); border-color: #ecd4c3; }
.target-box strong { font-size: 15px; }
.target-binder { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; color: var(--ink-soft); }
.target-binder i { width: 8px; height: 11px; border-radius: 2px; }
.target-box > span:last-child { justify-self: start; }
.tag-date { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 3px 7px; color: #6c5233; background: #f1e6d4; }
.tag-date svg { width: 12px; height: 12px; }
.tray-item { position: relative; }
.pick .star { border: 0; padding: 0; }
.pick .mini.remove { position: absolute; left: 5px; top: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(40, 40, 38, .62); color: #fff; display: grid; place-items: center; padding: 0; }
.pick .mini.remove svg { width: 12px; height: 12px; }
.pick-grid .add-tile { width: auto; height: auto; aspect-ratio: 1; color: var(--sage); }
.pick.failed { outline: 2px solid #c9715a; outline-offset: -2px; }
.pick.failed img { opacity: .6; }

/* 월 표지 */
.month-cover { position: relative; display: block; width: 100%; height: 118px; border: 0; padding: 0; border-radius: 16px; overflow: hidden; margin: 6px 0 10px; background: #f3ecdf; box-shadow: var(--shadow-paper); text-align: left; }
.month-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.month-cover.auto img { filter: saturate(.9); }
.month-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(25, 22, 18, .45)); }
.month-cover.default::after { background: none; }
.cover-art { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #f4ede0 0 14px, #efe6d6 14px 28px); }
.cover-tape { position: absolute; left: 22px; top: 14px; width: 64px; height: 16px; background: rgba(214, 196, 160, .7); transform: rotate(-5deg); }
.cover-month { position: absolute; left: 22px; top: 34px; font-family: var(--serif); font-size: 34px; color: #6b5a42; letter-spacing: -1px; }
.cover-year { position: absolute; left: 24px; top: 80px; font-family: Georgia, serif; font-size: 11px; letter-spacing: 2px; color: #a8957a; }
.cover-title { position: absolute; left: 14px; bottom: 10px; z-index: 2; font-family: var(--serif); font-size: 17px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.month-cover.default .cover-title { display: none; }
.cover-badge { position: absolute; right: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; padding: 4px 7px; border-radius: 8px; background: rgba(255, 255, 255, .88); color: var(--ink-soft); }
.cover-badge.pinned { background: var(--sage); color: #fff; }
.cover-badge svg { width: 11px; height: 11px; }
.cal-hint { margin: 0 2px 10px; }

/* 달력 칸: 배경 장식(데이터 없음) / 사용자 꾸밈 / 실제 일정 점 */
.cal-cell { background: linear-gradient(160deg, #faf6ee, #f3ede2); box-shadow: inset 0 -1px 0 rgba(120, 100, 70, .08); }
.cal-cell.weekend .d { color: #9a5a45; }
.cal-cell.deco-color { background: var(--deco); }
.cell-sticker { position: absolute; right: 2px; bottom: 2px; width: 46%; height: 46%; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15)); }
.cell-sticker svg { width: 100%; height: 100%; }
.cal-cell.has-photo .cell-sticker { width: 40%; height: 40%; }
.event-dot { position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--plan); transform: translateX(-50%); }
.deco-box { margin-top: 6px; border-top: 1px dashed #e3dccd; padding-top: 4px; }
.deco-box .group-title small { font-weight: 400; color: var(--ink-faint); font-size: 10.5px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.swatch { width: 32px; height: 32px; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd6c8; }
.swatch.on { box-shadow: 0 0 0 2px var(--sage); }
.sticker-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid #e3ddd0; background: #fff; padding: 6px; }
.sticker-btn svg { width: 100%; height: 100%; }
.sticker-btn.on { border-color: var(--sage); box-shadow: 0 0 0 1px var(--sage) inset; }

/* B: 오늘 카드·블록 가독성·완료/예정 */
.today-card { background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-paper); padding: 12px 14px; margin: 6px 0 10px; display: grid; gap: 8px; }
.tc-date { display: flex; justify-content: space-between; align-items: baseline; }
.tc-date strong { font-family: var(--serif); font-size: 18px; }
.tc-date small { font-size: 10.5px; color: #8f4a20; font-weight: 800; }
.tc-next { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.tc-next strong { font-size: 14px; flex: 1; }
.tc-next img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; outline: 2px solid var(--plan); outline-offset: -2px; box-shadow: var(--shadow-photo); }
.tc-label { font-size: 11px; color: var(--ink-faint); }
.tc-progress { display: grid; gap: 4px; font-size: 10.5px; color: var(--ink-soft); }
.tc-progress i { display: block; height: 5px; border-radius: 5px; background: var(--sage); max-width: 100%; }
.tc-progress { background: none; }
.block { cursor: pointer; padding: 6px 8px 6px 6px; }
.block.upcoming { background: #e4ece6; color: #24402e; box-shadow: inset 3px 0 0 var(--sage); }
.block.past:not(.done) { background: #efece5; color: #5b5a52; }
.block.done { background: #f2f0ea; color: #5f615b; }
.block.done strong { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.block.done .thumbs img { opacity: .75; }
.done-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid #9fb0a3; background: #fff; flex-shrink: 0; display: grid; place-items: center; padding: 0; color: transparent; margin-top: 1px; }
.done-btn svg { width: 13px; height: 13px; }
.done-btn.on { background: var(--sage); border-color: var(--sage); color: #fff; }
.block strong { font-size: 13px; }
.block .thumbs img { width: 38px; height: 38px; }
.block .thumbs .more { align-self: center; font-size: 10px; font-weight: 800; color: var(--ink-soft); }

/* S1 시작 화면 고르기 */
.start-grid { display: grid; gap: 10px; margin-top: 6px; }
.start-card { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; border: 0; border-radius: 18px; padding: 8px; text-align: left; background: var(--paper); box-shadow: var(--shadow-paper); }
.sc-art { position: relative; height: 92px; border-radius: 12px; overflow: hidden; display: block; }
.sc-art .mini-collage img { width: 54px; height: 54px; border-width: 3px; }
.sc-art .mini-timeline { padding: 12px; gap: 6px; }
.sc-art .mini-timeline i { height: 16px; }
.sc-art .badge-sample { font-size: 9px; }
.sc-copy strong { display: block; font-family: var(--serif); font-size: 17px; letter-spacing: -.4px; }
.sc-copy small { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
.mini-hub { position: absolute; inset: 0; background: linear-gradient(160deg, #f1ece2, #e5ece4); display: flex; align-items: center; justify-content: center; gap: 10px; }
.mini-hub i { width: 38px; height: 38px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--sage); box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.mini-hub i svg { width: 20px; height: 20px; }
#skipStart { margin-top: 12px; width: 100%; }

/* C 통합 홈 요약 */
.today-summary { margin-top: 12px; background: rgba(255, 255, 255, .7); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.today-summary strong { font-family: var(--serif); font-size: 16px; color: var(--ink); }

/* 내 책상·바인더 */
.desk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; min-height: 0; }
.binder-tile { border: 0; background: transparent; padding: 0; display: grid; place-items: center; }
.binder-tile.new { min-height: 150px; border: 1.5px dashed #c8bda9; border-radius: 14px; color: var(--ink-soft); font-size: 12px; font-weight: 800; gap: 4px; }
.binder-tile.new svg { width: 20px; height: 20px; }
.binder-cover.small { width: 118px; height: 152px; margin: 0; }
.binder-cover.small .label { top: 16px; left: 24px; right: 10px; font-size: 11.5px; padding: 6px; }
.binder-cover.small .cover-photo { left: 28px; right: 16px; bottom: 18px; height: 56px; }
.binder-cover.small .ring-strip { top: 18px; bottom: 18px; }
.seg { display: flex; gap: 4px; background: rgba(255, 255, 255, .55); border-radius: 12px; padding: 4px; margin: 4px 0 10px; }
.seg-btn { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px 4px; font-size: 12.5px; color: var(--ink-soft); }
.seg-btn.on { background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
/* 빈 날짜 칸: 은은한 종이 결(배경 장식, 데이터 없음) */
.cal-cell:not(.has-photo):not(.deco-color):not(.blank) { background-image: radial-gradient(rgba(150, 128, 96, .13) .8px, transparent 1px), linear-gradient(160deg, #faf6ee, #f3ede2); background-size: 7px 7px, 100% 100%; }
.cal-cell.blank { box-shadow: none; background: transparent; }
.binder-cover.small .label { font-size: 10.5px; letter-spacing: -.3px; word-break: keep-all; }

/* ───────── v0.3: 시각 수정 ───────── */
/* 안내 문구(버튼 아님) */
.plain-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sage); margin: -6px 2px 14px; font-weight: 700; }
.plain-note svg { width: 14px; height: 14px; }
.section-label { font-size: 11px; letter-spacing: 1.5px; font-weight: 800; color: #6a6455; margin: 14px 2px 8px; }

/* 선택·대표 상태: 테두리 색 + 글자 라벨 + 번호 */
.state-label { position: absolute; left: 5px; bottom: 5px; z-index: 3; font-size: 10px; font-weight: 800; color: #fff; background: rgba(34, 52, 40, .82); border-radius: 6px; padding: 2px 6px; }
.rep-label { background: var(--sage); }
.pick.selectable .select-ring { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .18); }
.pick .order-badge { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--sage); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.pick.rep { box-shadow: 0 0 0 3px var(--sage); }
.pick.tray-item .state-label { left: auto; right: 5px; bottom: 5px; }

/* A: 사진이 있는 칸은 작은 폴라로이드처럼 */
.cal-cell.has-photo { background: #fff; box-shadow: 0 1px 3px rgba(60, 45, 25, .18); }
.cal-cell.has-photo img { inset: 2px 2px 7px 2px; width: calc(100% - 4px); height: calc(100% - 9px); border-radius: 3px; }

/* A: 이번 달 사진 스크랩북 */
.shelf { margin-top: 14px; background: rgba(255, 255, 255, .55); border-radius: 18px; padding: 12px 12px 14px; }
.shelf-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; }
.shelf-head strong { font-family: var(--serif); font-size: 17px; }
.shelf-head small { font-size: 11px; color: var(--ink-faint); }
.shelf-row { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: none; }
.shelf-row::-webkit-scrollbar { display: none; }
.polaroid { flex: 0 0 92px; border: 0; background: #fff; padding: 6px 6px 22px; border-radius: 3px; box-shadow: 0 2px 6px rgba(40, 30, 20, .16), 0 8px 16px rgba(60, 45, 25, .1); transform: rotate(var(--tilt, 0deg)); position: relative; }
.polaroid img { width: 80px; height: 80px; object-fit: cover; display: block; border-radius: 1px; }
.polaroid .pc-cap { position: absolute; left: 0; right: 0; bottom: 4px; font-family: var(--serif); font-size: 11px; color: #5a5146; text-align: center; }
.polaroid.empty { background: rgba(255, 255, 255, .5); border: 1.5px dashed #c8bda9; box-shadow: none; transform: none; display: grid; place-items: center; color: var(--sage); }
.polaroid.empty .pc-plus { width: 80px; height: 80px; display: grid; place-items: center; }
.polaroid.empty .pc-plus svg { width: 26px; height: 26px; }
.polaroid.empty .pc-cap { color: var(--sage); font-family: var(--sans); font-weight: 800; }
.shelf-note { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin: 2px 2px 10px; }
.cta-row { display: flex; gap: 8px; }
.cta-row .btn { flex: 1; padding: 13px 10px; font-size: 13px; }
.date-chips .chip { min-width: 58px; justify-content: center; }
.date-chips .chip.is-today { border-color: var(--sage); color: var(--sage); }

/* B: 오늘 카드 — 지금·다음 일정·첫 일정 넣기 */
.tc-next { display: flex; align-items: center; gap: 10px; background: #f7f4ec; border-radius: 12px; padding: 8px; }
.tc-next img { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; outline: 2px solid var(--plan); outline-offset: -2px; box-shadow: var(--shadow-photo); flex-shrink: 0; }
.tc-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--plan-soft); color: var(--plan); display: grid; place-items: center; flex-shrink: 0; }
.tc-ic svg { width: 20px; height: 20px; }
.tc-next-copy { display: grid; gap: 2px; min-width: 0; }
.tc-next-copy strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-actions { display: flex; align-items: center; gap: 12px; }
.tc-actions .btn { padding: 11px 16px; font-size: 13px; }
.tc-actions .tc-progress { flex: 1; display: grid; gap: 4px; font-size: 10.5px; color: var(--ink-soft); }
.tc-progress i { display: block; height: 5px; border-radius: 5px; background: #e6e2d8; overflow: hidden; }
.tc-progress i b { display: block; height: 100%; background: var(--sage); }
.past-toggle { display: block; width: 100%; border: 1px dashed #d8ccb6; background: #fbf8f1; color: var(--ink-soft); border-radius: 10px; padding: 8px; font-size: 11.5px; margin: 0 0 8px; }
.hour-slot.hint { background: rgba(79, 107, 88, .1); border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(79, 107, 88, .35); }
.hour-slot.hint::after { content: "+ 여기를 눌러 일정 넣기"; top: 12px; }
.block { border-radius: 12px; }
.block.st-upcoming, .block.st-now { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(40, 50, 35, .1), inset 3px 0 0 var(--sage); }
.block.st-now { box-shadow: 0 2px 6px rgba(40, 50, 35, .1), inset 3px 0 0 var(--memory); }
.block.st-past:not(.done) { background: #efece5; color: #5b5a52; }
.block .thumbs img { width: 42px; height: 42px; border-radius: 8px; }
.st-chip { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; margin-left: 2px; vertical-align: 1px; }
/* 짧은 일정(45분 이하): 완료·제목·시간을 한 줄로. 폭이 좁으면 상태 칩을 뺀다(누르면 상세 시트) */
.block { container-type: inline-size; }
.block.compact { align-items: center; padding: 2px 8px 2px 5px; gap: 6px; }
.block.compact .done-btn { width: 20px; height: 20px; margin-top: 0; }
.block.compact .b-main { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
.block.compact strong { flex: 0 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; }
.block.compact small { flex: 0 0 auto; }
.block .photo-count { flex-shrink: 0; align-self: center; font-size: 10px; font-weight: 800; color: var(--ink-soft); background: var(--memory-soft); border-radius: 6px; padding: 1px 5px; }
@container (max-width: 230px) { .block.compact .st-chip { display: none; } }
@container (max-width: 170px) { .block.compact .photo-count { display: none; } }
/* 나란히 놓인 좁은 카드: 제목을 우선, 시간은 누르면 보이는 상세 시트로 */
@container (max-width: 150px) { .block.compact small { display: none; } }
.block.tiny { align-items: center; padding: 0 6px; }
.block.tiny .done-btn, .block.tiny small { display: none; }
.block.tiny strong { font-size: 10px; line-height: 1; }
.st-chip.upcoming { background: var(--plan-soft); color: #3b5a80; }
.st-chip.now { background: var(--memory-soft); color: #8f4a20; }
.st-chip.done { background: var(--sage-soft); color: var(--sage); }
.st-chip.past { background: #ebe7de; color: #57554e; }
.hour-chips .chip.suggest { border-color: var(--sage); color: var(--sage); box-shadow: 0 0 0 1px var(--sage) inset; }
.hour-chips .chip.suggest small { font-size: 10px; font-weight: 800; }
.hour-chips .chip.past-hour { opacity: .6; }

/* C: 새로 기록하기 2열 + 오늘 기록 보기 */
.purpose.two-col { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; }
.purpose.two-col .purpose-card .art { height: 96px; }
.purpose.two-col .purpose-card .copy { padding: 10px 12px 12px; }
.purpose.two-col .purpose-card strong { font-size: 17px; }
.purpose.two-col .mini-collage img { width: 54px; height: 54px; border-width: 3px; }
.purpose.two-col .mini-timeline { padding: 14px 12px; gap: 6px; }
.purpose.two-col .mini-timeline i { height: 16px; }
.purpose.two-col .go svg { width: 16px; height: 16px; }
.today-summary { margin-top: 0; background: var(--paper); box-shadow: var(--shadow-paper); }
.ts-thumbs { display: flex; gap: 6px; align-items: center; }
.ts-thumbs img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; box-shadow: var(--shadow-photo); }
.ts-thumbs .more { font-size: 11px; font-weight: 800; color: var(--ink-soft); }

/* 사용자 테스트 모드: 검토 도구 숨김 */
body.test-mode .topbar, body.test-mode .panel, body.test-mode .test-notice, body.test-mode .stage-caption { display: none; }
body.test-mode .workspace { display: flex; justify-content: center; padding-top: 24px; }
/* 테스터가 휴대폰으로 열 때: 시안 틀(노치·가짜 상태바) 없이 화면 전체를 쓴다 — 하단 탭이 첫 화면에 보이고 바깥 스크롤이 없게 */
@media (max-width: 430px) {
  body.test-mode { overflow: hidden; }
  body.test-mode .phone { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  body.test-mode .phone::before, body.test-mode .statusbar { display: none; }
  body.test-mode .screen-host { top: 0; }
}

/* v0.4 — 예시와 내 기록 구분, 지난 일정 사진 입구, 시각 표시, 작은 글자 대비 */
.cal-cell.is-sample img { filter: grayscale(.55) saturate(.7); opacity: .5; }
.cal-cell.is-sample { outline: 1.5px dashed #b9ab92; outline-offset: -2px; }
.cal-cell.is-sample .d { color: #3f382e; text-shadow: none; }
.cal-cell.is-sample::after { font-size: 9px; background: rgba(70, 60, 45, .78); padding: 1px 4px; }
.sample-banner { display: grid; gap: 2px; background: var(--sample-soft); border: 1px dashed #c9bba3; border-radius: 12px; padding: 9px 12px; margin: 0 0 12px; font-size: 12px; color: #4f473b; line-height: 1.5; }
.sample-banner strong { font-size: 13.5px; color: var(--ink); }
.tc-now { font-size: 11px; }
.past-photos { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; border: 1px solid #e3cdbd; background: var(--memory-soft); color: #8a4a26; border-radius: 10px; padding: 9px; font-size: 12.5px; font-weight: 800; margin: 0 0 8px; min-height: 40px; }
.past-photos svg { width: 15px; height: 15px; }
.past-list { display: grid; gap: 8px; }
.past-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; border: 1px solid var(--chrome-line); background: #fff; border-radius: 12px; padding: 10px 12px; min-height: 48px; }
.past-item .pi-time { grid-row: span 2; align-self: center; font-size: 12px; font-weight: 800; color: #8f4a20; }
.past-item small { font-size: 11.5px; color: var(--ink-soft); }