:root{
    --cream:#FAF8F3; --paper:#fff;
    --ui:#2C2A26; --dim:#6E6A62; --faint:#9A958B;
    --line:rgba(44,42,38,.13); --line2:rgba(44,42,38,.07);
    --ink:#3E6152;                     /* 현재 축 잉크 — JS가 바꾼다 */
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}

  /* ══════ 오로라 배경 ══════ 흰 바탕 + 세 축 색, 강한 블러, 천천히, 마우스 반응 */
  .aurora{position:fixed;inset:0;z-index:-2;background:#fff;overflow:hidden;pointer-events:none}
  .aurora .blob{position:absolute;width:62vmax;height:62vmax;border-radius:50%;
    filter:blur(70px);opacity:.52;will-change:transform;mix-blend-mode:multiply}
  .aurora .b1{background:radial-gradient(circle at 50% 50%,rgba(63,109,160,.9),rgba(63,109,160,0) 62%);
    top:-16%;left:-12%;animation:drift1 26s ease-in-out infinite}
  .aurora .b2{background:radial-gradient(circle at 50% 50%,rgba(62,97,82,.85),rgba(62,97,82,0) 62%);
    top:12%;right:-18%;left:auto;animation:drift2 32s ease-in-out infinite}
  .aurora .b3{background:radial-gradient(circle at 50% 50%,rgba(107,90,147,.9),rgba(107,90,147,0) 62%);
    bottom:-22%;left:22%;top:auto;animation:drift3 30s ease-in-out infinite}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-7vw,8vh) scale(.92)}}
  @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-7vh) scale(1.12)}}
  .aurora .parallax{position:absolute;inset:-10%;transform:translate(var(--px,0),var(--py,0));
    transition:transform 1.4s cubic-bezier(.22,.61,.36,1);will-change:transform}
  .aurora::after{content:"";position:absolute;inset:0;
    background:radial-gradient(120% 90% at 50% 0%,rgba(250,248,243,.22) 30%,rgba(250,248,243,.62) 100%)}

  body{background:transparent;color:var(--ui);
    font-family:Pretendard,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  button{font:inherit;color:inherit;cursor:pointer}
  a{color:inherit}

  /* ══════ 언어 선택 (우상단) ══════ */
  .langwrap{position:absolute;top:14px;right:16px;z-index:40}
  .langbtn{display:inline-flex;align-items:center;gap:6px;
    background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:999px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding:7px 12px;font-size:13px;color:var(--ui);transition:.16s;
    box-shadow:0 2px 8px rgba(45,42,62,.06)}
  .langbtn:hover{background:rgba(255,255,255,.85)}
  .langbtn .globe{width:16px;height:16px;color:var(--dim)}
  .langbtn .chev{width:13px;height:13px;color:var(--faint);transition:transform .2s}
  .langbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .langmenu{position:absolute;top:calc(100% + 8px);right:0;width:264px;
    background:rgba(255,255,255,.99);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(45,42,62,.18);
    padding:8px;display:flex;flex-direction:column}
  .langmenu[hidden]{display:none}
  /* 검색창 — 언어 하위에서 바로 검색 */
  .langsearch{padding:2px 2px 8px}
  .langsearch input{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;
    font-size:13px;color:var(--ui);background:rgba(250,248,243,.7);outline:none}
  .langsearch input:focus{border-color:var(--ink);background:#fff}
  .langlist{max-height:300px;overflow-y:auto;scrollbar-width:thin}
  .langopt{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
    border:none;background:none;border-radius:9px;padding:8px 11px;color:var(--ui);text-align:left;transition:.12s}
  .langopt:hover{background:rgba(44,42,38,.05)}
  .langopt .lo{display:flex;flex-direction:column;min-width:0}
  .langopt .ln{font-size:13.5px;line-height:1.35}
  .langopt .le{font-size:11px;color:var(--faint);line-height:1.3}
  .langopt.on .ln{color:var(--ink);font-weight:600}
  .langopt .ck{flex:0 0 auto;width:15px;height:15px;color:var(--ink);opacity:0}
  .langopt.on .ck{opacity:1}
  .langempty{padding:14px 12px;text-align:center;font-size:12.5px;color:var(--faint)}
  @media(max-width:560px){.langmenu{width:240px}}

  /* ══════ 머리 ══════ */
  /* ZemiNa 왼쪽 정렬 · 히어로 문구 없음 — 초깔끔(Grace 2026-07-24, 썬파워 임베드 쉽게) */
  header{padding:22px 24px 8px;text-align:left}
  .brand{font-family:'Gowun Batang',serif;font-size:26px;letter-spacing:.02em;color:var(--ink);
    transition:color .5s ease}
  .brand small{display:block;font-family:'Gowun Dodum',sans-serif;font-size:11px;
    letter-spacing:.36em;margin-right:-.36em;color:var(--faint);margin-top:8px}
  .hero{padding:30px 20px 22px;text-align:center;max-width:640px;margin:0 auto}
  .hero h1{font-family:'Gowun Batang',serif;font-weight:400;font-size:clamp(23px,6.4vw,31px);
    line-height:1.5;margin:0 0 12px}
  .hero p{font-family:'Nanum Myeongjo',serif;font-size:14.5px;line-height:1.85;color:var(--dim);margin:0}
  .hero .note{margin-top:16px;font-size:12.5px;color:var(--faint);
    font-family:'Gowun Dodum',sans-serif;letter-spacing:.02em}

  /* ══════ 축 탭 · 항목 알약 ══════ */
  /* 아이보리-화이트 글라스 — 투명도를 높여(불투명 80%) 뒤 오로라가 은은히 비친다 */
  /* 배경은 거의 투명(5%)로 — 오로라가 그대로 비친다. 얇은 헤어라인만, 두꺼운 그림자 없음(Grace 2026-07-24) */
  .axes{position:sticky;top:0;z-index:30;background:rgba(252,251,247,.05);
    -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
    border-bottom:1px solid rgba(44,42,38,.05);margin-top:14px}
  .axin{display:flex;gap:6px;justify-content:center;padding:10px 14px;max-width:720px;margin:0 auto}
  .ax{flex:1;max-width:150px;border:none;background:none;padding:9px 6px 11px;border-radius:12px;
    font-size:15px;font-weight:600;color:var(--faint);position:relative;transition:color .2s}
  .ax .cnt{font-size:11.5px;font-weight:500;opacity:.75;margin-left:4px}
  .ax.on{color:var(--ink)}
  .ax.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:2px;
    width:22px;height:2px;border-radius:2px;background:var(--ink)}
  /* 알약은 줄이 넘어가도 언제나 가운데 */
  .chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:7px;padding:14px 16px 4px;max-width:760px;margin:0 auto}
  .chip{flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.6);
    border-radius:999px;padding:7px 14px;font-size:13px;color:var(--dim);white-space:nowrap;
    transition:.16s}
  .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

  /* ══════ 목록 ══════ 한 줄 3개(PC)·2개(모바일) */
  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 20px;
    padding:22px 16px 60px;max-width:1060px;margin:0 auto}
  @media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr);gap:44px 30px;padding:30px 24px 80px}}
  .card{display:flex;flex-direction:column;align-items:center;gap:11px;cursor:pointer;outline:none}
  .card:focus-visible .pg.top{box-shadow:0 0 0 3px var(--ink)}

  /* 겹친 종이 — 장수만큼 겹쳐 보인다(2장이면 두 겹, 3장 이상은 세 겹).
     앞장을 살짝 줄여 남는 자리에 뒷장이 앉으므로 옆 카드를 침범하지 않는다. */
  .stack{position:relative;width:100%;aspect-ratio:210/297}
  .pg{position:absolute;left:0;bottom:0;width:93%;height:94%;background:var(--paper);
    background-size:cover;background-position:top center;
    border:1px solid var(--line2);border-radius:6px;overflow:hidden;
    box-shadow:0 3px 10px rgba(45,42,62,.05);transition:transform .22s ease,box-shadow .22s ease}
  .stack[data-n="1"] .pg{width:100%;height:100%}
  .pg.b2{transform:translate(7.4%,-6.3%) rotate(3deg)}
  .pg.b1{transform:translate(3.7%,-3.1%) rotate(1.5deg)}
  .pg.top img{width:100%;height:100%;object-fit:cover;object-position:top center}
  .card:hover .pg.top{transform:translateY(-4px);box-shadow:0 10px 24px rgba(45,42,62,.11)}
  .card:hover .pg.b1{transform:translate(4.8%,-4.4%) rotate(2.1deg)}
  .card:hover .pg.b2{transform:translate(9.2%,-8.4%) rotate(4.1deg)}
  /* 대화 카드 미리보기 — A4 3장이 아니라 카드 3장을 작은 아이콘처럼 겹쳐 보인다. */
  .icon-stack{position:relative;width:100%;height:100%;aspect-ratio:210/297;overflow:visible}
  .icon-stack .preview-card{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:63/88;container-type:inline-size;
    background:#fff;border:1px solid var(--line2);border-radius:11px;
    box-shadow:0 5px 12px rgba(45,42,62,.14);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
  .preview-card .pc-inner{width:100%;height:100%;padding:8% 6.5% 7%;
    display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
  .preview-card .pc-label{font-family:'Gowun Dodum',sans-serif;font-size:8.8px;font-size:4.48cqw;color:var(--card-ink,var(--ink));
    letter-spacing:.18em;white-space:nowrap;margin-right:-.18em}
  .pc-artbox{display:flex;align-items:center;justify-content:center;width:46%;aspect-ratio:1;
    margin:7% auto 5%;flex:0 0 auto}
  .pc-artbox img{width:100%;height:100%;object-fit:contain}
  .pc-artbox.empty img{display:none}
  .preview-card .pc-question{font-family:'Gowun Batang',serif;font-size:8.8px;font-size:4.48cqw;line-height:1.42;
    color:var(--card-ink,var(--ink));word-break:keep-all}
  .preview-card .pc-sub{font-family:'Nanum Myeongjo',serif;font-size:6.5px;font-size:3.31cqw;line-height:1.3;
    color:var(--card-ink,var(--ink));margin-top:auto;min-height:2.6em;word-break:keep-all}
  .preview-card.word-card .pc-country{font-family:'Gowun Dodum',sans-serif;font-size:5.8px;font-size:2.95cqw;color:var(--card-ink,var(--ink));margin-top:5%}
  .preview-card.word-card .pc-word{font-family:'Gowun Batang',serif;font-size:10px;font-size:5.08cqw;line-height:1.05;color:var(--card-ink,var(--ink));margin-top:2%}
  .preview-card.word-card .pc-pron{font-family:'Gowun Dodum',sans-serif;font-size:5.2px;font-size:2.64cqw;color:var(--card-ink,var(--ink));margin-top:2%}
  .preview-card.word-card .pc-meaning{font-family:'Nanum Myeongjo',serif;font-size:6px;font-size:3.05cqw;line-height:1.25;color:var(--card-ink,var(--ink));margin-top:5%;word-break:keep-all}
  .preview-card.word-card .pc-question{font-family:'Nanum Myeongjo',serif;font-size:6px;font-size:3.05cqw;line-height:1.25;margin-top:auto}
  /* 완료 이미지 덱 썸네일 — A4 디자인 카드의 글자/이미지 비율을 홈에서도 따른다. */
  .preview-card.canonical-card .pc-inner{padding:6.6% 6.45% 7.5%}
  .preview-card.canonical-card .pc-label{font-size:3.75cqw;letter-spacing:.36em;margin-right:-.36em}
  .preview-card.canonical-card .pc-artbox{width:68.9%;height:38.4%;aspect-ratio:auto;margin:4.5% auto 1.5%}
  .preview-card.canonical-card:not(.word-card) .pc-question{font-size:5.85cqw;line-height:1.52}
  .preview-card.canonical-card:not(.word-card) .pc-sub{font-size:3.75cqw;line-height:1.36;min-height:9.9cqw}
  .preview-card.canonical-card.word-card .pc-country{font-size:2.94cqw;letter-spacing:.16em;margin-top:0}
  .preview-card.canonical-card.word-card .pc-word{font-size:9.96cqw;line-height:1.02;margin-top:1%}
  .preview-card.canonical-card.word-card .pc-pron{font-size:3.48cqw;line-height:1.28;margin-top:1%}
  .preview-card.canonical-card.word-card .pc-meaning{font-size:4.98cqw;line-height:1.28;margin-top:2%}
  .preview-card.canonical-card.word-card .pc-question{font-size:3.96cqw;line-height:1.32}
  .main-strong:not(.word-card) .pc-question,
  .main-strong.word-card:not(.out-card) .pc-word,
  .main-strong.out-card .pc-meaning{font-weight:700}
  /* 대표 카드(1번)가 정면에서 읽히고, 양옆 카드는 '더 있음'만 살짝 보인다. */
  .icon-stack .preview-card.i0{transform:translate(-50%,-54%) rotate(0deg);z-index:2}
  .icon-stack .preview-card.i1{transform:translate(-55%,-50%) rotate(-2deg)}
  .icon-stack .preview-card.i2{transform:translate(-45%,-50%) rotate(2deg)}
  .card:hover .icon-stack .preview-card.i0{transform:translate(-50%,-58%) rotate(0deg)}
  .card:hover .icon-stack .preview-card.i1{transform:translate(-57%,-53%) rotate(-2.5deg)}
  .card:hover .icon-stack .preview-card.i2{transform:translate(-43%,-53%) rotate(2.5deg)}
  /* 대화 홈 카드 — T2 파일럿 승인값을 전체 대화 덱에 적용한다. */
  .card.conversation-card{gap:3px}
  .card.conversation-card .stack{aspect-ratio:210/270}
  .card.conversation-card .icon-stack .preview-card{width:78%;border-radius:17px}
  .card.conversation-card .icon-stack .preview-card.i0{transform:translate(-50%,-55.5%) rotate(0deg)}
  .card.conversation-card .icon-stack .preview-card.i1{transform:translate(-52.5%,-50%) rotate(-2deg)}
  .card.conversation-card .icon-stack .preview-card.i2{transform:translate(-47.5%,-50%) rotate(2deg)}
  .card.conversation-card:hover .icon-stack .preview-card.i0{transform:translate(-50%,-59%) rotate(0deg)}
  .card.conversation-card:hover .icon-stack .preview-card.i1{transform:translate(-53.5%,-53%) rotate(-2.4deg)}
  .card.conversation-card:hover .icon-stack .preview-card.i2{transform:translate(-46.5%,-53%) rotate(2.4deg)}
  .card.conversation-card .cpill{margin-top:-6px}
  .pg .miss{display:flex;height:100%;align-items:center;justify-content:center;
    font-size:12px;color:var(--faint);text-align:center;padding:14px;line-height:1.6}
  .card.off{opacity:.55;cursor:default}
  .card.off:hover .pg{transform:none;box-shadow:0 6px 18px rgba(45,42,62,.10)}
  /* 종이 위 받기 단추 — 우하단 작은 원(내용 안 가림). 아는 활동은 열지 않고 바로 */
  .dl{position:absolute;right:5%;bottom:5%;z-index:5;
    width:38px;height:38px;border-radius:999px;background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;text-decoration:none;
    box-shadow:0 6px 16px rgba(45,42,62,.28);opacity:.92;
    transition:opacity .18s ease,transform .18s ease}
  .dl svg{width:17px;height:17px}
  .card:hover .dl{opacity:1;transform:translateY(-2px) scale(1.05)}
  .dl:active{transform:scale(.94)}

  /* 종이 밑: 인원 알약 → 제목 (설명글·종류 없음) */
  .cpill{align-self:center;font-size:10.5px;color:var(--dim);font-family:'Gowun Dodum',sans-serif;
    white-space:nowrap;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;
    padding:3px 10px;box-shadow:0 2px 6px rgba(45,42,62,.06);margin-top:1px}
  .ct{font-family:'Gowun Batang',serif;font-size:15px;line-height:1.4;text-align:center}
  .empty{grid-column:1/-1;text-align:center;color:var(--faint);font-size:13.5px;padding:50px 0;line-height:1.8}

  footer{border-top:1px solid var(--line2);padding:26px 20px 40px;text-align:center;
    font-size:12px;color:var(--faint);line-height:2}
  footer a{color:var(--dim);text-decoration:none;margin:0 9px}

  /* ══════ 패널(PC) · 시트(모바일) ══════ */
  .scrim{position:fixed;inset:0;z-index:55;background:rgba(44,42,38,.26);
    opacity:0;pointer-events:none;transition:opacity .3s ease}
  .scrim.on{opacity:1;pointer-events:auto}

  .panel{position:fixed;z-index:60;background:var(--cream);display:flex;flex-direction:column;
    will-change:transform;transition:transform .34s cubic-bezier(.22,.61,.36,1);
    box-shadow:0 -10px 46px rgba(45,42,62,.2)}
  @media(max-width:899px){         /* 토스식 바텀시트 */
    .panel{left:0;right:0;bottom:0;top:7vh;border-radius:22px 22px 0 0;transform:translateY(103%)}
  }
  @media(min-width:900px){         /* 노션식 오른쪽 패널 — 왼쪽 목록이 계속 보인다 */
    .panel{top:0;bottom:0;right:0;width:clamp(440px,44vw,600px);
      transform:translateX(103%);box-shadow:-16px 0 50px rgba(45,42,62,.18)}
  }
  .panel.on{transform:none}
  .panel[hidden]{display:none}

  .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:9px auto 2px;flex:0 0 auto}
  @media(min-width:900px){.grab{display:none}}
  /* 제목/부제 헤더 삭제 — 종이가 맨 위. 닫기 단추만 우상단에 띄운다 */
  .pclose{position:absolute;top:12px;right:14px;z-index:6;
    width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
    background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;color:var(--dim);transition:.16s;
    box-shadow:0 3px 10px rgba(45,42,62,.12)}
  .pclose:hover{background:#fff;color:var(--ui)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* min-height:0 이 없으면 flex 기본값(auto) 때문에 본문이 줄어들지 않아 아래 띠가 밀린다 */
  .pbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 26px}

  .stagewrap{position:relative}
  .stage{position:relative;width:100%;aspect-ratio:210/297;background:var(--paper);
    border:1px solid var(--line2);border-radius:5px;overflow:hidden;
    box-shadow:0 14px 40px rgba(45,42,62,.18);touch-action:pan-y}
  .stage img{width:100%;height:100%;object-fit:contain}
  .stage .miss{display:flex;height:100%;align-items:center;justify-content:center;
    font-size:13px;color:var(--faint);text-align:center;padding:24px;line-height:1.8}
  .stage.card-mode{width:min(360px,86%);aspect-ratio:63/88;margin:2px auto 0;
    background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none}
  .stage.card-mode>img{display:none}
  .card-view{width:100%;height:100%}
  .card-view[hidden]{display:none}
  .detail-card{width:100%;height:100%;aspect-ratio:63/88;
    background:#fff;border:1px solid var(--line2);border-radius:16px;
    box-shadow:0 16px 42px rgba(45,42,62,.17);overflow:hidden}
  .detail-card .pc-inner{width:100%;height:100%;padding:9.5% 8% 8%;
    display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
  .detail-card .pc-label{font-family:'Gowun Dodum',sans-serif;font-size:13px;color:var(--card-ink,var(--ink));
    letter-spacing:.2em;margin-right:-.2em;white-space:nowrap}
  .detail-card .pc-artbox{width:48%;margin:8% auto 6%}
  .detail-card .pc-question{font-family:'Gowun Batang',serif;font-size:18px;line-height:1.48;
    color:var(--card-ink,var(--ink));word-break:keep-all}
  .detail-card .pc-sub{font-family:'Nanum Myeongjo',serif;font-size:13px;line-height:1.48;
    color:var(--card-ink,var(--ink));margin-top:auto;word-break:keep-all}
  .detail-card.word-card .pc-country{font-family:'Gowun Dodum',sans-serif;font-size:12px;color:var(--card-ink,var(--ink));margin-top:5%}
  .detail-card.word-card .pc-word{font-family:'Gowun Batang',serif;font-size:25px;line-height:1.08;color:var(--card-ink,var(--ink));margin-top:3%}
  .detail-card.word-card .pc-pron{font-family:'Gowun Dodum',sans-serif;font-size:11px;color:var(--card-ink,var(--ink));margin-top:2%}
  .detail-card.word-card .pc-meaning{font-family:'Nanum Myeongjo',serif;font-size:14px;line-height:1.45;color:var(--card-ink,var(--ink));margin-top:6%;word-break:keep-all}
  .detail-card.word-card .pc-question{font-family:'Nanum Myeongjo',serif;font-size:14px;line-height:1.45;margin-top:auto}
  @media(max-width:420px){
    .stage.card-mode{width:min(330px,88%)}
    .detail-card .pc-question{font-size:16px}
    .detail-card.word-card .pc-word{font-size:22px}
  }

  .arw{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;
    border:1px solid var(--line);background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 6px 18px rgba(45,42,62,.14);display:flex;align-items:center;justify-content:center;
    color:var(--ui);transition:.16s}
  .arw:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
  .arw.l{left:8px} .arw.r{right:8px}
  .arw[disabled]{opacity:0;pointer-events:none}

  .pager{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;min-height:10px}
  .dot{width:7px;height:7px;border-radius:50%;border:none;padding:0;background:var(--line);transition:.18s}
  .dot.on{background:var(--ink);transform:scale(1.3)}
  .pnum{font-family:'Gowun Dodum',sans-serif;font-size:11.5px;color:var(--faint);margin-left:6px}
  .cardrail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 8px 2px;
    margin:0 auto;max-width:100%;scroll-padding-inline:8px}
  .cardrail[hidden]{display:none}
  .cardrail::-webkit-scrollbar{display:none}
  .cardpick{flex:0 0 auto;width:42px;aspect-ratio:63/88;border:none;background:#fff;border-radius:7px;
    border:1px solid var(--line2);box-shadow:0 3px 9px rgba(45,42,62,.09);
    padding:5px 4px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
  .cardpick.on{box-shadow:0 0 0 2px var(--card-ink,var(--ink)),0 3px 9px rgba(45,42,62,.13)}
  .cardpick .mk{font-family:'Gowun Dodum',sans-serif;font-size:6px;color:var(--card-ink,var(--ink));
    letter-spacing:.08em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .cardpick .ma{width:46%;aspect-ratio:1;margin-top:5px}
  .cardpick .ma img,.mini-card .ma img{width:100%;height:100%;object-fit:contain}
  .cardpick .mq{width:82%;height:2px;border-radius:2px;background:rgba(44,42,38,.18);margin-top:auto}

  /* Grace 승인 정본 이미지 덱은 한 버전만 운영하고, 핵심 문구만 Bold 처리한다. */
  .styles{margin-top:14px}
  .styles[hidden]{display:none}
  .strow{display:flex;gap:8px}
  .sbtn{flex:1;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 8px;
    text-align:center;transition:.16s}
  .sbtn b{display:block;font-size:13px;font-weight:600}
  .sbtn.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .sbtn:disabled{opacity:.5;cursor:default}

  /* 도구 3개 = 종이(또는 디자인 버튼) 바로 밑, 가운데 동그란 아이콘 버튼만
     (메이플 뷰어 세부 페이지식 · 텍스트 없이 자리 절약, Grace 2026-07-24) */
  .pacts{display:flex;gap:16px;margin-top:16px;justify-content:center}
  .tool{width:54px;height:54px;flex:0 0 auto;padding:0;border:1px solid var(--line);background:#fff;
    border-radius:999px;display:flex;align-items:center;justify-content:center;
    transition:.16s;text-decoration:none;color:var(--ui)}
  .tool:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(45,42,62,.12)}
  .tool:active{transform:scale(.95)}
  .tool.main{background:var(--ink);border-color:var(--ink);color:#fff}
  .tool svg{width:21px;height:21px}

  /* 다른 활동지 보기 — 스크롤 흐름 안(고정 아님)이라 버튼을 가리지 않고 잘리지 않는다.
     썸네일은 그림만(이름표 없음) — 선택해서 보면 된다(Grace 2026-07-24). */
  .pstrip{margin-top:24px;border-top:1px solid var(--line2);padding-top:16px}
  .pstrip .lb{font-family:'Gowun Dodum',sans-serif;font-size:10px;letter-spacing:.22em;
    margin-right:-.22em;color:var(--faint);padding:0 2px 10px}
  /* 좌우 여백 — 선택 테두리(ring)가 스크롤 끝에서 안 잘리게(Grace 2026-07-24, 왼쪽 잘림 수정) */
  .srow{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:5px 8px 7px;
    scroll-padding-inline:8px}
  .srow::-webkit-scrollbar{display:none}
  .sthumb{flex:0 0 auto;width:56px;border:none;background:none;padding:0}
  .sthumb .im{display:block;width:56px;height:79px;border-radius:5px;border:1px solid var(--line2);
    background:var(--paper) center top/cover no-repeat;
    box-shadow:0 3px 10px rgba(45,42,62,.10);transition:.16s}
  .sthumb .mini-card{display:flex;width:56px;height:79px;border-radius:7px;border:1px solid var(--line2);
    background:#fff;box-shadow:0 3px 10px rgba(45,42,62,.10);transition:.16s;
    flex-direction:column;align-items:center;overflow:hidden;padding:7px 5px}
  .mini-card .mk{font-family:'Gowun Dodum',sans-serif;font-size:7px;color:var(--card-ink,var(--ink));
    letter-spacing:.1em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .mini-card .ma{width:45%;aspect-ratio:1;margin-top:7px}
  .mini-card .mq{width:80%;height:2px;border-radius:2px;background:rgba(44,42,38,.18);margin-top:auto}
  .sthumb.on .im{box-shadow:0 0 0 2px var(--ink),0 3px 10px rgba(45,42,62,.14)}
  .sthumb.on .mini-card{box-shadow:0 0 0 2px var(--card-ink,var(--ink)),0 3px 10px rgba(45,42,62,.14)}
  .sthumb:hover .im{transform:translateY(-2px)}
  .sthumb:hover .mini-card{transform:translateY(-2px)}

  /* ══════ 우하단 고정 버튼 (와그작 블로그와 동일 규격) ══════ */
  .fab{position:fixed;right:max(16px,env(safe-area-inset-right));
    bottom:max(18px,env(safe-area-inset-bottom));z-index:400;
    display:flex;flex-direction:column;align-items:flex-end;gap:8px;
    opacity:0;pointer-events:none}
  .fbtn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
    border-radius:999px;color:#2d2a3e;background:rgba(255,255,255,.88);
    border:1px solid rgba(45,42,62,.1);
    box-shadow:0 12px 32px rgba(45,42,62,.16),0 2px 8px rgba(45,42,62,.08);
    text-decoration:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    touch-action:manipulation;padding:0;
    transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease}
  .fbtn:hover{transform:translateY(-2px);background:rgba(255,255,255,.96)}
  .fbtn:active{transform:scale(.96)}
  .fbtn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .fem{font-size:23px;line-height:1;display:flex;align-items:center;justify-content:center}
  .fbtn.back .fem{font-size:25px;transform:translateX(-1px)}
  .fbtn.share .fem{transform:translate(1px,-1px)}
  .fstat{position:absolute;right:60px;bottom:60px;max-width:min(220px,calc(100vw - 96px));
    padding:8px 10px;border-radius:999px;color:#2d2a3e;background:rgba(255,255,255,.94);
    box-shadow:0 8px 24px rgba(45,42,62,.14);font-size:12px;font-weight:800;line-height:1.2;
    pointer-events:none;white-space:nowrap;opacity:0;transform:translateY(4px);
    transition:opacity .16s ease,transform .16s ease}
  .fstat:not(:empty){opacity:1;transform:translateY(0)}
  /* 패널이 열리면 고정 버튼이 패널 위 도구를 가리지 않게 왼쪽으로 비킨다(PC) */
  body.open .fab{opacity:1;pointer-events:auto}
  @media(min-width:900px){ body.open .fab{right:calc(clamp(440px,44vw,600px) + 18px)} }
  @media(max-width:899px){ body.open .fab{opacity:0;pointer-events:none} }
  .fab{transition:right .34s cubic-bezier(.22,.61,.36,1),opacity .2s ease}

  @media (prefers-reduced-motion:reduce){
    .aurora .blob{animation:none}.aurora .parallax{transition:none}
    .fbtn,.fstat,.pg,.tool,.stage img,.panel,.fab{transition:none}
    .fbtn:hover,.fbtn:active,.card:hover .pg{transform:none}
  }
  #printFrame{position:fixed;width:0;height:0;border:0;visibility:hidden}