:root{
    --cream:#faf6ee;
    --sage:#a9bfa2;
    --sage-deep:#7f9a76;
    --sage-pale:#e4ebdf;
    --clay:#c98f6a;
    --clay-pale:#f1ddca;
    --ink:#3f3b34;
    --ink-soft:#7a756a;
    --white:#ffffff;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    padding:40px 0;
    background:var(--cream);
    font-family:'Noto Sans KR', sans-serif;
    color:var(--ink);
    display:flex;
    justify-content:center;
  }
  .page{
    width:800px;
    min-height:1200px;
    background:var(--white);
    border-radius:32px;
    box-shadow:0 20px 50px rgba(90,80,60,0.12);
    padding:64px 56px 72px;
    position:relative;
  }
  .cover{
    padding-bottom:36px;
    margin-bottom:44px;
    border-bottom:1px solid #eee7da;
    position:relative;
  }
  .cover .day-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    letter-spacing:3px;
    color:var(--sage-deep);
    font-weight:700;
    margin-bottom:18px;
    text-transform:uppercase;
  }
  .cover .day-tag::before{
    content:"";
    width:22px;height:1px;
    background:var(--sage-deep);
    display:inline-block;
  }
  .cover h1{
    font-family:'Poor Story', cursive;
    font-weight:400;
    font-size:46px;
    padding-right:96px;
    margin:0 0 16px;
    color:var(--ink);
    letter-spacing:1px;
  }
  .cover p.intro{
    font-size:17px;
    color:var(--ink-soft);
    line-height:1.7;
    max-width:520px;
    margin:0;
  }
  .accent-blob{
    position:absolute;
    top:0; right:0;
    width:86px; height:86px;
    background:var(--sage-pale);
    border-radius:38% 62% 55% 45% / 50% 40% 60% 50%;
  }
  .accent-blob::after{
    content:"";
    position:absolute;
    top:28px; left:24px;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--sage-deep);
    box-shadow:20px 0 0 var(--sage-deep);
  }
  .sticker{
    position:absolute;
    width:34px; height:34px;
    pointer-events:none;
  }
  .section-label{
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--clay);
    margin:36px 0 18px;
    position:relative;
  }
  .section-label:first-of-type{ margin-top:0; }
  .card{
    background:var(--white);
    border-radius:24px;
    padding:26px;
    margin-bottom:28px;
    box-shadow:0 10px 30px rgba(90,80,60,0.08);
    border:1px solid #f1ece0;
    position:relative;
  }
  .card .content h3{
    font-size:22px;
    font-weight:700;
    margin:0 0 10px;
    color:var(--ink);
  }
  .card .content p{
    font-size:15.5px;
    line-height:1.8;
    color:var(--ink-soft);
    margin:0 0 12px;
  }
  .lookout, .soft-note{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    font-weight:500;
    padding:9px 16px;
    border-radius:999px;
  }
  .lookout{background:var(--sage-pale); color:var(--sage-deep);}
  .soft-note{background:var(--clay-pale); color:var(--clay);}
  .lookout::before, .soft-note::before{
    content:"";
    width:6px;height:6px;
    border-radius:50%;
    background:currentColor;
  }
  .gallery{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .gallery .g-hero{ width:100%; }
  .gallery .g-hero .frame{ height:260px; }
  .gallery .g-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:14px;
  }
  .gallery .g-grid.count-1{ grid-template-columns:1fr; }
  .gallery .g-grid.count-1 .frame{ height:190px; }
  .gallery .g-grid .frame{ height:150px; }
  figure.shot{
    margin:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
  }
  .frame{
    background:var(--sage-pale);
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--sage-deep);
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
    position:relative;
    overflow:hidden;
  }
  .frame img{
    width:100%; height:100%;
    object-fit:cover;
    border-radius:20px;
    position:relative;
    z-index:0;
  }
  .frame .placeholder-label{
    position:relative;
    z-index:1;
    text-align:center;
    padding:0 12px;
    line-height:1.5;
  }
  .frame::after{
    content:"";
    position:absolute;
    bottom:-30px; right:-30px;
    width:120px;height:120px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
  }
  .card.food .frame{background:var(--clay-pale); color:var(--clay);}
  .card.food .frame::after{background:rgba(255,255,255,0.55);}
  figcaption.shot-note{
    font-size:13px;
    line-height:1.55;
    color:var(--ink-soft);
    padding:0 2px;
  }
  .gallery .g-hero figcaption.shot-note{ font-size:14px; }
  .washi{
    position:absolute;
    top:-9px; left:22px;
    width:84px; height:24px;
    background:var(--clay-pale);
    opacity:0.75;
    transform:rotate(-4deg);
    z-index:2;
    pointer-events:none;
    box-shadow:0 2px 6px rgba(90,80,60,0.08);
  }
  .card.place .washi{ background:var(--sage-pale); }
  .route{
    background:var(--sage-pale);
    border-radius:24px;
    padding:36px 30px;
    margin-bottom:24px;
  }
  .route-track{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    position:relative;
    padding:0 8px;
  }
  .route-track::before{
    content:"";
    position:absolute;
    top:8px; left:44px; right:44px;
    height:0;
    border-top:2px dashed var(--sage-deep);
    opacity:0.5;
  }
  .pin{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:33%;
  }
  .pin .dot{
    width:16px;height:16px;
    border-radius:50%;
    background:var(--white);
    border:3px solid var(--sage-deep);
  }
  .pin.mid .dot{border-color:var(--clay);}
  .pin.end .dot{border-color:var(--ink);}
  .pin .label{
    font-size:14px;
    font-weight:500;
    color:var(--ink);
    text-align:center;
    line-height:1.5;
  }
  .footer-tag{
    text-align:center;
    margin-top:28px;
  }
  .footer-tag span{
    display:inline-block;
    font-family:'Poor Story', cursive;
    font-size:19px;
    color:var(--sage-deep);
    padding:10px 24px;
    border:1px solid var(--sage-deep);
    border-radius:999px;
  }
