/* 「긋고 남기기」 과일판 전용 스타일 — 「아침 과일 가게」 (common.css는 X·Y 시제품이 쓰므로 여기서는 불러오지 않는다)
   색·글자 토큰의 정본. 캔버스(z.html)도 이 변수들을 읽어서 그린다. 그림 쪽 정본은 art/ui/manifest.json 의 palette(값이 같아야 한다) */
@font-face{font-family:"Pretendard";font-weight:100 900;font-style:normal;font-display:swap;src:url(fonts/PretendardVariable.subset.woff2) format("woff2")}
:root{
  --bg:#F7F2E8;--panel:#FFFDF8;--line:#DDD3C0;--fg:#1F2A37;--dim:#5B6472;--acc:#1A5FD0;      /* 바탕 · 면 · 선 · 잉크(글자) · 흐린 글자 · 강조(누를 수 있는 것만) */
  --acc-edge:#134AA6;--hit:#EAF1FC;--floor:#ECE4D4;--slot:#E0D6C2;--quiet:#D3C8B3;--wood:#E6CC9E;--one:#EFE8DA;--danger:#C8322B;
  --tile-r:#FBE3E0;--tile-y:#FCEFC4;--tile-g:#DDF0D8;--tile-p:#E8E1F8;--tile-n:#FFFDF8;       /* 묶음별 타일 면 */
  --scrim:rgba(31,42,55,.35);
  --f-xl:40px;--f-l:18px;--f-m:14px;--f-s:12px;                                              /* 글자 네 단계: 큰 숫자 · 제목 · 본문 · 작은 글자 */
  --font:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --bw:100%;                                                                                 /* 판(쟁반) 폭. z.html이 창 크기에 맞춰 넣는다 */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--f-m);overscroll-behavior:none}
body{display:flex;flex-direction:column;max-width:540px;margin:0 auto;user-select:none;-webkit-user-select:none;overflow:hidden}
#cv{flex:1 1 auto;width:100%;min-height:0;touch-action:none;display:block}
[hidden]{display:none!important}
button{font:inherit;color:var(--fg);margin:0;cursor:pointer;transition:transform .1s}
button:active{transform:scale(.96)}
button:disabled{opacity:.4}

/* 아래 도구 줄: 판 폭에 맞춰 가운데. 조용한 버튼(면 + 베이지 선 + 아래 두께 띠) */
#bar{flex:0 0 auto;display:flex;justify-content:center;padding:6px 0 calc(10px + env(safe-area-inset-bottom,0px))}
#bar .row{width:var(--bw);max-width:100%;display:flex;gap:6px;align-items:center}
#bar button.q{flex:1 1 0;min-width:48px;height:48px;padding:0 4px 3px;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;
  background:var(--panel);border:1.5px solid var(--quiet);border-radius:19px;box-shadow:inset 0 -4px 0 var(--quiet);font-size:var(--f-m);font-weight:600;font-variant-numeric:tabular-nums}
#bar #swap{flex:1.6 1 0} #bar #where,#bar #again,#bar #help{flex:.85 1 0}
#bar .sp{flex:1 1 auto}
#bar .ic{width:22px;height:22px;flex:0 0 22px;display:block;background:center/contain no-repeat}
#bar .ic svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#bar .ic.img svg{display:none}
#bar button.on,#bar button.blink,#bar button.tip{outline:2.5px solid var(--acc);outline-offset:1px}
#bar button.on{background-color:var(--hit);color:var(--acc)}
@keyframes zblink{0%,100%{outline-color:transparent}50%{outline-color:var(--acc)}}
#bar button.blink,#bar button.tip{animation:zblink 1.1s infinite}
/* 글자 버튼(건너뛰기): 테두리 없이 흐린 글자, 터치 높이 44 */
button.txt{background:transparent;border:0;min-height:44px;min-width:88px;padding:0 12px;color:var(--dim);font-size:var(--f-m);font-weight:600}

