:root{--page:#f6f3ed;--surface:#fffefa;--ink:#253536;--muted:#586764;--accent:#49685d;--line:#cccfc8;--error:#8c3434;color-scheme:light;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;color:var(--ink);background:var(--page);font-size:16px;line-height:1.7}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{min-height:48px;min-width:48px;cursor:pointer;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:9px 15px;line-height:1.4;transition:background .16s,border-color .16s}button:hover{background:#eeeee6;border-color:var(--accent)}button:disabled{opacity:.48;cursor:default}button.primary{background:var(--accent);color:white;border-color:var(--accent)}button.primary:hover{background:#3b564b}button.text-button{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:5px}button[aria-pressed=true],button[aria-current=step]{border-color:var(--accent);background:#e6ece6;box-shadow:inset 0 -3px var(--accent)}button.brand{display:flex;align-items:center;gap:13px;background:none;border:0;padding:0;text-align:left;font-weight:650;letter-spacing:.03em}button.brand small{display:block;font-size:10px;letter-spacing:.18em;margin-top:3px;font-weight:500;color:var(--muted)}.brand-seal{display:grid;place-items:center;border:1px solid #87948c;width:40px;height:44px;font-family:Batang,serif;font-weight:400;font-size:25px;border-radius:40% 40% 43% 43%}.site-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4vw;border-bottom:1px solid var(--line);background:var(--page)}.site-header nav{display:flex;gap:8px}.site-header nav button{border:0;background:transparent;font-size:14px}h1,h2,h3,p,figure{margin:0}p+p{margin-top:16px}h1,h2{font-family:Batang,"AppleMyungjo","Noto Serif KR",serif;font-weight:400;word-break:keep-all}h1{font-size:40px;line-height:1.45}h2{font-size:26px;line-height:1.5}h3{font-size:17px;font-weight:600}a{color:var(--accent)}.eyebrow{font-size:13px;letter-spacing:.14em;color:var(--muted);margin-bottom:18px}.micro{font-size:13px;color:var(--muted);line-height:1.65}.muted{color:var(--muted)}.error,.danger{color:var(--error)}.button-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.loading{padding:10vh;text-align:center}.site-footer{display:flex;justify-content:space-between;gap:20px;margin:0 4vw;padding:27px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.skip-link{position:absolute;left:12px;top:-100px;background:white;z-index:50;padding:14px}.skip-link:focus{top:10px}:focus-visible{outline:3px solid #5b7f70;outline-offset:4px}main:focus{outline:0}
.hero{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:7%;padding:64px 5vw 58px}.hero-copy h1{font-size:clamp(42px,4.6vw,68px);white-space:pre-line;line-height:1.35;letter-spacing:-.04em}.hero-lead{margin-top:28px;white-space:pre-line;font-size:20px;line-height:1.85}.hero-note{font-size:15px;color:var(--muted);max-width:410px;margin-top:20px}.hero-figure{align-self:stretch;display:flex;flex-direction:column;justify-content:center}.hero-figure img{width:100%;height:auto;max-height:580px;object-fit:contain;mix-blend-mode:multiply}.hero-figure figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:20px;letter-spacing:.05em}.storage-choice{border:0;border-top:1px solid var(--line);padding:19px 0 0;margin:27px 0 21px;max-width:430px}.storage-choice legend{font-size:13px;color:var(--muted);padding-right:14px}.storage-choice label{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px;cursor:pointer}input[type=radio],input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px}.hero-actions .primary{padding-inline:22px}.intro-line{max-width:1080px;margin:auto;padding:36px 5vw 65px;border-top:1px solid var(--line)}.intro-line h2{font-size:23px;margin-bottom:15px}.intro-line p{max-width:720px}
.studio{padding-bottom:30px}.studio-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 3vw}.save-state{font-size:14px;display:inline-block;margin-right:14px}.save-state:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}.save-state.error:before{background:var(--error)}.scene-nav{display:flex;justify-content:center;border-block:1px solid var(--line);padding:8px 2vw;gap:6px;overflow-x:auto}.scene-nav button{flex:1;max-width:160px;white-space:nowrap;font-size:14px;min-height:44px;border-color:transparent;background:transparent;border-radius:0}.workspace{display:grid;grid-template-columns:248px minmax(0,1fr) 300px;max-width:1800px;margin:0 auto;align-items:start}.palette-panel,.story-panel{padding:26px 20px;min-width:0}.palette-panel{border-right:1px solid var(--line)}.story-panel{border-left:1px solid var(--line)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:9px}.panel-heading h2{font-family:inherit;font-size:17px;font-weight:600}.panel-intro{font-size:14px;line-height:1.7;color:var(--muted);margin:9px 0 20px}.palette-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px}.palette-tabs button{display:flex;align-items:center;gap:7px;font-size:13px;padding:8px;min-height:44px}.swatch{width:14px;height:14px;border-radius:50%;border:1px solid #0002;flex-shrink:0}.piece-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:16px}.piece-choice{display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#fffefa;padding:5px;min-width:0;min-height:84px;font-size:11px}.piece-choice img{width:100%;height:52px;object-fit:contain;pointer-events:none}.piece-choice span{overflow-wrap:anywhere}.piece-choice[aria-busy=true]{opacity:.5}.stage-area{min-width:0;padding:18px clamp(12px,2vw,32px) 24px}.view-toolbar{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:16px}.view-toolbar button{font-size:13px;padding:8px 11px;min-height:44px}.view-toolbar button:first-child,.view-toolbar button:nth-child(3){font-size:20px}.pause-button{margin-left:auto}.stage-shell{overflow:auto;max-height:72dvh;min-height:240px;padding:8px 8px 18px;scrollbar-gutter:stable}.paper{width:100%;max-width:640px;margin:0 auto;aspect-ratio:8/9;flex-shrink:0;box-shadow:0 3px 19px #2535360b}.art{width:100%;height:auto;display:block;touch-action:none;overflow:hidden;background:white}.art [data-id]{cursor:grab}.art [data-handle]{cursor:crosshair}.canvas-hint{text-align:center;font-size:13px;color:var(--muted);margin:9px 0 17px}.art-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-bottom:22px}.art-toolbar button{font-size:13px;padding:9px 11px}.controls-panel{border-top:1px solid var(--line);padding-top:18px}.controls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:12px 0}.controls-grid button{padding:8px 4px;font-size:14px}.controls-panel details{margin-top:16px}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:12px}.coordinates label{font-size:13px}.coordinates input{width:100%;padding:10px;background:var(--surface);border:1px solid var(--line);margin-top:6px}.layer-list{margin:24px 0 12px;border-top:1px solid var(--line);padding-top:15px}.layer-list summary{font-size:13px;cursor:pointer;min-height:44px}.layer-list ol{list-style:none;padding:0;max-height:280px;overflow-y:auto}.layer-list button{width:100%;font-size:13px;text-align:left;margin-bottom:6px;overflow-wrap:anywhere}.story-panel .eyebrow{margin-bottom:10px}.story-panel h2{font-size:23px}.short-essay{font-size:15px;line-height:1.9;margin-top:19px}.essay,.daily-note{font-size:14px;margin:13px 0 0}.essay summary,.daily-note summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--accent);text-decoration:underline;text-underline-offset:4px}.essay p{line-height:1.95;margin:12px 0}.daily-note p{font-size:12px}.focus-question{font-family:Batang,serif;font-size:21px;font-weight:400;line-height:1.7;margin:27px 0 12px}.record-field{display:block;margin:22px 0}.record-field>span{display:block;font-size:14px;margin-bottom:8px}.record-field input,.record-field textarea{display:block;width:100%;border:1px solid #aeb9af;background:var(--surface);border-radius:3px;min-height:48px;padding:11px;font-size:16px;color:var(--ink);line-height:1.7;resize:vertical;scroll-margin-block:90px}.record-field textarea{min-height:110px}.record-field input::placeholder,.record-field textarea::placeholder{color:#66726b;font-size:14px}.length-count{font-size:12px;display:block;text-align:right;color:var(--muted);margin-top:5px}.length-count.error{color:var(--error)}.next-copy{font-size:13px;color:var(--muted);margin-top:24px;border-top:1px solid var(--line);padding-top:18px}.scene-actions{display:flex;gap:8px;margin-top:20px}.scene-actions button{flex:1;font-size:14px}.story-panel>.text-button{font-size:13px;margin-top:8px}.mobile-tabs{display:none}.paused .palette-panel,.paused .controls-panel{visibility:hidden}.paused .art{touch-action:pan-y}.paused .selection{display:none}.paused .stage-area{background:#efeee7}.storage-warning{margin:8px 3vw 18px;padding:18px;border:1px solid #b78875;background:#f6e9df}.storage-warning p{margin-bottom:12px}.storage-warning button{margin:4px;font-size:14px}.storage-warning[hidden]{display:none}
.page-heading{padding-bottom:30px;margin-bottom:20px;border-bottom:1px solid var(--line)}.page-heading .eyebrow{margin-bottom:10px}.page-heading>p:last-child{margin-top:15px}.reading-page,.projects-page,.result-page{max-width:1180px;margin:0 auto;padding:45px 5vw 70px}.reading-page{max-width:850px}.reading-page h2{font-size:23px;margin:30px 0 12px}.reading-page p{line-height:1.95}.reading-page table{width:100%;border-collapse:collapse;margin:30px 0;font-size:14px}.reading-page td,.reading-page th{padding:14px 8px;border-bottom:1px solid var(--line);text-align:left}.reading-page th{font-weight:500}.reading-page td:first-child{white-space:nowrap}.project-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}.project-card{border-block:1px solid var(--line);padding:25px 0}.project-card h2{font-size:24px;overflow-wrap:anywhere}.project-card .micro{margin:10px 0 20px}.project-card button{margin-right:7px;font-size:14px}.empty-state{padding:45px 0;color:var(--muted)}.result-layout{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:start}.result-layout>.comparison-scene{position:sticky;top:20px}.result-layout section h2{font-size:30px;margin-bottom:25px}.result-layout section p{font-size:15px;line-height:1.9}.starting-words{padding:18px 0 0;margin:25px 0 0;border-top:1px solid var(--line)}.starting-words h3{font-size:13px;color:var(--muted);font-weight:400}.starting-words p{margin-top:7px;white-space:pre-wrap}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0 18px}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}.comparison-scene{margin:0;min-width:0}.comparison-scene svg{display:block;width:100%;height:auto;border:1px solid var(--line)}.comparison-scene figcaption{margin:10px 0;text-align:center;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.comparison-scene button{width:100%;font-size:14px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#253536;color:white;padding:14px 22px;max-width:min(600px,90vw);width:max-content;border-radius:6px;z-index:100;opacity:0;pointer-events:none;font-size:14px;box-shadow:0 4px 20px #0002}.toast.visible{opacity:1}dialog{width:min(900px,94vw);max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--page);padding:26px;color:var(--ink)}dialog::backdrop{background:#15232099}.dialog-top{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}.dialog-top h2{font-size:25px}.dialog-top button{font-size:14px;flex-shrink:0}.dialog-top~div p{white-space:pre-wrap;overflow-wrap:anywhere}.check-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 0}.check-row+b,dialog .primary{margin-top:18px}#print-root{display:none}
@media(min-width:768px) and (max-width:1199px){.workspace{grid-template-columns:228px minmax(0,1fr)}.story-panel{grid-column:2;border-left:0;border-top:1px solid var(--line);padding:25px 30px}.story-panel .record-field{max-width:650px}.stage-shell{max-height:65dvh}.hero{gap:3%;padding-top:42px}.storage-context{display:none}}
@media(max-width:767px){.site-header{padding:15px 17px;gap:8px}.brand{font-size:14px!important;gap:8px!important}.brand-seal{width:30px;height:36px;font-size:22px}.site-header nav{gap:0}.site-header nav button{padding:8px;font-size:12px}.desktop-label{display:none}.brand small{font-size:8px!important}.site-footer{display:block;font-size:11px;padding-bottom:95px}.site-footer span{display:block;margin-bottom:7px}.hero{padding:32px 23px 35px;display:flex;flex-direction:column;gap:20px}.hero-copy{width:100%;position:relative}.hero-copy h1{font-size:41px;line-height:1.4}.hero-copy .eyebrow{margin-bottom:12px}.hero-lead{font-size:17px;margin-top:20px}.hero-note{font-size:14px;max-width:100%}.hero-figure{align-self:center;width:70%;order:2}.hero-figure img{max-height:300px}.hero-figure figcaption{font-size:12px;margin-top:8px}.hero-actions{gap:8px}.hero-actions button{font-size:14px;padding:10px 13px}.storage-choice{margin-top:22px}.hero-note{margin-top:14px}.intro-line{padding:28px 23px 40px}.intro-line h2{font-size:21px}.intro-line p{font-size:15px}.studio-bar{padding:12px 15px;gap:8px;align-items:flex-start}.studio-bar>div:first-child{max-width:40%}.studio-bar .button-row{justify-content:flex-end;gap:5px;flex:1}.studio-bar button{font-size:12px;padding:9px;min-height:44px}.storage-context{display:none}.save-state{font-size:11px;margin-right:0;line-height:1.7}.scene-nav{justify-content:flex-start;padding:5px 10px;gap:4px}.scene-nav button{font-size:12px;min-width:65px;flex:0 0 auto;padding:8px}.workspace{display:flex;flex-direction:column}.stage-area{width:100%;padding:12px 10px 8px;order:0}.view-toolbar{gap:4px;margin-bottom:8px}.view-toolbar button{min-width:39px;font-size:11px;padding:8px;min-height:44px}.view-toolbar button:first-child,.view-toolbar button:nth-child(3){font-size:18px}.pause-button{margin-left:0}.stage-shell{max-height:51dvh;min-height:0;padding:4px 0 8px}.paper{max-width:420px}.canvas-hint{font-size:11px;margin:6px 0 10px}.art-toolbar{gap:5px;margin-bottom:8px;justify-content:flex-start}.art-toolbar button{font-size:11px;padding:7px;min-height:44px;flex:1;white-space:nowrap}.art-toolbar button:nth-child(4){flex-basis:45%}.art-toolbar button:nth-child(5){flex-basis:45%}.palette-panel,.story-panel{order:1;width:100%;border:0;border-top:1px solid var(--line);padding:20px 18px 30px;display:none}.controls-panel{display:none;padding:20px 8px 25px}.palette-panel.mobile-active,.story-panel.mobile-active,.controls-panel.mobile-active{display:block}.paused .palette-panel,.paused .controls-panel{display:none}.palette-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.palette-tabs button{font-size:12px;min-height:48px;padding:7px}.piece-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.piece-choice{min-height:95px}.piece-choice img{height:65px}.piece-choice span{font-size:12px}.panel-intro{font-size:14px;margin-bottom:15px}.controls-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.controls-grid button{min-height:48px}.short-essay{font-size:16px}.story-panel h2{font-size:25px}.essay{font-size:16px}.mobile-tabs{display:flex;position:sticky;bottom:0;order:5;z-index:10;width:100%;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--page);border-top:1px solid var(--line);gap:6px}.mobile-tabs button{flex:1;font-size:14px;min-height:48px}.studio{padding-bottom:0}.paused .stage-area{min-height:65dvh}.reading-page,.projects-page,.result-page{padding:30px 22px 50px}.page-heading h1{font-size:29px}.page-heading .eyebrow{font-size:11px}.reading-page td,.reading-page th{font-size:12px;padding:11px 5px}.project-list{grid-template-columns:1fr;gap:4px}.project-card h2{font-size:23px}.result-layout{grid-template-columns:1fr;gap:30px}.result-layout>.comparison-scene{position:static;max-width:420px;margin:auto;width:100%}.result-layout section h2{font-size:27px}.result-actions button{font-size:13px;padding:9px}.comparison-grid{gap:14px}.comparison-scene button{font-size:12px;padding:8px}.toast{bottom:85px;max-width:92vw;font-size:13px;padding:12px 16px}dialog{padding:18px}.dialog-top{gap:8px;position:sticky;top:-18px;background:var(--page);z-index:2;padding-top:10px}.dialog-top h2{font-size:21px}.dialog-top button{font-size:12px;min-width:65px}.storage-warning{font-size:14px}.storage-warning button{font-size:12px}.story-panel>.text-button{min-height:48px}}
@media(max-width:380px){.site-header nav button{font-size:11px;padding:6px}.brand-seal{display:none}.art-toolbar button{font-size:10px}.palette-tabs button{gap:4px}.swatch{width:11px;height:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{@page{size:A4;margin:18mm}body{background:white;color:#172724}body>*{display:none!important}body.printing #print-root{display:block!important;font-family:system-ui,"Malgun Gothic",sans-serif;font-size:11pt;line-height:1.8}#print-root h1{font-size:24pt;margin:10mm 0}#print-root h2{font-size:17pt;margin:9mm 0 3mm;break-after:avoid}#print-root h3{font-size:12pt;margin:5mm 0 2mm;break-after:avoid}#print-root p{white-space:pre-wrap;overflow-wrap:anywhere;orphans:3;widows:3}#print-root .print-art{display:block;width:135mm;max-width:100%;margin:5mm auto;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}}

.artwork-credit{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted);text-underline-offset:4px}

/* Task-focused controls and optional reflection, v0.2 */
.hero{grid-template-rows:auto auto;column-gap:7%;row-gap:0;align-items:start}.hero-copy{grid-column:1;grid-row:1;align-self:end}.hero-start{grid-column:1;grid-row:2;align-self:start}.hero-copy h1{font-size:clamp(42px,4.6vw,68px);white-space:pre-line;line-height:1.35;letter-spacing:-.04em}.hero-figure{grid-column:2;grid-row:1 / 3;align-self:center}.hero-start .storage-choice{margin-top:26px}.hero-note{max-width:440px}.control-tabs{display:flex;gap:8px;margin-top:16px}.control-tabs button{flex:1;min-height:48px;font-size:16px}.controls-grid:has(>button:nth-child(2):last-child){grid-template-columns:1fr 1fr}.controls-grid button{min-height:52px;font-size:16px}.piece-note-button{width:100%;text-align:left;margin-top:6px;color:var(--accent)}.controls-panel summary,.more-records summary{display:flex;align-items:center;min-height:48px;cursor:pointer;color:var(--accent);font-size:14px;text-decoration:underline;text-underline-offset:4px}.controls-panel summary::before,.more-records summary::before{content:'＋';margin-right:8px}details[open]>summary::before{content:'−'}.more-records{border-block:1px solid var(--line);margin-top:20px}.record-field>span{font-size:16px}.record-field .length-count{visibility:hidden}.record-field:focus-within .length-count,.record-field .length-count.error,.record-field .length-count.near-limit{visibility:visible}.first-piece-hint{background:#e6ece6;border-radius:5px;padding:14px 18px;font-size:14px;margin:12px 0 20px}.first-piece-hint[hidden]{display:none}.paused .scene-nav,.paused .palette-panel,.paused .story-panel,.paused .art-toolbar,.paused .controls-panel,.paused .canvas-hint{display:none}.paused .workspace{display:block;max-width:1000px}.paused .stage-area{min-height:0;background:transparent}.paused .stage-shell{max-height:76dvh}.paused .view-toolbar{margin-bottom:20px}.paused .studio-bar .button-row{display:none}.daily-return{border-block:1px solid var(--line);margin-top:28px;padding:20px 0}.daily-return h4{font-size:14px;font-weight:500;color:var(--muted);margin:20px 0 6px}.daily-return p{white-space:pre-wrap}.project-card>.comparison-scene{max-width:200px;margin:0 auto 20px}.project-card>.comparison-scene figcaption{display:none}.save-options{display:grid;gap:22px}.save-options button{width:100%}.save-options p{margin-top:8px}.site-home-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;padding:6px 8px;text-decoration:none}.palette-tabs button,.view-toolbar button,.art-toolbar button,.piece-choice,.layer-list summary,.layer-list button,.story-panel>.text-button{font-size:14px}.daily-note p{font-size:14px}
@media(max-width:767px){.hero{display:grid;grid-template-columns:minmax(0,1fr) 128px;padding:28px 20px 36px;gap:18px 14px;align-items:center}.hero-copy{grid-column:1;grid-row:1;align-self:center}.hero-copy h1{font-size:clamp(30px,8.5vw,42px);line-height:1.4}.hero-copy .eyebrow{font-size:12px;letter-spacing:.04em}.hero-lead{font-size:16px;margin-top:16px;white-space:normal}.hero-note{grid-column:1 / -1;font-size:14px}.hero-figure{grid-column:2;grid-row:1;order:initial;width:100%;align-self:center}.hero-figure img{max-height:230px}.hero-figure figcaption>span,.hero-figure figcaption>br{display:none}.hero-figure figcaption{margin-top:6px;letter-spacing:0}.artwork-credit{font-size:12px;line-height:1.6}.hero-start{grid-column:1 / -1;grid-row:2;width:100%}.hero-start .storage-choice{margin:4px 0 18px;max-width:none}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions button{font-size:15px;min-height:50px}.site-header{flex-wrap:wrap;padding:12px 16px}.site-header nav{margin-left:auto}.site-header nav button,.site-home-link{font-size:14px;padding:8px}.site-header nav .desktop-label{display:none}.studio-bar>div:first-child{max-width:50%}.save-state{font-size:14px}.studio-bar button{font-size:14px}.scene-nav button{font-size:14px;min-height:48px}.view-toolbar{display:grid;grid-template-columns:48px 1fr 48px;gap:6px}.view-toolbar button{min-width:48px;min-height:48px;font-size:14px;padding:8px}.view-toolbar button:nth-child(4){grid-column:1 / 2}.view-toolbar button:nth-child(5){grid-column:2 / 4}.art-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.art-toolbar button{font-size:14px;min-height:48px;white-space:normal;padding:8px 4px}.canvas-hint{font-size:14px}.palette-tabs button{font-size:14px}.palette-tabs .swatch{width:12px;height:12px}.piece-choice span{font-size:14px}.mobile-tabs{position:fixed;bottom:0;left:0;right:0}.studio{padding-bottom:calc(86px + env(safe-area-inset-bottom))}.controls-panel{scroll-margin-top:16px}.controls-grid button{font-size:16px;min-height:56px}.paused .stage-shell{max-height:66dvh}.paused .stage-area{min-height:65dvh}.daily-note p,.next-copy,.story-panel>.text-button,.comparison-scene button,.result-actions button{font-size:14px}.story-panel .micro{font-size:14px}.toast{bottom:calc(86px + env(safe-area-inset-bottom))}}
@media(max-width:380px){.hero{grid-template-columns:minmax(0,1fr) 110px;padding-inline:16px}.hero-copy h1{font-size:30px}.hero-figure img{max-height:200px}.hero-lead{font-size:15px}.hero-actions button{font-size:14px}.palette-tabs button{font-size:14px;gap:4px}.palette-tabs .swatch{display:none}.site-header nav button{font-size:14px}.site-header .brand{font-size:14px!important}}

/* Moonjar mobile awareness UX: guided arrival, reflection and live composition feedback */
.scene-lead,.look-prompt,.control-live-preview{display:none}
.scene-lead[hidden]{display:none!important}
.paused .scene-lead{display:none!important}
.paused .look-prompt{display:block;max-width:700px;margin:0 auto 20px;padding:18px 22px;border-inline-start:3px solid var(--accent);background:#eeeee7}
.look-prompt .eyebrow{margin-bottom:7px}
.look-prompt h2{font-size:clamp(21px,2.3vw,28px);line-height:1.5;word-break:keep-all}
.look-prompt .micro{margin-top:12px}
.look-prompt .text-button{margin-top:12px}
@media(max-width:767px){
  .scene-lead:not([hidden]){display:block;max-width:620px;margin:0 auto 15px;padding:18px 19px;background:#eeeee7;border-inline-start:3px solid var(--accent);scroll-margin-top:15px}
  .scene-lead .eyebrow{margin-bottom:7px}
  .scene-lead h2{font-size:23px;line-height:1.5;word-break:keep-all}
  .scene-lead .lead-essay{font-size:15px;line-height:1.8;margin-top:12px;word-break:keep-all}
  .scene-lead .lead-question{font-family:Batang,"AppleMyungjo","Noto Serif KR",serif;font-size:19px;line-height:1.6;margin:15px 0 10px}
  .scene-lead .text-button{min-height:44px;font-size:14px}
  .scene-lead .micro{font-size:12px;margin-top:6px}
  .control-live-preview{display:flex;align-items:center;gap:15px;position:sticky;top:0;z-index:6;background:var(--page);border-block:1px solid var(--line);padding:9px 8px;margin:0 0 18px;box-shadow:0 8px 14px #2535360a}
  .control-live-preview svg{width:clamp(112px,36vw,158px);max-height:178px;flex:none;aspect-ratio:8/9;pointer-events:none;background:#fff}
  .control-live-preview figcaption{font-size:14px;line-height:1.6;color:var(--muted);word-break:keep-all}
  .paused .look-prompt{padding:16px 18px;margin-bottom:15px}
  .paused .look-prompt h2{font-size:22px}
}

/* Reflection panel: do not repeat the same introduction below the mobile artwork */
.mobile-record-title{display:none}
@media(max-width:767px){
  .studio.mode-guided .story-panel > .eyebrow,
  .studio.mode-guided .story-panel > h2,
  .studio.mode-guided .story-panel > .short-essay{display:none}
  .studio.mode-guided .story-panel > .mobile-record-title{display:block;font-weight:600;font-size:16px;margin:0 0 13px;color:var(--accent)}
  .studio.mode-guided .story-panel > .focus-question{font-size:21px;margin:10px 0 12px}
}


/* WAVE 2 · a calmer making space, with an optional artwork postcard */
.scene-lead .lead-toggle{display:none}
@media(max-width:767px){
  .scene-lead .lead-toggle{display:inline-flex;align-items:center;justify-content:center;font-size:14px;min-height:44px;margin-top:11px;padding:7px 14px;border:1px solid #93a49b;color:var(--accent);background:transparent}
  .scene-lead.is-collapsed{padding:10px 16px 12px;margin-bottom:12px;border-inline-start-width:2px}
  .scene-lead.is-collapsed .eyebrow{margin-bottom:3px}
  .scene-lead.is-collapsed h2{font-size:18px;line-height:1.4}
  .scene-lead.is-collapsed .lead-essay,.scene-lead.is-collapsed .lead-question,
  .scene-lead.is-collapsed .text-button,.scene-lead.is-collapsed .micro{display:none}
  .scene-lead.is-collapsed .lead-toggle{margin-top:7px}
}
.card-modal>.card-privacy{font-size:14px;line-height:1.8;padding:11px 14px;background:#eef1ea;border-left:3px solid var(--accent);margin-bottom:20px}
.card-modal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);gap:30px;align-items:start}
.card-preview{margin:0;padding:18px;background:#eae7df;border:1px solid #d7d9d0;min-width:0}
.card-preview img{width:100%;max-width:380px;height:auto;aspect-ratio:2/3;object-fit:contain;display:block;margin:0 auto;background:#f6f3ed;border:1px solid #d4d9d1;box-shadow:0 10px 28px #25353614}
.card-preview figcaption{font-size:12px;text-align:center;color:var(--muted);margin:11px 0 5px}
.card-preview p{font-size:12px;text-align:center;min-height:20px}
.card-form{min-width:0}
.card-form .check-row{font-size:15px;font-weight:600;margin:0;padding:14px 0 10px;border-top:1px solid var(--line)}
.card-form .card-field{display:block;margin:0 0 21px;font-size:14px}
.card-form .card-field[hidden]{display:none!important}
.card-field span{display:block;margin-bottom:6px;color:var(--muted)}
.card-field input,.card-field textarea{display:block;width:100%;max-width:100%;min-height:50px;padding:12px;border:1px solid #aeb9af;border-radius:4px;background:var(--surface);color:var(--ink);font-size:16px;line-height:1.6;resize:vertical}
.card-controls{border-top:1px solid var(--line);padding-top:18px;margin:22px 0 0 auto;max-width:430px}
.card-controls .primary{width:100%;font-size:16px;min-height:52px}
.card-controls .micro{margin-top:10px;font-size:13px}
.result-layout>.comparison-scene{padding:clamp(12px,2.2vw,28px);background:#fffefa;border:1px solid #d8dad1;box-shadow:0 14px 45px #2535360d}
.result-layout>.comparison-scene svg{border-color:#dee1d9}
.result-actions button:first-child{grid-column:1 / -1}
.result-actions [data-action="card-options"]{border-color:#637f71;background:#ecf1eb;font-weight:600}
.result-actions [data-action="card-options"]:hover{background:#dee9df}
@media(max-width:767px){
  .card-modal-grid{display:flex;flex-direction:column;gap:18px}
  .card-modal-grid .card-form{order:0;width:100%}
  .card-modal-grid .card-preview{order:1;width:100%;padding:14px}
  .card-controls{max-width:none;margin:16px 0 0}
  .card-preview img{max-width:290px}
  .card-modal>.card-privacy{font-size:14px;margin-bottom:16px}
  .result-layout>.comparison-scene{padding:12px 14px}
  .result-actions{grid-template-columns:1fr 1fr;gap:8px}
  .result-actions button{font-size:14px;min-height:48px}
}
@media(prefers-reduced-motion:reduce){.card-preview img{transition:none}}


/* Moonjar WAVE 3 · fully original SVG hero art, not a museum object photograph. */
.hero-figure img{display:block;width:100%;height:auto;max-height:610px;mix-blend-mode:normal}
.hero-figure figcaption .artwork-credit{display:block;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-top:4px;text-decoration:none;font-weight:400}
@media(max-width:767px){
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:26px 22px 35px}
  .hero-copy{width:100%;align-self:stretch;order:0}
  .hero-copy h1{font-size:clamp(37px,9.1vw,52px);line-height:1.25}
  .hero-copy .eyebrow{letter-spacing:.12em}
  .hero-lead{font-size:17px;line-height:1.65;margin-top:12px}
  .hero-note{font-size:13px;line-height:1.7;margin-top:8px}
  .hero-figure{width:min(74vw,290px);align-self:center;order:1;margin:0 auto}
  .hero-figure img{max-height:315px}
  .hero-figure figcaption{margin:0 0 7px}
  .hero-figure figcaption .artwork-credit{font-size:11px;margin-top:1px}
  .hero-start{order:2;width:100%;margin-top:4px}
  .hero-start .storage-choice{margin:2px 0 14px}
  .hero-actions{gap:8px}
  .hero-actions button{min-height:50px}
}
@media(max-width:380px){
  .hero{padding-inline:17px}
  .hero-figure{width:min(73vw,260px)}
  .hero-figure img{max-height:280px}
}


/* WAVE 4: artwork-first floating mobile editor, not a detached miniature.
   The complete SVG paper stays visible above a compact accessible control tray. */
.control-drawer-top{display:none}
.card-copy-limit{font-size:13px;line-height:1.65;color:var(--muted);margin-top:10px}
.card-preview img{box-shadow:0 20px 42px #24393025}
.card-preview figcaption{letter-spacing:.035em}
@media(max-width:767px){
  .studio.controls-active .stage-shell{
    max-height:calc(100dvh - min(36dvh,316px) - 112px);
    scroll-margin-top:10px;
  }
  #controls-panel.mobile-active{
    display:block;
    position:fixed;
    bottom:calc(72px + env(safe-area-inset-bottom));
    left:0;
    right:0;
    z-index:18;
    width:100%;
    max-height:min(36dvh,316px);
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#FFFEFA;
    padding:12px 18px 10px;
    border:1px solid #CBD3CB;
    border-bottom:0;
    border-radius:18px 18px 0 0;
    box-shadow:0 -15px 38px #25353625;
  }
  #controls-panel.mobile-active .control-drawer-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin:0 0 8px;
    border-bottom:1px solid #E1E5DD;
    padding-bottom:8px;
  }
  .control-drawer-label{font-size:15px;font-weight:650;color:var(--accent);line-height:1.45}
  .control-drawer-close{min-width:48px;min-height:44px;font-size:13px;border:0;background:#EEF2EC;padding:8px 11px}
  #controls-panel.mobile-active > .panel-heading{margin:0 0 5px}
  #controls-panel.mobile-active .control-tabs{margin:5px 0}
  #controls-panel.mobile-active .controls-grid{margin:8px 0;grid-template-columns:repeat(4,minmax(0,1fr))}
  #controls-panel.mobile-active .controls-grid button{min-height:50px}
  #controls-panel.mobile-active .piece-note-button{min-height:44px;text-align:center}
  #controls-panel.mobile-active .control-live-preview{display:none}
  .studio.paused #controls-panel.mobile-active{display:none}
  .mobile-tabs{z-index:20}
}
@media(max-width:380px){
  #controls-panel.mobile-active{padding-inline:12px}
  #controls-panel.mobile-active .control-drawer-label{font-size:14px}
}
@media(max-height:620px) and (max-width:767px){
  #controls-panel.mobile-active{max-height:40dvh;bottom:calc(68px + env(safe-area-inset-bottom))}
  .studio.controls-active .stage-shell{max-height:calc(100dvh - 40dvh - 95px)}
}


/* Avoid transient success toasts obscuring the small-screen editor tools. */
#controls-panel .control-inline-status:empty{display:none}
@media(max-width:767px){
  #controls-panel.mobile-active .control-inline-status{
    padding:7px 11px;
    margin:2px 0 8px;
    border-radius:6px;
    background:#E9F0E9;
    color:#375749;
    font-size:12px;
    line-height:1.5;
    word-break:keep-all;
  }
}