/* ===== 골라볼까요 card (book 2; copied from seoul-2026/template.css) ===== */
  .card.choose{
    background:var(--sage-pale);
    border:1px dashed var(--sage-deep);
    box-shadow:none;
  }
  .card.choose .content h3{ color:var(--sage-deep); }
  .card.choose .choose-lead{
    font-size:15.5px;
    line-height:1.8;
    color:var(--ink-soft);
    margin:0 0 16px;
  }
  .option{
    background:var(--white);
    border-radius:18px;
    padding:16px 18px;
    margin-bottom:12px;
    border:1px solid #eae3d4;
  }
  .option:last-child{ margin-bottom:0; }
  .option .option-name{
    font-size:16px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 6px;
  }
  .option .option-name .tag{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    color:var(--clay);
    background:var(--clay-pale);
    border-radius:999px;
    padding:2px 9px;
    margin-left:8px;
    vertical-align:middle;
  }
  .option p{
    font-size:14.5px;
    line-height:1.75;
    color:var(--ink-soft);
    margin:0;
  }

/* ===== FRONT MATTER: cover + table of contents (from the printed book) ===== */
  /* Cover + TOC keep the edit + sticker chrome: Aini can decorate them too. */
  body.is-front .demo-topbar .tag{ opacity:0.55; }

  .book-tag{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; letter-spacing:3px; color:var(--sage-deep);
    font-weight:700; margin-bottom:22px; text-transform:uppercase;
  }
  .book-tag::before{
    content:""; width:22px; height:1px; background:var(--sage-deep); display:inline-block;
  }
  .accent-blob.two{
    top:auto; right:auto; bottom:40px; left:-20px;
    width:110px; height:110px; background:var(--clay-pale);
    border-radius:55% 45% 40% 60% / 45% 55% 45% 55%;
  }
  .accent-blob.two::after{ background:var(--clay); box-shadow:none; }

  .cover-hero{
    display:flex; flex-direction:column; align-items:center;
    text-align:center; padding-top:20px;
  }
  .hero-frame{
    width:420px; height:420px; max-width:100%;
    background:var(--sage-pale); border-radius:32px;
    display:flex; align-items:center; justify-content:center;
    color:var(--sage-deep); font-size:14px; font-weight:700; letter-spacing:2px;
    position:relative; overflow:hidden; margin-bottom:40px;
    box-shadow:0 14px 34px rgba(90,80,60,0.10);
  }
  .hero-frame img{ width:100%; height:100%; object-fit:cover; border-radius:32px; }
  .hero-frame .placeholder-label{
    position:relative; z-index:1; text-align:center; padding:0 20px; line-height:1.6;
  }
  .hero-frame::after{
    content:""; position:absolute; bottom:-40px; right:-40px;
    width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,0.5);
  }
  .cover-hero h1{
    font-family:'Poor Story', cursive; font-weight:400; font-size:56px;
    margin:0 0 18px; color:var(--ink); letter-spacing:1px;
  }
  .cover-hero p.subtitle{
    font-size:18px; color:var(--ink-soft); line-height:1.8; max-width:460px; margin:0 0 8px;
  }
  .cover-cta{ text-align:center; margin-top:30px; }

  /* table of contents */
  .toc-head{
    padding-bottom:32px; margin-bottom:36px;
    border-bottom:1px solid #eee7da; position:relative;
  }
  .toc-head .day-tag{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; letter-spacing:3px; color:var(--sage-deep);
    font-weight:700; margin-bottom:18px; text-transform:uppercase;
  }
  .toc-head .day-tag::before{
    content:""; width:22px; height:1px; background:var(--sage-deep); display:inline-block;
  }
  .toc-head h1{
    font-family:'Poor Story', cursive; font-weight:400; font-size:42px;
    margin:0 0 12px; color:var(--ink); letter-spacing:1px;
  }
  .toc-head p.intro{
    font-size:16px; color:var(--ink-soft); line-height:1.7; max-width:520px; margin:0;
  }
  .toc-list{ display:flex; flex-direction:column; gap:14px; }
  a.toc-row{
    display:grid; grid-template-columns:88px 1fr; align-items:center; gap:22px;
    background:var(--white); border:1px solid #f1ece0; border-radius:18px;
    padding:16px 22px; box-shadow:0 6px 18px rgba(90,80,60,0.06);
    text-decoration:none; color:inherit; transition:transform .12s ease;
  }
  a.toc-row:hover{ transform:translateX(4px); }
  .toc-row .num{
    font-family:'Poor Story', cursive; font-size:15px; letter-spacing:2px;
    color:var(--sage-deep); text-transform:uppercase; text-align:center;
    background:var(--sage-pale); border-radius:12px; padding:10px 0;
  }
  .toc-row.accent .num{ background:var(--clay-pale); color:var(--clay); }
  .toc-row .title{ font-size:17px; font-weight:700; color:var(--ink); }
  .toc-row .title .sub{
    display:block;
    margin-top:3px;
    font-size:13.5px;
    font-weight:400;
    color:var(--ink-soft);
  }