/* 연습 말풍선 */
#tutbox{position:fixed;z-index:4;display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 0 var(--line);padding:8px 10px 8px 14px;font-size:var(--f-m);font-weight:500;line-height:1.45;word-break:keep-all}
#tutbox.small{font-size:var(--f-s);padding:3px 6px 3px 10px;line-height:1.35}
#tutmsg{flex:1 1 auto} #tutmsg b{font-size:var(--f-s);font-weight:700;color:var(--dim);margin-right:6px}
#tutNext{flex:0 0 auto;min-width:64px;min-height:44px;padding:0 14px 3px;background:var(--acc);color:#fff;border:0;border-radius:17px;box-shadow:inset 0 -4px 0 var(--acc-edge);font-size:var(--f-m);font-weight:700}

/* 시트: 뒤 막 + 주 버튼 하나(56) + 보조(48) + 글자 버튼(44) */
#scrim{position:fixed;inset:0;background:var(--scrim);z-index:5}
#card{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,calc(var(--bw) + 24px));max-width:540px;max-height:calc(100% - 20px);overflow:auto;z-index:6;
  background:var(--panel);border-radius:20px 20px 0 0;padding:20px 16px calc(14px + env(safe-area-inset-bottom,0px))}
#card h2{margin:0 0 6px;font-size:var(--f-l);font-weight:700}
#card p{margin:0 0 14px;color:var(--dim);font-size:var(--f-m);font-weight:500;line-height:1.55;white-space:pre-line;word-break:keep-all}
#card .pic{display:block;height:120px;width:auto;margin:0 auto 6px}
#card.result{text-align:center} #card.result h2{font-size:var(--f-xl);font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
/* 첫 화면: 시트 모양 없이 바탕 위에 제목·한 줄·버튼(목업 구성) */
#card.plain{background:var(--bg);border-radius:0;text-align:center;padding-top:6px} #card.plain h2{font-size:var(--f-xl);font-weight:800;line-height:1.2;margin-bottom:4px} #card.plain p{margin-bottom:18px}
.choices{display:flex;flex-direction:column;gap:8px}
.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;text-align:center}
.choice b{font-weight:inherit}
.choice span{font-size:var(--f-s);font-weight:500;line-height:1.35} .choice span:empty{display:none}
.choice.pri{height:56px;padding:0 16px 5px;background:var(--acc);color:#fff;border:0;border-radius:22px;box-shadow:inset 0 -6px 0 var(--acc-edge);font-size:var(--f-l);font-weight:700}
.choice.sec{min-height:48px;padding:4px 16px 7px;background:var(--panel);border:1.5px solid var(--fg);border-radius:19px;box-shadow:inset 0 -4px 0 var(--fg);font-size:var(--f-m);font-weight:600}
.choice.sec span{color:var(--dim)}
.choice.opt{align-items:flex-start;text-align:left;min-height:56px}
.choice.txt{min-height:44px;flex-direction:row;gap:6px;align-items:baseline;color:var(--dim);font-size:var(--f-m);font-weight:600}

/* 교체 훅: 그래픽 담당의 버튼 그림(art/ui/btn_*.webp, 가로 3분할)이 불러와지면 z.html이 <html>에 has-이름 을 붙인다. 없으면 위의 코드 그림 그대로 */
.has-btn_primary .choice.pri{box-shadow:none;border-style:solid;border-color:transparent;border-width:0 27px;padding-left:0;padding-right:0;border-image:url(art/ui/btn_primary.webp) 0 81 fill/0 27px stretch}
.has-btn_primary.has-btn_primary_down .choice.pri:active{border-image-source:url(art/ui/btn_primary_down.webp)}
.has-btn_primary #tutNext{box-shadow:none;border-style:solid;border-color:transparent;border-width:0 21px;padding-left:0;padding-right:0;border-image:url(art/ui/btn_primary.webp) 0 81 fill/0 21px stretch}
.has-btn_second .choice.sec{box-shadow:none;border-style:solid;border-color:transparent;border-width:0 23px;padding-left:0;padding-right:0;border-image:url(art/ui/btn_second.webp) 0 81 fill/0 23px stretch}
.has-btn_second.has-btn_second_down .choice.sec:active{border-image-source:url(art/ui/btn_second_down.webp)}
.has-btn_quiet #bar button.q{box-shadow:none;border-style:solid;border-color:transparent;border-width:0 14px;padding-left:0;padding-right:0;border-image:url(art/ui/btn_quiet.webp) 0 81 fill/0 23px stretch}
.has-btn_quiet.has-btn_quiet_down #bar button.q:active{border-image-source:url(art/ui/btn_quiet_down.webp)}