/* 테실 앱 스타일 — index.html 인라인 <style> 에서 분리(2026-07-13).
   홈(/tesil/)과 이미지 편집(/tesil/edit/) 두 페이지가 같은 앱 셸을 쓴다 — 바구니·독·슬롯 팝업·만들기 모달이 똑같다.
   인라인으로 두면 페이지마다 415줄이 복제돼 한쪽만 고치는 사고가 반드시 난다.
   ⚠ 범용 규칙(버튼·헤더·푸터·법률페이지)은 base.css — 여긴 앱(조각 고르기·편집기·미리보기) 전용이다. */
    body{padding-bottom:78px}
    .site-head{position:sticky;top:0;z-index:50;background:#FFF8F4;border-bottom:1px solid var(--line)}
    .head-in{display:flex;align-items:center;justify-content:space-between;height:60px}
    .brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:1.28rem;color:var(--ink)}
    .brand .mark{width:30px;height:30px;border-radius:9px;background:var(--aurora);display:grid;place-items:center;box-shadow:var(--shadow-sm);flex:none}
    .brand .mark svg{width:17px;height:17px}
    .head-nav{display:flex;gap:4px;align-items:center}
    .head-nav a{padding:8px 12px;border-radius:var(--r-pill);font-size:.94rem;font-weight:600;color:var(--ink-soft)}
    .head-nav a:hover{color:var(--rose-deep);background:var(--cream-2)}
    .head-nav .cta{color:#fff;background:var(--aurora);box-shadow:var(--shadow-sm)}
    .head-nav .nav-hide{display:none}
    @media(min-width:640px){.head-nav .nav-hide{display:inline-flex}}
    /* 사용법·EN 은 조각 고르기·아티스트와 똑같이 .head-nav a 기본 스타일을 따른다.
       (개별 색·크기·굵기를 덮어쓰지 말 것 — 헤더가 제각각으로 보인다)
       사용법은 nav-hide 를 쓰지 않는다: 설치에 가장 헤매는 게 모바일 사용자인데 640px 아래에서 숨겨진다. */
    .head-nav .nav-guide, .head-nav .nav-lang{white-space:nowrap}
    /* 좁은 화면에선 모든 항목의 여백을 같은 비율로 줄인다 */
    @media(max-width:400px){.head-nav{gap:1px}.head-nav a{padding:8px 8px;font-size:.88rem}.head-nav .cta{padding:8px 11px}}

    .hero{padding:34px 0 8px}
    .hero-grid{display:grid;gap:30px}
    @media(min-width:860px){.hero-grid{grid-template-columns:1.04fr .96fr;align-items:center;gap:48px}}
    .eyebrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.84rem;color:var(--lav-deep);background:#fff;border:1.5px solid var(--line);padding:6px 13px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm)}
    .hero h1{font-size:clamp(2.05rem,7.2vw,3.15rem);margin:16px 0 12px}
    .hero h1 .hl{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero .lead{font-size:1.08rem;color:var(--ink-soft);max-width:44ch}
    .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
    .hero-meta{margin-top:20px;color:var(--ink-soft);font-size:.85rem;display:flex;gap:9px 18px;flex-wrap:wrap;align-items:center}
    .hero-meta b{color:var(--ink)}
    .dot{width:4px;height:4px;border-radius:50%;background:var(--rose)}

    .stage{display:flex;flex-direction:column;align-items:center}
    .phone{width:min(304px,82vw);border-radius:36px;background:#fff;padding:12px;border:1px solid rgba(255,255,255,.8);box-shadow:0 34px 66px rgba(139,111,232,.22),0 8px 22px rgba(242,103,138,.16)}
    .chat{--t-bg:linear-gradient(160deg,#FFE3EC,#EBE3FF);--t-in:#fff;--t-in-text:#3a2f36;--t-out:#FF9EB5;--t-out-text:#fff;--t-bar:rgba(255,255,255,.72);--t-bar-text:#5a4a52;
      border-radius:26px;overflow:hidden;background:var(--t-bg);display:flex;flex-direction:column;height:440px;transition:background .55s ease}
    .chat-bar{display:flex;align-items:center;gap:9px;padding:13px 15px;background:var(--t-bar);color:var(--t-bar-text);font-weight:700;font-size:.92rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
    .chat-bar .bk{opacity:.55;font-weight:400}
    .chat-bar .rm{flex:1}
    .chat-body{flex:1;padding:16px 13px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
    .day{align-self:center;font-size:.68rem;color:var(--t-bar-text);opacity:.7;background:var(--t-bar);padding:3px 12px;border-radius:999px;margin-bottom:2px}
    .msg{max-width:76%;padding:6px 10px;font-size:.62rem;line-height:1.42}
    .msg.in{align-self:flex-start;background:var(--t-in);color:var(--t-in-text);border-radius:16px 16px 16px 5px;box-shadow:0 2px 7px rgba(0,0,0,.06)}
    .msg.out{align-self:flex-end;background:var(--t-out);color:var(--t-out-text);border-radius:16px 16px 5px 16px}
    /* 실제 말풍선 이미지(.ktheme) — 9-patch(border-image)로 새싹·테두리·스티치 보존 */
    .chat.bimg-in .msg.in{background:transparent;box-shadow:none;border-radius:0;border:10px solid transparent;border-image:var(--t-in-img) 40 fill/10px/0 stretch;padding:0 1px;min-width:34px;text-align:center}
    .chat.bimg-out .msg.out{background:transparent;border-radius:0;border:10px solid transparent;border-image:var(--t-out-img) 40 fill/10px/0 stretch;padding:0 1px;min-width:34px;text-align:center}
    /* 커스텀 업로드 말풍선(9-slice 가이드 없음) — 이미지를 늘려 채움(실제 테마에서도 이렇게 적용됨) */
    .chat.bimg-in-cust .msg.in{background:var(--t-in-img) center/100% 100% no-repeat;box-shadow:none}
    .chat.bimg-out-cust .msg.out{background:var(--t-out-img) center/100% 100% no-repeat}
    .swatches{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;max-width:320px}
    .swatch{width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.14);cursor:pointer;transition:transform .15s;padding:0}
    .swatch:hover{transform:scale(1.14)}
    .swatch[aria-pressed="true"]{outline:2.5px solid var(--lav-deep);outline-offset:2px}
    .preview-label{text-align:center;margin-top:14px}
    .preview-label .nm{font-family:var(--font-display);font-size:1.08rem}
    .preview-label .ar{color:var(--ink-soft);font-size:.82rem;margin-top:2px}
    .ig{display:inline-flex;align-items:center;vertical-align:-3px;color:var(--rose-deep);border-radius:6px;transition:.15s}
    .ig:hover{transform:scale(1.14)}
    .socials{display:inline-flex;gap:6px;margin-left:6px;vertical-align:-2px}
    .s-instagram:hover{color:#E1306C}.s-threads:hover{color:var(--ink)}.s-youtube:hover{color:#FF0000}

    .sec{padding:34px 0}
    .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
    .sec-head h2{font-size:clamp(1.5rem,4.6vw,2rem)}
    .sec-head .sub{color:var(--ink-soft);font-size:.95rem;margin-top:4px}
    .sec-head .more{font-weight:700;font-size:.9rem;color:var(--rose-deep);border:1.5px solid var(--line);background:var(--card);padding:9px 15px;border-radius:var(--r-pill)}
    .sec-head .more:hover{border-color:var(--rose)}
    .hand{font-family:var(--font-hand);color:var(--rose-deep)}

    .lib-tabs{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 12px}
    .tab{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;line-height:1.2;border-radius:var(--r-pill);font-weight:700;font-size:.8rem;background:var(--card);color:var(--ink-soft);border:1.5px solid var(--line);cursor:pointer;white-space:nowrap;transition:.15s}
    .tab:hover{border-color:var(--rose);color:var(--rose-deep)}
    .tab[aria-pressed="true"]{background:var(--aurora);color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
    .tab.tab-fav[aria-pressed="true"]{background:linear-gradient(135deg,#FFD86B,#FFB84D);color:#5a3e00}
    .tab .cnt{font-size:.68rem;opacity:.75;font-weight:600}
    /* 카테고리 정규 사이즈 안내 (탭 아래) */
    .cat-desc{color:var(--ink-soft);font-size:.82rem;line-height:1.5;margin:0 2px 10px;display:flex;align-items:center;gap:6px}
    .cat-desc::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--rose);flex:none}
    .cat-desc:empty{display:none}
    /* 카테고리별 추가 안내(말풍선 9-slice 등) */
    .cat-note{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;margin:0 0 14px;font-size:.82rem;line-height:1.6;color:var(--ink-soft)}
    .cat-note[hidden]{display:none}
    .cat-note b{color:var(--ink)}
    .cat-note .cn-t{display:block;font-weight:700;color:var(--rose-deep);margin-bottom:3px}
    .cat-note .cn-nine{display:inline-grid;grid-template-columns:repeat(3,7px);grid-auto-rows:7px;gap:2px;vertical-align:-9px;margin:0 5px}
    .cat-note .cn-nine i{width:7px;height:7px;border:1px solid var(--rose);display:block;box-sizing:border-box}
    .cat-note .cn-nine i.mid{background:var(--rose-deep);border-color:var(--rose-deep)}

    /* ── 이미지 편집기 ── 캔버스는 카테고리 권장 크기의 '비율'로 고정(aspect-ratio 를 JS 가 넣는다).
       비율만 고정하고 래스터는 JS 가 축소해 그리므로, 화면 크기와 무관하게 결과가 같다. */
    .editor{display:grid;grid-template-columns:1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin:0 0 22px;box-shadow:var(--shadow-sm)}
    @media(min-width:720px){.editor{grid-template-columns:minmax(0,1fr) 260px;align-items:start}}
    /* 세로형 캔버스는 높이로 잡아야 한다 — 폭으로 잡으면 1080×2340 이 화면을 넘어간다.
       모바일은 캔버스 아래 조작부까지 한 화면에 들어오도록 46vh 로 조인다. */
    .ed-stage{position:relative;aspect-ratio:1080/2340;max-height:min(46vh,420px);margin:0 auto;border-radius:var(--r);overflow:hidden;background:var(--cream-2);border:1px solid var(--line);touch-action:none;cursor:grab}
    @media(min-width:720px){.ed-stage{max-height:420px}}
    .ed-stage.grabbing{cursor:grabbing}
    /* 투명 배경(말풍선·아이콘)은 체크무늬로 — 흰 여백과 구분이 안 되면 사람이 헷갈린다 */
    .ed-stage.alpha{background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 50%/16px 16px}
    .ed-stage canvas{display:block;width:100%;height:100%;object-fit:contain}
    .editor:not(.has-img) .ed-stage canvas{opacity:0}
    .ed-drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:linear-gradient(135deg,#FFF6FA,#F1ECFF);cursor:pointer;font:inherit;color:var(--ink);transition:background .15s}
    .ed-drop:hover,.ed-stage.dragover .ed-drop{background:linear-gradient(135deg,#FFE9F2,#E9E1FF)}
    .editor.has-img .ed-drop{display:none}
    .ed-plus{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.7rem;line-height:1;color:var(--rose-deep);box-shadow:var(--shadow-sm)}
    .ed-drop .ed-t{font-weight:800;font-size:1rem}
    .ed-drop .ed-s{font-size:.76rem;color:var(--ink-soft)}
    .ed-side{display:flex;flex-direction:column;gap:10px;min-width:0}
    .ed-spec{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
    .ed-cat{font-family:var(--font-display);font-size:1.02rem;color:var(--ink)}
    .ed-px{font-size:.74rem;font-weight:700;color:var(--rose-deep);background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap}
    .ed-zoom{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--ink-soft)}
    .ed-zoom .ez-l{flex:none;font-weight:700}
    .ed-zoom input{flex:1;min-width:0;accent-color:var(--rose-deep)}
    .ed-zoom input:disabled{opacity:.4}
    .ed-btns{display:flex;gap:6px;flex-wrap:wrap}
    .ed-btns .btn{flex:1;min-width:78px;padding:7px 8px;font-size:.8rem}
    /* 누끼 = 편집기의 간판 기능이자 유일한 서버 왕복(rembg). 시간이 걸리니 진행 상태를 버튼 안에서 보여준다.
       ⚠ .btn 만으로는 배경·테두리가 없다(색은 .btn-primary/.btn-ghost 가 준다) → 여기서 직접 다 준다.
          안 그러면 버튼이 아니라 맨 텍스트로 보인다. 실제로 그 사고가 났다. */
    .ed-cut{width:100%;justify-content:flex-start;gap:10px;padding:10px 14px;cursor:pointer;
      background:linear-gradient(135deg,#F3ECFF,#FFE9F3);border:1.5px solid var(--lav);color:var(--ink);
      border-radius:var(--r);box-shadow:var(--shadow-sm);text-align:left;white-space:normal}
    .ed-cut .ec-ico{flex:none;width:32px;height:32px;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:1rem;box-shadow:var(--shadow-sm)}
    .ed-cut .ec-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
    .ed-cut .ec-tx b{font-size:.92rem;font-weight:800}
    .ed-cut .ec-tx em{font-style:normal;font-size:.72rem;color:var(--ink-soft);font-weight:600}
    .ed-cut:hover:not(:disabled){border-color:var(--rose-deep);box-shadow:var(--shadow);transform:translateY(-1px)}
    .ed-cut:disabled{opacity:.45;cursor:default;box-shadow:none}
    /* 처리 중 — 가위가 움직여서 '멈춘 게 아니라 일하는 중'이라는 걸 보이게 한다(서버 왕복 2~3초) */
    .ed-cut.busy{pointer-events:none}
    .ed-cut.busy .ec-ico{animation:ec-snip .7s ease-in-out infinite}
    @keyframes ec-snip{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
    @media(prefers-reduced-motion:reduce){.ed-cut.busy .ec-ico{animation:none}}
    .ed-opts{display:flex;gap:12px;flex-wrap:wrap}
    .ed-chk{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--ink-soft);cursor:pointer;user-select:none}
    .ed-chk input{accent-color:var(--rose-deep);margin:0}
    /* 원본이 권장 크기보다 작으면 늘려 쓰는 것 — 조용히 뭉개지 말고 배율을 그대로 보여준다 */
    .ed-warn{font-size:.74rem;line-height:1.5;margin:0;padding:7px 10px;border-radius:var(--r);background:#FFF6E5;border:1px solid #F3DFB4;color:#7a5a12}
    .ed-warn[hidden]{display:none}
    .ed-hint{font-size:.76rem;color:var(--ink-soft);line-height:1.5;margin:0}
    .ed-add{width:100%;margin-top:2px}
    .ed-note{font-size:.7rem;color:var(--ink-soft);opacity:.8;line-height:1.45;margin:0;text-align:center}
    .editor[hidden]{display:none}

    /* 하단 조각 스트립 — 편집기가 메인이고, 기존 조각은 한 줄로 깐다. '전체 보기'로 격자 전환. */
    /* scroll-margin — 상단 헤더가 sticky 라, 앵커로 뛰면 제목이 헤더 밑에 깔린다 */
    .strip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px;scroll-margin-top:70px}
    .strip-head h3{font-family:var(--font-display);font-size:1.06rem;margin:0;color:var(--ink)}
    .strip-head[hidden]{display:none}
    .strip-view{border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);border-radius:var(--r-pill);padding:3px 11px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.15s}
    .strip-view:hover{border-color:var(--rose);color:var(--rose-deep)}
    .strip-view[aria-pressed="true"]{background:var(--aurora);color:#fff;border-color:transparent}

    .assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
    @media(min-width:560px){.assets{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}}
    /* 한 줄 스트립: 가로 스크롤 + 스냅. 카드 내용(아티스트·하트·즐겨찾기)은 격자와 동일하게 유지한다. */
    /* 다음 배치를 당겨오는 트리거. 격자 '밖'(형제)에 둔다 — 안에 넣으면 격자 칸을 하나 차지한다. */
    .grid-sentinel{height:1px}
    .assets.is-strip{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 12px;gap:12px;-webkit-overflow-scrolling:touch}
    .assets.is-strip>.acard{flex:0 0 156px;scroll-snap-align:start}
    @media(min-width:560px){.assets.is-strip>.acard{flex:0 0 176px}}
    .assets.is-strip>.acard:hover{transform:none}   /* 가로 스크롤 중 카드가 떠오르면 스냅이 어긋난다 */
    .fav-gt{grid-column:1/-1;font-family:var(--font-display);font-size:1.06rem;color:var(--ink);margin:2px 2px -2px;display:flex;align-items:center;gap:8px}
    .fav-gt:not(:first-child){margin-top:16px}
    .fav-gt .fg-n{font-size:.8rem;color:var(--ink-soft);font-weight:600}
    .acard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .2s;box-shadow:var(--shadow-sm);content-visibility:auto;contain-intrinsic-size:0 280px}
    .acard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .acard.on{border-color:var(--rose);box-shadow:0 0 0 2px var(--rose) inset,var(--shadow)}
    .ac-fav{position:absolute;top:8px;right:8px;z-index:4;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
      background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(74,59,69,.16);
      color:var(--ink-soft);cursor:pointer;transition:transform .12s ease,color .15s,background .15s}
    .ac-fav svg{fill:none;stroke:currentColor;stroke-width:1.9}
    .ac-fav:hover{transform:scale(1.12);color:var(--rose-deep)}
    .ac-fav.on{color:#F5B301;background:#FFF7E0}
    .ac-fav.on svg{fill:currentColor;stroke:currentColor}
    .ac-fav:active{transform:scale(.9)}
    .ac-prev{height:118px;background-size:cover;background-position:center;position:relative}
    /* 리소스 실측 크기 배지 (프리뷰 하단) — JS가 이미지 원본 px를 채움 */
    /* backdrop-filter 를 쓰지 마라 — 이 뱃지는 카드마다 하나씩 붙는다(수십 개).
       그때마다 합성 레이어가 하나씩 생겨 스크롤이 무거워진다. 배경이 이미 62% 불투명이라
       blur(2px) 는 눈에 띄지도 않았다. 대비가 부족하면 배경 알파를 올려라. */
    .ac-dim{position:absolute;left:6px;bottom:6px;z-index:2;font-size:.66rem;font-weight:700;line-height:1;letter-spacing:.02em;color:#fff;background:rgba(28,24,32,.68);padding:3px 6px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s}
    .ac-dim.on{opacity:1}
    .ac-dim.warn{background:rgba(180,70,90,.82)}
    .ac-prev.bub{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:15px;background:#f3eef1}
    .ac-prev.bub .bm{max-width:82%;padding:7px 11px;font-size:.78rem;line-height:1.3}
    .ac-prev.bub .bm.in{align-self:flex-start;border-radius:13px 13px 13px 4px}
    .ac-prev.bub .bm.out{align-self:flex-end;border-radius:13px 13px 4px 13px}
    .ac-prev.bub .bm.img{background:transparent;border-radius:0;border:10px solid transparent;border-image:var(--bi) 40 fill/10px/0 stretch;padding:0 1px;min-width:30px;text-align:center}
    .lb-bubs{display:flex;gap:14px;align-items:center;justify-content:center;padding:10px}
    .lb-bubs img{width:132px;height:auto;image-rendering:auto}
    .ac-prev.ico{display:flex;align-items:center;justify-content:center;background:#fff}
    .ac-prev.ico img{width:74px;height:74px;object-fit:contain}
    /* 업로드 칸 (내 파일 → 이 브라우저에만) */
    .upload-card{position:relative;background:linear-gradient(135deg,#FFF6FA,#F1ECFF);border:2px dashed var(--rose);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;min-height:214px;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;padding:16px}
    .upload-card:hover{background:linear-gradient(135deg,#FFE9F2,#E9E1FF);border-color:var(--rose-deep);transform:translateY(-3px)}
    .uc-inner{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
    .uc-plus{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.7rem;line-height:1;color:var(--rose-deep);box-shadow:var(--shadow-sm)}
    .uc-t{font-weight:800;font-size:.98rem;color:var(--ink)}
    .uc-s{font-size:.74rem;color:var(--ink-soft);line-height:1.45;max-width:17ch}
    .acard-custom{border-color:var(--lav)}
    .acard-custom .who-me{color:var(--lav-deep);font-weight:700}
    .btn-del{color:var(--ink-soft)}
    .btn-del:hover{color:#e0555f;border-color:#f3b0b5}
    .ac-info{padding:11px 13px 13px;display:flex;flex-direction:column;gap:2px}
    .ac-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
    .ac-nm{font-weight:700;font-size:.94rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ac-by{color:var(--ink-soft);font-size:.76rem;display:flex;align-items:center;flex-wrap:wrap}
    .ac-by a.who{color:var(--ink-soft)}
    .ac-by a.who:hover{color:var(--rose-deep);text-decoration:underline}
    .ac-socials{margin-top:7px;min-height:20px}
    .ac-socials .socials{margin-left:0}
    .ac-prev[data-zoom]{cursor:zoom-in}
    .ac-hearts{display:inline-flex;align-items:center;gap:5px;color:var(--rose-deep);font-weight:700;font-size:.85rem;flex:none}
    .ac-hearts svg{width:15px;height:15px;fill:var(--rose);stroke:var(--rose)}
    .ac-actions{display:flex;gap:7px;margin-top:10px}
    .ac-actions .btn{flex:1;padding:8px 8px;font-size:.83rem}
    /* image lightbox (원본 이미지 팝업) */
    .lb{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:20px}
    .lb[hidden]{display:none}
    .lb-bg{position:absolute;inset:0;background:rgba(74,59,69,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
    .lb-card{position:relative;max-width:420px;width:100%;text-align:center}
    .lb-img img{width:100%;max-height:78vh;object-fit:contain;display:block;background:#fff;border-radius:var(--r-lg)}
    .lb-cap{color:#fff;margin-top:12px;font-weight:700}
    .lb-x{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);border:none;font-size:1.1rem;cursor:pointer}

    .empty{grid-column:1/-1;text-align:center;padding:44px 20px;background:var(--card);border:1.5px dashed var(--line);border-radius:var(--r-lg);color:var(--ink-soft)}
    .empty .em{font-size:2rem;display:block;margin-bottom:8px}
    .empty b{color:var(--ink);display:block;margin-bottom:4px;font-family:var(--font-display);font-size:1.1rem}

    .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#FFF8F4;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(242,103,138,.10)}
    .dock-in{max-width:var(--wrap);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}
    .dock-info{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem}
    .dock-basket{margin-left:auto;padding:9px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--card);font-weight:600;font-size:.9rem;color:var(--ink-soft);cursor:pointer}
    .dock-basket:hover{color:var(--rose-deep);border-color:var(--rose)}
    .dock-make{padding:11px 20px;font-size:.98rem}
    @media(max-width:520px){.dock-in{gap:7px}.dock-info{font-size:.82rem;gap:5px}.dock-basket{margin-left:auto;padding:8px 11px;font-size:.82rem}.dock-make{padding:10px 15px;font-size:.9rem}}

    .sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
    .sheet[hidden]{display:none}
    .sheet-bg{position:absolute;inset:0;background:rgba(74,59,69,.4)}
    .sheet-card{position:relative;width:100%;max-width:520px;background:var(--cream);border-radius:24px 24px 0 0;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -20px 50px rgba(0,0,0,.2);animation:slideUp .28s ease}
    @keyframes slideUp{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
    .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px;flex:none}
    .sheet-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 20px 4px}
    .sheet-foot{flex:none;padding:12px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--cream)}
    .sheet-foot[hidden]{display:none}
    .sheet-foot .btn{width:100%;margin:0}
    .sheet-head h3{font-size:1.25rem}
    .xbtn{width:34px;height:34px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;font-size:1.1rem;color:var(--ink-soft);cursor:pointer;border:none}
    .sheet-head-acts{display:flex;align-items:center;gap:8px}
    .xbtn-reset:hover{color:#e0555f;background:#FFEDEE}
    .xbtn-reset svg{display:block}
    .slot{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
    .slot-ic{width:24px;text-align:center;font-size:1.1rem;flex:none}
    .slot-thumb{width:44px;height:44px;border-radius:11px;background-size:cover;background-position:center;background-color:var(--cream-2);border:1px solid var(--line);flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
    .slot-thumb img{width:100%;height:100%;object-fit:contain}
    .slot-txt{flex:1;min-width:0}
    .slot-txt .st-cat{font-size:.76rem;color:var(--ink-soft)}
    .slot-txt .st-nm{font-weight:700;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .slot-txt .st-empty{color:var(--ink-soft);font-weight:500}
    .slot-act{font-size:.82rem;font-weight:700;color:var(--rose-deep);background:none;border:none;cursor:pointer;padding:6px 8px;flex:none}
    .sheet-make{width:100%;padding:14px;font-size:1.05rem}

    .reveal{position:fixed;inset:0;z-index:100;display:flex;align-items:safe center;justify-content:center;padding:20px;overflow:auto;overscroll-behavior:contain}
    .reveal[hidden]{display:none}
    /* 모달 열릴 때 뒤 홈화면 스크롤 잠금(스크롤 위치 보존 — iOS 포함) */
    body.modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
    .reveal-bg{position:absolute;inset:0;background:rgba(74,59,69,.55);backdrop-filter:blur(3px)}
    .reveal-card{position:relative;width:100%;max-width:360px;max-height:100%;display:flex;flex-direction:column;text-align:center;animation:pop .45s cubic-bezier(.2,1.3,.5,1)}
    .reveal-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
    .reveal-foot{flex:none;margin-top:8px;padding:12px 0 calc(2px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(60,48,56,.97),rgba(60,48,56,.9) 55%,rgba(60,48,56,0))}
    @keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
    .pop{font-family:var(--font-display);font-size:2.3rem;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.2)}
    .pop span{display:inline-block;animation:spin 1.2s ease}
    @keyframes spin{from{transform:rotate(-25deg) scale(.6)}to{transform:none}}
    .reveal-sub{color:rgba(255,255,255,.94);font-size:.98rem;margin:2px 0 16px}
    .reveal-phone{margin:0 auto}
    .rrow{display:flex;align-items:flex-end;gap:6px}
    .ravatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;margin-bottom:2px;border:1px solid rgba(255,255,255,.6)}
    /* ── 미리보기 화면 전환 ── */
    .pv-tabs{display:flex;gap:6px;justify-content:center;margin:0 0 12px;flex-wrap:wrap}
    .pv-tab{padding:6px 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.9);font-size:.8rem;font-weight:700;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
    .pv-tab.is-on{background:var(--aurora);color:#fff;border-color:transparent}
    .pv-screen{border-radius:26px;overflow:hidden}
    .pv-tabbar{display:flex;justify-content:space-around;align-items:center;padding:8px 10px;background:rgba(255,255,255,.6);flex:0 0 auto}
    .pv-tabbar img{height:26px;width:26px;object-fit:contain}
    .pv-tabbar .ic-empty{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.06);display:inline-block}
    .hm-list{flex:1;overflow:hidden;padding:6px 0}
    .hm-row{display:flex;align-items:center;gap:10px;padding:8px 14px}
    .hm-av{width:38px;height:38px;border-radius:13px;object-fit:cover;flex:none}
    .hm-av-e{background:rgba(255,255,255,.55)}
    .hm-tx{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;text-align:left}
    .hm-tx b{font-size:.88rem;color:var(--t-bar-text)}.hm-tx span{font-size:.76rem;color:var(--t-bar-text);opacity:.68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .pv-inputbar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--t-bar);color:var(--t-bar-text);flex:0 0 auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
    .pv-inph{flex:1;background:rgba(255,255,255,.55);border-radius:999px;padding:6px 12px;font-size:.79rem;opacity:.8}
    .pv-send{font-size:.82rem;font-weight:700;opacity:.85;flex:none}
    .lk-wrap,.sp-wrap{height:440px;display:flex;flex-direction:column;background-size:cover;background-position:center}
    /* ⚠ 잠금 배경은 화면 '전체'가 아니라 키패드 위쪽(≈상단 60%)까지만 깔린다 — 그래서 배경 이미지는
       .lk-wrap 이 아니라 .lk-top 에 붙인다. 아래 키패드·패턴 영역은 배경 아래쪽 평균색으로 이어 붙인다
       (실제 테마의 theme_passcode_keypad_background_color = passBgBot 과 같은 규칙). */
    /* 60/40 은 실측 비율이다 — 키패드 높이에 따라 흘러가게 두면 미리보기가 실제와 어긋난다. 고정할 것. */
    .lk-top{flex:0 0 60%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding-top:24px;background-size:cover;background-position:center;min-height:0}
    .lk-title{font-size:.9rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.28)}
    .lk-dots{display:flex;gap:15px;align-items:center}
    .lk-dot{width:15px;height:15px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
    .lk-dot img{width:100%;height:100%;object-fit:contain}
    .lk-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:3px 6px;padding:14px 28px calc(20px + env(safe-area-inset-bottom));text-align:center;flex:1;align-content:center;min-height:0}
    .lk-key{font-size:1.12rem;font-weight:600;padding:6px 0}
    .sp-wrap{align-items:center;justify-content:center;position:relative}
    .sp-empty{text-align:center;color:var(--ink-soft);font-size:.88rem;line-height:1.7;opacity:.75}
    .sp-badge{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
    .reveal-list{background:rgba(255,255,255,.94);border-radius:var(--r);margin-top:14px;padding:10px 14px;text-align:left;font-size:.85rem}
    .reveal-list .rl{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:var(--ink-soft);align-items:baseline}
    .reveal-list .rl + .rl{border-top:1px solid var(--line)}
    .reveal-list .rl .rk{flex:none;font-weight:600}
    .reveal-list .rl .rv{text-align:right}
    .reveal-list .rl .rv b{color:var(--ink);font-weight:700}
    .reveal-actions{display:flex;gap:10px;margin-top:12px}
    .reveal-actions .btn{flex:1}
    .reveal-actions .btn-ghost{background:rgba(255,255,255,.9)}
    .reveal-save{margin-top:16px}
    .rs-title{font-family:var(--font-display);font-size:1rem;color:#fff;margin:0 0 10px;text-shadow:0 1px 3px rgba(0,0,0,.25)}
    .rs-plat{display:flex;gap:10px}
    .rs-btn{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;padding:7px 10px;background:rgba(255,255,255,.96);border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,border-color .15s;min-height:0}
    .rs-btn:hover{border-color:var(--rose);transform:translateY(-2px)}
    .rs-btn .rs-ico{font-size:1.2rem;line-height:1}
    .rs-btn .rs-t{font-weight:700;font-size:.92rem;color:var(--ink)}
    .rs-btn .rs-s{font-size:.7rem;color:var(--ink-soft);font-weight:700;letter-spacing:.02em}
    .rs-btn[disabled]{opacity:.65;cursor:progress}
    .rs-note{color:rgba(255,255,255,.92);font-size:.72rem;line-height:1.55;margin:11px 2px 0;text-align:left}
    /* 빌드 완료 후 공유 CTA — share()는 이 버튼의 click 안에서 직접 호출된다(user activation 유지).
       버튼은 위 플랫폼 버튼(.rs-btn)과 같은 규격·같은 2단 배치를 쓴다. */
    .rs-share{margin-top:9px}
    .rs-btn-go{background:var(--rose)}
    .rs-btn-go .rs-t{color:#fff}
    .rs-btn-go .rs-s{color:rgba(255,255,255,.88)}
    .rs-share-note{color:rgba(255,255,255,.92);font-size:.66rem;line-height:1.5;margin:8px 2px 0;text-align:center}
    /* .apk 저장 후 안내 — 사람들이 파일을 어디서 찾을지 몰라 헤매던 지점이다. 토스트로는 부족해 패널로 남긴다. */
    .rs-guide{margin-top:9px;padding:11px 13px;background:rgba(255,255,255,.96);border-radius:var(--r);box-shadow:var(--shadow-sm);text-align:left}
    .rg-t{margin:0 0 7px;font-size:.84rem;font-weight:700;color:var(--ink)}
    .rg-steps{margin:0;padding-left:1.05em;color:var(--ink);font-size:.74rem;line-height:1.65}
    .rg-steps li{margin-bottom:2px}
    .rg-note{margin:8px 0 0;font-size:.68rem;line-height:1.5;color:var(--ink-soft)}
    /* 카톡 인앱브라우저 경고 — 여기선 blob 다운로드도 navigator.share도 동작하지 않는다 */
    .inapp-bar{position:fixed;left:0;right:0;bottom:0;z-index:130;display:flex;align-items:center;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:#4A3B45;color:#fff;box-shadow:0 -4px 18px rgba(0,0,0,.22)}
    .inapp-bar p{margin:0;flex:1;font-size:.78rem;line-height:1.45}
    .inapp-bar button{flex:none;padding:8px 13px;border:0;border-radius:999px;background:var(--rose);color:#fff;font-family:inherit;font-weight:700;font-size:.78rem;cursor:pointer}
    .rs-name{display:flex;align-items:center;gap:9px;margin:0 0 9px;text-align:left}
    .rs-name .rs-nl{color:#fff;font-size:.82rem;font-weight:700;flex:none;text-shadow:0 1px 3px rgba(0,0,0,.25)}
    .rs-name input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.96);font-size:.9rem;color:var(--ink);font-family:inherit}
    .rs-opt{display:flex;align-items:flex-start;gap:8px;margin:0 2px 12px;color:rgba(255,255,255,.95);font-size:.82rem;font-weight:700;cursor:pointer;text-align:left}
    .rs-opt input{margin-top:1px;flex:none;width:17px;height:17px;accent-color:var(--rose);cursor:pointer}
    .rs-opt em{font-style:normal;font-weight:500;color:rgba(255,255,255,.82)}
    .confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
    .confetti i{position:absolute;top:-12px;width:9px;height:9px;border-radius:2px;opacity:.9;animation:fall linear forwards}
    @keyframes fall{to{transform:translateY(105vh) rotate(320deg);opacity:.2}}
    /* 확인 팝업(공용) — 다른 시트보다 위(z 112) */
    .confirm-sheet{z-index:112;align-items:center}
    .confirm-card{position:relative;width:100%;max-width:340px;margin:20px;background:var(--cream);border-radius:20px;padding:24px 22px 18px;box-shadow:0 20px 50px rgba(0,0,0,.28);text-align:center;animation:pop .28s cubic-bezier(.2,1.2,.5,1)}
    .cf-msg{font-size:1rem;color:var(--ink);line-height:1.65;margin-bottom:18px}
    .cf-msg b{color:var(--rose-deep)}
    .cf-acts{display:flex;gap:10px}
    .cf-acts .btn{flex:1;padding:12px}
    /* pointer-events:none 필수 — 토스트는 한 번 만들어지면 DOM에 남고, opacity:0 으로 안 보여도
       히트테스트에 계속 잡혀 아래에 깔린 버튼(공유 CTA·다시 고르기)의 탭을 통째로 삼킨다. */
    .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--r-pill);font-size:.9rem;z-index:120;box-shadow:var(--shadow);opacity:0;transition:.2s;pointer-events:none}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

    /* 다운로드 대기 전면 패널 — 파일 생성/전송 중 로딩(광고 아님). 최소 10초 유지·길어지면 완료까지 자동 연장. */
    .dl-wait{position:fixed;inset:0;z-index:124;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(74,59,69,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
    .dl-wait[hidden]{display:none}
    .dl-wait-card{width:100%;max-width:360px;background:var(--cream);border-radius:24px;padding:28px 24px 22px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:pop .3s cubic-bezier(.2,1.2,.5,1)}
    .dl-wait-t{font-family:var(--font-display);font-size:1.25rem;color:var(--ink);margin-bottom:4px}
    .dl-wait-s{color:var(--ink-soft);font-size:.92rem;margin-bottom:16px}
    .dl-bar{position:relative;height:12px;border-radius:999px;background:var(--cream-2);overflow:hidden}
    /* 캔디 스트라이프(불확정 진행) — 흐르면 '처리 중', 모션 꺼짐이어도 정적 스트라이프가 그대로 '진행 중'으로 읽혀 안 깨진다.
       실제 진행률을 모르니 결정형(0→%) 대신 이 방식이 자연스럽다. 완료 시 is-done 으로 솔리드 채움. */
    .dl-bar-fill{position:absolute;inset:0;border-radius:999px;background-color:var(--rose-deep);background-image:linear-gradient(-45deg,rgba(255,255,255,.45) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.45) 75%,transparent 75%,transparent);background-size:22px 22px;animation:dlflow .7s linear infinite}
    @keyframes dlflow{to{background-position:22px 0}}
    .dl-bar-fill.is-done{animation:none;background-image:none;background-color:transparent;background:var(--aurora)}
    .dl-wait-intro{margin-top:16px;color:var(--ink-soft);font-size:.9rem;line-height:1.65;max-width:32ch;margin-left:auto;margin-right:auto}
    .dl-wait-x{margin-top:16px;color:var(--ink-soft);font-size:.86rem;font-weight:700;padding:8px 18px;border-radius:999px;background:var(--card);border:1.5px solid var(--line)}
    .dl-wait-x:hover{border-color:var(--rose);color:var(--rose-deep)}

    .panel{background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 22px}
    .steps{display:grid;gap:16px;margin-top:6px}
    @media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
    .step{background:#fff;border-radius:var(--r);padding:18px;border:1px solid var(--line)}
    .step .n{width:30px;height:30px;border-radius:9px;background:var(--aurora-soft);color:var(--lav-deep);font-family:var(--font-display);display:grid;place-items:center;font-size:1rem;margin-bottom:10px}
    .step h3{font-size:1.05rem;margin-bottom:5px}
    .step p{color:var(--ink-soft);font-size:.9rem}
    .guide-note{margin-top:16px;color:var(--ink-soft);font-size:.82rem;line-height:1.7}
    .split{display:grid;gap:18px}
    @media(min-width:760px){.split{grid-template-columns:1fr 1fr}}
    .feature{border-radius:var(--r-xl);padding:26px 24px;border:1px solid var(--line)}
    .feature.make{background:linear-gradient(160deg,#FFF1F5,#F3EEFF)}
    .feature.trust{background:#fff}
    .feature h2{font-size:1.4rem;margin-bottom:8px}
    .feature p{color:var(--ink-soft);font-size:.95rem;margin-bottom:6px}
    .feature .btn{margin-top:14px}
    .checks{margin-top:6px}
    .checks li{display:flex;gap:9px;align-items:flex-start;color:var(--ink-soft);font-size:.92rem;padding:5px 0}
    .checks li b{color:var(--ink);font-weight:700}
    .checks .ic{color:#1f9d63;flex:none;margin-top:1px}
    .band{margin-top:44px;text-align:center;background:var(--aurora);border-radius:var(--r-xl);padding:40px 24px;color:#fff;box-shadow:var(--shadow)}
    .band h2{color:#fff;font-size:clamp(1.5rem,5vw,2.1rem)}
    .band p{color:rgba(255,255,255,.92);margin:10px auto 20px;max-width:40ch}
    .band .btn{background:#fff;color:var(--rose-deep)}

    /* slot groups in basket sheet */
    .slot-group{margin-bottom:6px}
    .slot-group .sg-title{font-family:var(--font-display);font-size:.95rem;color:var(--ink-soft);margin:10px 0 2px}
    /* slot picker */
    #pickerAsset:empty{display:none}
    .mini-asset{display:flex;align-items:center;gap:9px;background:var(--cream-2);border-radius:var(--r);padding:9px 12px;font-size:.85rem;margin-bottom:12px}
    .mini-asset .ma-sw{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);flex:none;background-size:cover;background-position:center;overflow:hidden;display:flex;align-items:center;justify-content:center}
    .mini-asset .ma-sw img{width:100%;height:100%;object-fit:contain}
    .mini-asset .ma-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .pick-hint{margin:2px 2px 10px;font-size:.8rem;color:var(--rose-deep);font-weight:600;line-height:1.5}
    .pick-done{width:100%;margin-top:12px}
    .pick-slots{display:flex;flex-direction:column;gap:8px}
    .pick-slot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r);border:1.5px solid var(--line);background:#fff;cursor:pointer;text-align:left;transition:.12s;width:100%}
    .pick-slot:hover{border-color:var(--rose)}
    .pick-slot.cur{border-color:var(--rose);background:linear-gradient(135deg,#FFF1F5,#F3EEFF)}
    .pick-slot .ps-label{font-weight:700;flex:none;min-width:104px;font-size:.92rem}
    .pick-slot .po-occ{color:var(--ink-soft);font-size:.85rem;display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .pick-slot .po-occ img{width:22px;height:22px;object-fit:contain;flex:none}
    .pick-slot .po-occ .po-sw{width:18px;height:18px;border-radius:5px;border:1px solid var(--line);flex:none}
    .pick-slot .po-empty{color:var(--ink-soft);opacity:.55;font-size:.85rem;flex:1}
    .pick-slot .ps-tag{font-size:.72rem;font-weight:700;color:var(--rose-deep);flex:none}