/* ===== BEGIN NAV (generated) ===== */
  .washi-nav{
    margin-top:46px;
    padding-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:52px;
  }
  .tape-btn{
    position:relative;
    font-family:'Poor Story', cursive;
    font-size:16px;
    padding:11px 22px;
    border-radius:6px;
    cursor:pointer;
    box-shadow:0 5px 13px rgba(90,80,60,0.13);
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    color:var(--sage-deep);
  }
  .tape-btn::before{
    content:"";
    position:absolute;
    top:-8px;
    left:50%;
    transform:translateX(-50%) rotate(-1.5deg);
    width:58px; height:15px;
    opacity:0.9;
    box-shadow:0 2px 5px rgba(90,80,60,0.08);
  }
  .tape-btn.prev{ background:var(--sage-pale); color:var(--sage-deep); transform:rotate(-1.5deg); }
  .tape-btn.next{ background:var(--sage-pale); color:var(--sage-deep); transform:rotate(1.5deg); }
  .tape-btn.prev::before,
  .tape-btn.next::before{ background:var(--clay-pale); }
  .tape-btn.home{
    background:var(--clay-pale);
    color:var(--clay);
    transform:rotate(-1deg);
    font-size:17px;
  }
  .tape-btn.home::before{ background:var(--sage-pale); }
  .tape-btn.is-disabled{
    opacity:0.32;
    pointer-events:none;
  }
/* ===== END NAV (generated) ===== */

