/* digital_binder — 첫 실행 프로토타입. 층: desk(책상) → paper(종이) → photo/sticker → chrome(조작). */
:root {
  --desk: #efe8dc;
  --desk-deep: #e4dccd;
  --paper: #fffdf8;
  --paper-line: #ece4d6;
  --ink: #2b2f2c;
  --ink-soft: #5c625d;
  --ink-faint: #9a9d97;
  --chrome: #fbfaf7;
  --chrome-line: #e6e2da;
  --sage: #4f6b58;
  --sage-soft: #e3ebe4;
  --tan: #b4875e;
  --plan: #4d6f96;
  --plan-soft: #e6edf5;
  --memory: #b8693c;
  --memory-soft: #f7e9df;
  --sample: #8a7f6e;
  --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: var(--plan); background: var(--plan-soft); }
.tag-memory { color: var(--memory); 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: #a89377; }

/* 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: #c0786a; }
.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: 44px; 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: var(--memory); 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; opacity: .75; }
.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; }
}