/* ===== BEGIN DEMO CONTROLS (generated, additions only) ===== */

  /* fixed bottom washi-nav (was in-flow, now pinned) */
  .washi-nav{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:60;
    margin-top:0;
    padding:16px 24px 18px;
    background:rgba(250,246,238,0.94);
    backdrop-filter:blur(8px);
    border-top:1px solid #eee7da;
  }
  body{ padding-bottom:96px; }

  /* top control bar, lifted from direction-C-sticker-desk.html */
  .demo-topbar{
    position:fixed;
    top:0; left:0; right:0;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 22px;
    background:rgba(250,246,238,0.92);
    backdrop-filter:blur(6px);
    border-bottom:2px dashed var(--sage);
  }
  .demo-topbar .tag{
    font-family:'Poor Story', cursive;
    font-size:15px;
    color:var(--white);
    background:var(--clay);
    padding:5px 14px;
    border-radius:999px;
    transform:rotate(-3deg);
    box-shadow:2px 2px 0 rgba(63,59,52,0.15);
  }
  .demo-controls{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .edit-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--white);
    border:2px solid var(--sage);
    border-radius:999px;
    padding:6px 6px 6px 16px;
    cursor:pointer;
    font-family:'Noto Sans KR', sans-serif;
    font-size:14px;
    font-weight:500;
    color:var(--ink);
    transition:box-shadow 0.2s ease, transform 0.15s ease;
  }
  .edit-toggle:hover{
    transform:translateY(-1px);
    box-shadow:0 3px 0 var(--sage-deep);
  }
  .edit-toggle .switch{
    width:40px;
    height:22px;
    border-radius:999px;
    background:var(--sage-pale);
    position:relative;
    transition:background 0.2s ease;
  }
  .edit-toggle .switch::after{
    content:'';
    position:absolute;
    top:2px; left:2px;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--white);
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    transition:left 0.2s ease, background 0.2s ease;
  }
  body.edit-on .edit-toggle .switch{ background:var(--clay); }
  body.edit-on .edit-toggle .switch::after{ left:20px; background:var(--white); }

  .tray-toggle{
    background:var(--sage-deep);
    color:var(--white);
    border:none;
    border-radius:999px;
    padding:9px 18px;
    font-family:'Poor Story', cursive;
    font-size:15px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    box-shadow:0 3px 0 var(--ink-soft);
    transition:transform 0.12s ease, box-shadow 0.12s ease;
  }
  .tray-toggle:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 0 var(--ink-soft);
  }
  .tray-toggle:active{
    transform:translateY(1px);
    box-shadow:0 1px 0 var(--ink-soft);
  }

  /* reset (clear this page's stickers) — only shown in edit mode.
     Same solid washi-pill shape as the sticker button, in clay, so it sits
     in the row as a sibling instead of a raw outlined box. */
  .reset-btn{
    display:none;
    background:var(--clay);
    color:var(--white);
    border:none;
    border-radius:999px;
    padding:9px 16px;
    font-family:'Poor Story', cursive;
    font-size:15px;
    cursor:pointer;
    gap:6px;
    box-shadow:0 3px 0 var(--ink-soft);
    transition:transform 0.12s ease, box-shadow 0.12s ease;
  }
  .reset-btn svg{ width:15px; height:15px; display:block; }
  .reset-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 5px 0 var(--ink-soft);
  }
  .reset-btn:active{
    transform:translateY(1px);
    box-shadow:0 1px 0 var(--ink-soft);
  }
  body.edit-on .reset-btn{ display:inline-flex; align-items:center; }

  /* push page content below fixed top bar */
  .page{ margin-top:64px; }

  /* replace-photo affordance, lifted from direction-C-sticker-desk.html */
  .frame{ position:relative; }
  .replace-badge{
    position:absolute;
    top:8px; right:8px;
    background:var(--clay);
    color:var(--white);
    border:none;
    border-radius:999px;
    padding:7px 14px;
    font-family:'Noto Sans KR', sans-serif;
    font-size:12.5px;
    font-weight:700;
    display:none;
    align-items:center;
    gap:5px;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    z-index:4;
  }
  body.edit-on .replace-badge{ display:flex; }
  body.edit-on .frame::after{
    content:'';
    position:absolute;
    inset:0;
    /* reset the base .frame::after decorative circle so the dashed
       outline traces the whole frame instead of a mis-sized corner box */
    top:0; right:0; bottom:0; left:0;
    width:auto; height:auto;
    background:none;
    border:3px dashed var(--clay);
    border-radius:20px;
    pointer-events:none;
    z-index:2;
  }
  /* the cover hero is its own .shot (no inner .frame), and its ::after is a
     decorative circle — override it in edit mode to the same dashed outline,
     tracing the hero frame's 32px radius so the cover matches the day photos. */
  body.edit-on .hero-frame.shot::after{
    content:'';
    top:0; right:0; bottom:0; left:0;
    width:auto; height:auto;
    background:none;
    border:3px dashed var(--clay);
    border-radius:32px;
    pointer-events:none;
    z-index:2;
  }

  /* sticker panel (스티커북), lifted from direction-B-clean-gallery.html */
  .sticker-panel{
    position:fixed;
    top:50%; right:24px;
    transform:translateY(-50%) translateX(120%);
    width:320px;
    max-width:82vw;
    background:var(--white);
    border-radius:16px;
    box-shadow:-8px 0 28px rgba(63,59,52,0.16);
    display:flex;
    flex-direction:column;
    max-height:78vh;
    z-index:80;
    opacity:0;
    pointer-events:none;
    transition:transform 0.24s ease, opacity 0.24s ease;
  }
  body.panel-open .sticker-panel{
    transform:translateY(-50%) translateX(0);
    opacity:1;
    pointer-events:auto;
  }
  .sticker-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px 12px;
    border-bottom:1px solid var(--sage-pale);
  }
  .sticker-panel-head h3{
    font-size:20px;
    margin:0;
    color:var(--ink);
    font-family:'Poor Story', cursive;
    font-weight:400;
  }
  .sticker-close{
    border:none;
    background:var(--sage-pale);
    color:var(--sage-deep);
    width:30px; height:30px;
    border-radius:50%;
    cursor:pointer;
    font-size:16px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .sticker-tabs{
    display:flex;
    gap:6px;
    padding:12px 16px 0;
  }
  .sticker-tab{
    flex:1;
    border:none;
    background:var(--cream);
    color:var(--ink-soft);
    padding:9px 6px;
    border-radius:10px;
    font-size:12.5px;
    font-weight:500;
    cursor:pointer;
    font-family:'Noto Sans KR', sans-serif;
  }
  .sticker-tab.active{
    background:var(--clay-pale);
    color:var(--clay);
  }
  .sticker-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    padding:18px 20px 24px;
    overflow-y:auto;
  }
  .sticker-item{
    aspect-ratio:1;
    background:var(--cream);
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:grab;
    transition:transform 0.15s ease;
  }
  .sticker-item:hover{ transform:scale(1.08); }
  /* real illustrations carry their own viewBox + width/height attrs; force a
     fit-to-box that preserves each sticker's aspect ratio */
  .sticker-item svg{
    width:auto; height:auto;
    max-width:82%; max-height:82%;
    display:block;
  }
/* ===== END DEMO CONTROLS (generated) ===== */

/* ===== APP: live states (placed stickers, save feedback, nav) ===== */
  .placed-sticker{
    position:absolute;
    /* height-driven box so each sticker keeps its own aspect ratio; width
       follows the SVG's intrinsic ratio instead of squashing to a square */
    height:72px;
    width:auto;
    transform-origin:center;
    touch-action:none;
    cursor:grab;
    filter:drop-shadow(0 3px 6px rgba(63,59,52,0.18));
    z-index:5;
  }
  .placed-sticker svg{ height:72px; width:auto; display:block; pointer-events:none; }
  body:not(.edit-on) .placed-sticker{ cursor:default; }
  body.edit-on .placed-sticker{ outline:2px dashed var(--sage-deep); outline-offset:3px; border-radius:8px; }

  .shot.saving .frame{ opacity:0.55; }
  .shot.saving .frame::after{
    content:'저장 중';
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:'Poor Story', cursive; color:var(--ink); background:rgba(250,246,238,0.6);
  }
  .shot.saved .frame{ box-shadow:0 0 0 3px var(--sage-deep); }
  .shot.save-failed .frame{ box-shadow:0 0 0 3px var(--clay); }

  /* the cover hero is its own .shot (no inner .frame), so mirror the save-state
     feedback directly on the hero frame when the cover photo is being swapped. */
  .hero-frame.shot.saving{ opacity:0.55; }
  .hero-frame.shot.saved{ box-shadow:0 0 0 3px var(--sage-deep); }
  .hero-frame.shot.save-failed{ box-shadow:0 0 0 3px var(--clay); }

  .tape-btn.disabled{ opacity:0.4; pointer-events:none; }
/* ===== END APP states ===== */

/* ===== 폰 (700px 이하) — 시트가 화면을 채운다. 아이패드 미니(768)는 위 규칙 그대로. 2026-09-12 ===== */
@media (max-width: 700px){
  body{ padding:0; display:block; }
  .page{
    width:auto; min-height:0;
    border-radius:0; box-shadow:none;
    padding:28px 18px 120px;
  }
  .cover h1{ font-size:34px; padding-right:0; }
  .cover p.intro{ font-size:16px; }
  .cover-hero h1{ font-size:40px; }
  .hero-frame{ width:100%; height:auto; aspect-ratio:1/1; }
  .card{ padding:20px 16px; }
  .gallery .g-hero .frame{ height:220px; }
  .gallery .g-grid{ grid-template-columns:1fr 1fr; }
  .gallery .g-grid .frame{ height:140px; }
  /* 머리 한 줄 고정: 버튼은 절대 안 접히고, 남는 자리만 태그가 쓴다 (편집 켜면 버튼 넷) */
  .demo-topbar{ padding:8px 12px; gap:8px; }
  .demo-topbar .tag{ flex:0 1 auto; min-width:0; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; padding:4px 12px; }
  .demo-controls{ gap:6px; flex-shrink:0; }
  .demo-controls button{ white-space:nowrap; flex-shrink:0; }
  .edit-toggle{ padding:4px 4px 4px 10px; font-size:13px; gap:6px; }
  .tray-toggle, .reset-btn{ padding:8px 12px; font-size:14px; }
  .reset-btn .long{ display:none; }
  .page{ margin-top:52px; }
  /* 표지·차례 장식 방울이 제목 줄과 겹치지 않게: 작게, 글자는 위로 */
  .accent-blob{ width:64px; height:64px; }
  .book-tag, .toc-head .day-tag, .cover .day-tag, .cover h1, .toc-head h1, .cover-hero h1{ position:relative; z-index:1; }
  .washi-nav{ gap:10px; padding:12px 14px 14px; }
  .sticker-panel{ right:12px; width:calc(100vw - 24px); }
}

/* ===== 태블릿 (701–860px) — 시트는 그대로, 화면보다 넓어지지만 않게 (아이패드 미니 768) ===== */
@media (min-width: 701px) and (max-width: 860px){
body{ padding:24px 16px; }
.page{ width:auto; max-width:800px; margin:0 auto; }
}

/* ===== 내 사진 — 아이니가 여행 중 올리는 사진 (2026-09-12) ===== */
.mine{ margin-top:14px; }
.mine-grid:empty{ display:none; }
.mine-grid .frame{ height:150px; }
.mine-shot figcaption{ display:none; }
.mine-add{
  display:none; margin-top:12px;
  font-family:'Poor Story', cursive; font-size:16px;
  padding:10px 18px; border-radius:6px; border:1.5px dashed var(--sage-deep);
  background:var(--sage-pale); color:var(--sage-deep); cursor:pointer;
}
body.edit-on .mine-add{ display:inline-flex; }
.mine-add:disabled{ opacity:0.6; }
.mine-del{
  position:absolute; bottom:8px; right:8px; z-index:4; display:none;
  background:var(--white); color:var(--clay); border:1.5px solid var(--clay);
  border-radius:999px; padding:5px 11px; font-family:'Noto Sans KR', sans-serif;
  font-size:12px; font-weight:700; cursor:pointer;
}
body.edit-on .mine-del{ display:inline-flex; }
@media (max-width: 700px){
  body{ background:var(--white); }
}