@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
  :root{
    --bg:#F1EAE4;--bg-2:#ECE3DB;--surface:#FCF8F4;--surface-2:#F7F0E9;
    --ink:#271F1B;--ink-soft:#7C7068;--ink-faint:#A89C92;
    --line:#E7DCD1;--line-soft:#EFE7DD;
    --plum:#7B5563;--plum-deep:#5F3F4B;--plum-soft:#F0E5E7;
    --gold:#B08A4F;--gold-deep:#8E6C36;--gold-soft:#F2E9D9;
    --rosegold:#C9A27E;--rosegold-deep:#B68D7A;--rosegold-soft:#D9B89C;
    --sage:#6F7C62;--rose:#9C6470;
    --good:#5b8a6b;--warn:#b88a3e;--bad:#b16370;
    --shadow:0 1px 2px rgba(39,31,27,.04), 0 12px 30px -18px rgba(39,31,27,.18);
    --shadow-lg:0 2px 6px rgba(39,31,27,.05), 0 30px 60px -28px rgba(39,31,27,.28);
    --font-display:'Cormorant Garamond', Georgia, 'Nanum Myeongjo', serif;
    --font-caption:'Noto Serif KR', 'Cormorant Garamond', serif;
    --font-sans:'Pretendard','Inter',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    --r:18px;
  }
  *{box-sizing:border-box} html,body{margin:0;padding:0}
  html{overflow-x:hidden}
  body{background:radial-gradient(1200px 600px at 85% -10%, rgba(176,138,79,.10), transparent 60%),radial-gradient(900px 500px at -10% 110%, rgba(123,85,99,.10), transparent 55%),var(--bg);
    color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";letter-spacing:-0.01em;min-height:100vh;word-break:keep-all;overflow-x:hidden}
  h1,h2,h3{word-break:keep-all}
  ::selection{background:var(--plum-soft);color:var(--plum-deep)}
  button{font-family:inherit;cursor:pointer} input,select,textarea{font-family:inherit}
  :focus-visible{outline:2px solid var(--plum);outline-offset:2px;border-radius:8px}
  .app{display:flex;min-height:100vh}
  .side{width:248px;flex:0 0 248px;padding:30px 20px;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg, rgba(252,248,244,.6), rgba(252,248,244,0))}
  .brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:6px 10px 22px}
  .brand-logo{width:168px;height:auto;display:block}
  .brand img.mark{background:#FEFEF8!important;box-shadow:0 2px 8px rgba(60,40,30,.12);object-fit:cover}
  .brand .mark{width:38px;height:38px;border-radius:11px;flex:0 0 38px;background:linear-gradient(145deg,var(--plum),var(--plum-deep));display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-style:italic;font-size:22px;font-weight:600;box-shadow:0 8px 18px -8px rgba(95,63,75,.7)}
  .brand .name{font-family:var(--font-display);font-size:25px;font-weight:600;line-height:1}
  .brand .sub{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-top:0}
  .nav-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);padding:14px 12px 7px}
  .nav-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:11px 12px;border-radius:12px;color:var(--ink-soft);font-size:14.5px;font-weight:500;text-align:left;transition:.18s;position:relative}
  .badge-new{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.03em;background:linear-gradient(135deg,#e0895f,#c96a3f);color:#fff;padding:2px 7px;border-radius:20px}
  .nav-item svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;opacity:.85}
  .nav-item:hover{background:var(--surface-2);color:var(--ink)}
  .nav-item.active{background:var(--surface);color:var(--plum-deep);box-shadow:var(--shadow)}
  .nav-item.active::before{content:"";position:absolute;left:-20px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--plum),var(--gold))}
  .nav-item .dot{margin-left:auto;background:var(--rose);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
  .side .foot{margin-top:auto;padding:14px 12px 2px;border-top:1px solid var(--line-soft);color:var(--ink-faint);font-size:11px;line-height:1.6}
  .main{flex:1;min-width:0;display:flex;flex-direction:column}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 40px;border-bottom:1px solid var(--line-soft)}
  .tb-brand{display:flex;align-items:center}
  .tb-logo{height:36px;width:auto;display:block}
  .topbar .eyebrow{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}
  .topbar h1{margin:5px 0 0;font-size:21px;font-weight:600;letter-spacing:-.02em}
  .shopchip{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:40px;padding:7px 8px 7px 16px;box-shadow:var(--shadow);min-width:0;flex-shrink:1;overflow:hidden}
  .kakao-btn{position:relative;display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:11px;background:#FEE500;border:none;cursor:pointer;flex:none;box-shadow:var(--shadow);font-size:12.5px;font-weight:700;color:#191919;white-space:nowrap}
  .kakao-btn svg{width:17px;height:17px;display:block;flex:none}
  .kakao-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--good);border:2px solid var(--surface)}
  .shopchip .meta{text-align:right;line-height:1.25;min-width:0;overflow:hidden}.shopchip .meta b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.shopchip .meta span{display:block;font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shopchip .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,var(--gold),var(--gold-deep));display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-size:17px;font-style:italic;flex:none}
  .view{padding:30px 40px 60px;max-width:1120px}
  .eyebrow{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
  .muted{color:var(--ink-soft)}.row{display:flex;gap:18px;flex-wrap:wrap}.grid{display:grid;gap:18px}.dash-cols{grid-template-columns:1.3fr .7fr}
  .demo-btns{grid-template-columns:1fr 1fr;gap:8px}
  .qa-grid{grid-template-columns:repeat(4,1fr)}
  .result-grid{grid-template-columns:repeat(4,1fr)}
  .result-card{padding:16px}
  .mock-banner{margin-top:10px;border-radius:12px;padding:26px 14px;text-align:center;background:linear-gradient(145deg,var(--rosegold),var(--rosegold-deep));color:#fff;font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.5}
  .mock-banner small{display:block;font-family:var(--font-sans);font-size:12px;font-weight:600;opacity:.92;margin-top:4px}
  .img-caption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 16px;background:linear-gradient(0deg,rgba(20,14,10,.85) 8%,rgba(20,14,10,.35) 55%,rgba(20,14,10,0));display:flex;flex-direction:column;gap:9px}
  .img-caption .cap-tag{align-self:flex-start;background:linear-gradient(145deg,var(--rosegold),var(--rosegold-deep));color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
  .img-caption .cap-edit{width:100%;background:transparent;border:none;outline:none;color:#fff;font-family:var(--font-caption);font-size:30px;font-weight:700;letter-spacing:.005em;padding:0;text-shadow:0 2px 12px rgba(0,0,0,.5)}
  .img-caption .cap-edit::placeholder{color:rgba(255,255,255,.75)}
  .img-watermark{font-size:13px;font-weight:600;color:rgba(255,255,255,.92);white-space:nowrap;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
  .img-watermark::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--rosegold-soft,#D9B89C);display:inline-block;flex:0 0 auto}
  .img-pick{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px}
  .img-pick-row{display:flex;gap:8px;flex-wrap:wrap}
  .img-pick-row .btn{flex:1;min-width:150px}
  .ig-mock{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-top:12px}
  .ig-head{display:flex;align-items:center;gap:10px;padding:12px 14px}
  .ig-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,var(--rosegold),var(--rosegold-deep));color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 34px}
  .ig-head b{display:block;font-size:13.5px}
  .ig-head span{display:block;font-size:11.5px;color:var(--ink-soft)}
  .ig-actions{padding:10px 14px 0;font-size:20px;letter-spacing:6px;color:var(--ink)}
  .ig-cap{padding:8px 14px 16px;font-size:13.5px;line-height:1.6;color:var(--ink)}
  .ig-cap .tag{color:var(--plum);font-weight:600}
  .ig-noimg{aspect-ratio:1/1;background:var(--surface-2);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;cursor:pointer;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:.15s}
  .ig-noimg:hover{background:var(--rosegold-soft,#F3E3D6)}
  .ig-noimg span{font-size:13px;color:var(--ink-soft);font-weight:600}
  .kakao-mock{background:#B2C7D9;border-radius:14px;padding:22px 16px}
  .kakao-bubble{position:relative;background:#fff;border-radius:4px 16px 16px 16px;padding:14px 16px;font-size:13.5px;line-height:1.65;color:var(--ink);max-width:88%;box-shadow:0 2px 6px rgba(0,0,0,.08)}
  .sms-mock{background:var(--ink);border-radius:20px;padding:22px 16px 26px}
  .sms-bar{color:#9aa0a8;font-size:11px;text-align:center;margin-bottom:14px;letter-spacing:.02em}
  .sms-bubble{background:#2E3235;color:#fff;border-radius:16px 16px 16px 4px;padding:12px 15px;font-size:13.5px;line-height:1.6;max-width:88%}
  .pub-row{margin-top:14px}
  .pub-label{font-size:12px;color:var(--ink-soft);margin-bottom:8px;font-weight:600}
  .pub-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .pub-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border-radius:12px;background:var(--surface-2);font-size:11.5px;color:var(--ink);transition:.15s}
  .pub-card:hover{background:var(--rosegold-soft,#F3E3D6)}
  .pub-ic{font-size:20px}
  .chan-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
  .chan-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 6px;border-radius:12px;background:var(--surface-2);font-size:12px;font-weight:600;color:var(--ink);transition:.15s}
  .chan-card:hover{border-color:var(--rosegold)}
  .chan-card.on{background:linear-gradient(145deg,var(--rosegold),var(--rosegold-deep));color:#fff;box-shadow:0 8px 18px -10px rgba(182,141,122,.7)}
  .demo-chan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .chan-demo-card{border-radius:12px;padding:10px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px;transition:.15s;min-width:0}
  .chan-demo-card.on{box-shadow:inset 0 0 0 2px var(--rosegold)}
  .cdc-head{display:flex;align-items:center;gap:6px;min-width:0}
  .cdc-head b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .cdc-head .pub-ic{font-size:16px;flex:0 0 auto}
  .cdc-actions{display:flex;gap:6px;min-width:0}
  .cdc-actions .btn{flex:1;padding:6px 2px;font-size:11px;min-width:0}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;transition:.16s}
  .btn:hover{border-color:var(--ink-faint);transform:translateY(-1px)}
  .btn.primary{background:linear-gradient(145deg,var(--rosegold),var(--rosegold-deep));color:#fff;border-color:transparent;box-shadow:0 12px 24px -12px rgba(182,141,122,.85)}.btn.primary:hover{filter:brightness(1.05)}
  .btn.ghost{background:transparent}.btn.sm{padding:7px 13px;font-size:12.5px;border-radius:9px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
  .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:30px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
  .pill.plum{background:var(--plum-soft);color:var(--plum-deep);border-color:transparent}.pill.gold{background:var(--gold-soft);color:var(--gold-deep);border-color:transparent}
  .fld{display:block;margin-bottom:16px} .fld .lab{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
  .inp,select.inp,textarea.inp{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14px;color:var(--ink);transition:.15s}
  .inp:focus{background:#fff;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-soft)}
  textarea.inp{resize:vertical;min-height:74px;line-height:1.6}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{padding:8px 14px;border-radius:30px;border:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--ink-soft);font-weight:500;transition:.15s}
  .chip:hover{border-color:var(--plum)}.chip.on{background:var(--plum);color:#fff;border-color:transparent}
  .divider{height:1px;background:var(--line-soft);margin:22px 0}
  .hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
  .hero.hero-media{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:36px}
  .hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .hero-text .btn{margin-top:2px}
  .hero-visual{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;background:var(--surface-2)}
  .hero-overlay{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:10px}
  .hero-chip{flex:1;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:12px;padding:10px 12px;box-shadow:0 8px 20px -8px rgba(0,0,0,.25)}
  .hero-chip b{display:block;font-size:17px;font-weight:700;color:var(--plum);line-height:1.2}
  .hero-chip span{display:block;font-size:10.5px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero-visual img{width:100%;height:100%;object-fit:cover;object-position:82% 50%;display:block}
  .hero .greet{font-family:var(--font-display);font-size:38px;font-weight:500;line-height:1.15;word-break:keep-all}.hero .greet em{font-style:italic;color:var(--plum)}.hero .date{color:var(--ink-soft);font-size:14px;margin-top:8px}
  .hero-num{font-family:var(--font-sans);font-style:normal;font-weight:800;font-size:.62em;vertical-align:-1px;letter-spacing:-.5px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}
  .stat{padding:22px;position:relative;overflow:hidden}.stat .k{font-size:12px;color:var(--ink-soft);font-weight:600}
  .stat .v{font-family:var(--font-display);font-size:46px;font-weight:500;line-height:1;margin:14px 0 4px}.stat .v small{font-size:18px;color:var(--ink-soft);margin-left:3px}.stat .d{font-size:12.5px;color:var(--gold-deep);font-weight:600}
  .stat .ic{position:absolute;top:20px;right:20px;width:30px;height:30px;opacity:.5;stroke:var(--plum)}
  .panel{padding:24px}.panel h3{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px}.panel .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .listrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}.listrow:last-child{border-bottom:0}
  .ava{width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:grid;place-items:center;font-weight:600;font-size:14px;color:var(--plum-deep);background:var(--plum-soft)}
  .listrow .who b{font-size:14px;font-weight:600}.listrow .who span{display:block;font-size:12px;color:var(--ink-soft);margin-top:1px}
  .listrow .when{margin-left:auto;text-align:right;font-size:12px;color:var(--ink-soft)}
  .qbtn{display:flex;flex-direction:column;gap:11px;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);text-align:left;transition:.16s}
  .qbtn:hover{border-color:var(--plum,#7B5563);transform:translateY(-1px)}
  .new-badge{display:inline-block;font-size:9.5px;font-weight:800;background:#fff;color:var(--plum,#7B5563);padding:2px 6px;border-radius:20px;vertical-align:middle;margin-left:2px}
  .mini-stat{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
  .mini-stat .k{font-size:12.5px;color:var(--ink-soft)}.mini-stat b{font-size:16px}
  .qbtn:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}.qbtn svg{width:22px;height:22px;stroke:var(--plum)}.qbtn b{font-size:14px}.qbtn span{font-size:12px;color:var(--ink-soft)}
  .split{display:grid;grid-template-columns:0.9fr 1.1fr;gap:22px;align-items:start}
  .tabs{display:flex;gap:4px;background:var(--surface-2);padding:5px;border-radius:13px;flex-wrap:wrap}
  .tab{border:0;background:transparent;padding:9px 14px;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink-soft);transition:.15s}.tab.on{background:var(--surface);color:var(--plum-deep);box-shadow:var(--shadow)}
  .out{white-space:pre-wrap;line-height:1.75;font-size:14px;color:var(--ink);margin-top:16px}.out .tag{color:var(--plum);font-weight:600}
  .copybar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
  .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:46px 20px;color:var(--ink-soft)}.empty svg{width:34px;height:34px;stroke:var(--gold);margin-bottom:14px;opacity:.7}
  .donut-wrap{display:flex;align-items:center;gap:22px;background:var(--plum-soft);border-radius:16px;padding:20px;margin-bottom:14px}
  .gauge{margin:14px 0}.gauge .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}.gauge .top b{font-size:13.5px;font-weight:600}.gauge .top .vv{font-size:13px;font-weight:700}
  .track{height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line-soft);position:relative}.fill{height:100%;border-radius:6px;transition:width .9s cubic-bezier(.22,1,.36,1)}
  .avgmark{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink-faint);border-radius:2px}.gauge .note{font-size:11.5px;color:var(--ink-soft);margin-top:6px}
  .change{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:11px;font-size:12.5px;font-weight:600;margin-bottom:8px}
  .change.up{background:#ecf6ef;border:1px solid #bfe0cb;color:#3f6b51}.change.down{background:#fbf1e7;border:1px solid #ecd4b4;color:#8a5a2b}.change.flat{background:#eef4f7;border:1px solid #cfe0e8;color:#3f5a68}
  .warnbar{display:flex;gap:10px;align-items:flex-start;background:#fbf3e6;border:1px solid #ecd4a8;color:#8a5a2b;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.5;margin-bottom:14px}
  .disclaimer{display:flex;gap:10px;align-items:flex-start;background:var(--gold-soft);border:1px solid #E9D8B5;color:var(--gold-deep);padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.55}.disclaimer svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px;stroke:var(--gold-deep)}
  .drop{border:1.5px dashed var(--line);background:var(--surface-2);border-radius:16px;padding:28px;text-align:center;transition:.18s;cursor:pointer}.drop:hover{border-color:var(--plum);background:#fff}.drop svg{width:30px;height:30px;stroke:var(--plum);opacity:.8;margin-bottom:10px}
  .preview{width:130px;height:130px;border-radius:14px;object-fit:cover;border:1px solid var(--line);box-shadow:var(--shadow)}
  .scan{padding:30px 6px;text-align:center}.scanbar{height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line-soft);margin:16px 0 8px}.scanbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--plum));transition:width .5s}
  .crow{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:13px;cursor:pointer;transition:.14s;border:1px solid transparent}.crow:hover{background:var(--surface-2);border-color:var(--line)}.crow .grow{flex:1;min-width:0}
  .crow .grow b{font-size:14.5px;font-weight:600}.crow .grow span{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:2px}.crow .due{font-size:12px;font-weight:600}
  .tl{position:relative;padding-left:22px;margin-top:4px}.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--line)}
  .tli{position:relative;padding:9px 0}.tli::before{content:"";position:absolute;left:-21px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--plum);box-shadow:0 0 0 3px var(--plum-soft)}.tli b{font-size:14px;font-weight:600}.tli span{font-size:12px;color:var(--ink-soft)}
  .toggle{position:relative;width:44px;height:26px;border-radius:30px;background:var(--line);border:0;transition:.2s;flex:none}.toggle.on{background:var(--plum)}.toggle i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.toggle.on i{left:21px}
  .spinner{width:17px;height:17px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}.spinner.dark{border-color:var(--line);border-top-color:var(--plum)}
  @keyframes spin{to{transform:rotate(360deg)}}
  .fade{animation:fade .4s ease}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:30px;font-size:13px;font-weight:500;opacity:0;transition:.28s;z-index:50;box-shadow:var(--shadow-lg);pointer-events:none;max-width:88vw;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .modal-overlay{position:fixed;inset:0;background:rgba(30,20,15,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
  .modal-box{position:relative;background:var(--surface);border-radius:18px;padding:26px 22px 22px;max-width:420px;width:100%;box-shadow:var(--shadow-lg);max-height:85vh;overflow-y:auto}
  .modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center}

  .authbox{display:flex;align-items:center;gap:8px;min-width:0}
  .auth-pill{display:flex;align-items:center;gap:7px;max-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;color:var(--plum-deep);box-shadow:var(--shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .auth-pill i{width:8px;height:8px;border-radius:50%;background:var(--warn);display:block;flex:none}.auth-pill.on i{background:var(--good)}.auth-pill.off{color:var(--ink-soft)}
  .cloud-note{margin-bottom:14px;background:linear-gradient(135deg,#FFFDFB,#F6EFEA);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;box-shadow:var(--shadow)}
  .cloud-note b{display:block;font-size:13.5px;margin-bottom:3px}.cloud-note span{display:block;font-size:12.3px;line-height:1.5;color:var(--ink-soft)}
  .history-list{display:flex;flex-direction:column;gap:8px}.history-item{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--line-soft);border-radius:13px;background:var(--surface-2)}
  .history-item .h-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);flex:none}.history-item .h-body{flex:1;min-width:0}.history-item .h-body b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item .h-body span{display:block;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.history-item .h-actions{display:flex;gap:6px;flex:none}
  .fab-preview{display:none}
  .fab-add{display:none}
  .menu-btn{display:none}
  .side-close{display:none}
  .side-backdrop{display:none;position:fixed;inset:0;background:rgba(36,28,32,.45);z-index:39}
  @media (max-width:880px){
    .authbox{gap:6px}.auth-pill{display:none}.topbar{gap:8px}.cloud-note{align-items:stretch;flex-direction:column}.history-item{align-items:flex-start}.history-item .h-actions{flex-direction:column}.history-item .h-actions .btn{padding:7px 10px;font-size:12px}
    .fab-preview{display:flex;align-items:center;gap:6px;position:fixed;bottom:24px;right:18px;z-index:120;background:linear-gradient(145deg,var(--rosegold),var(--rosegold-deep));color:#fff;border:none;padding:13px 18px;border-radius:30px;font-size:13.5px;font-weight:700;box-shadow:0 10px 24px -8px rgba(182,141,122,.6)}
    .fab-add{display:flex;align-items:center;justify-content:center;position:fixed;bottom:90px;right:18px;z-index:120;width:52px;height:52px;background:var(--plum,#7B5563);color:#fff;border:none;border-radius:50%;font-size:26px;font-weight:700;line-height:1;box-shadow:0 10px 24px -8px rgba(123,85,99,.6)}
    .side{position:fixed;z-index:40;top:0;bottom:0;height:100vh;height:100dvh;padding-bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow-lg);background:var(--surface)}.side.open{transform:none}
    .menu-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface)}
    .side-close{display:grid;place-items:center;position:sticky;top:6px;align-self:flex-end;flex:none;margin:-20px -8px -42px 0;z-index:5;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#0F1B33;box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer}.side-close svg{width:20px;height:20px;stroke-width:2.6}
    .listrow{flex-wrap:wrap;row-gap:8px}
    .listrow .who{min-width:60%}
    .listrow .when{margin-left:auto}
    .donut-wrap{flex-direction:column;align-items:center;text-align:center}
    .donut-svg{width:96px!important;height:96px!important}
    .btn{padding:13px 18px;font-size:14.5px}
    .btn.sm{padding:9px 14px;font-size:13px}
    .copybar{flex-direction:column;align-items:stretch;gap:8px}
    .copybar>*{width:100%}
    .copybar>div{display:flex;flex-direction:column;gap:8px}
    .side.open ~ .side-backdrop{display:block}
    .topbar,.view{padding-left:16px;padding-right:16px}.split{grid-template-columns:1fr}.dash-cols{grid-template-columns:1fr}.hero{flex-direction:column;align-items:flex-start}.hero .greet{font-size:28px;line-height:1.2}
    .shopchip{padding:5px 5px 5px 12px;gap:8px;max-width:190px}
    .shopchip .meta{display:block;overflow:hidden}
    .shopchip .meta b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .shopchip .meta span{display:none}
    .tb-logo{height:28px}
    .hero.hero-media{grid-template-columns:1fr;gap:18px}.hero-visual{order:2;aspect-ratio:4/5;max-height:440px;border-radius:16px}.hero-text{order:1}
    .hero-overlay{left:10px;right:10px;bottom:10px;gap:6px}
    .hero-chip{padding:8px 10px}.hero-chip b{font-size:15px}.hero-chip span{font-size:9.5px}
    .demo-btns{grid-template-columns:1fr}
    .qa-grid{grid-template-columns:1fr 1fr}
    .pub-cards{grid-template-columns:1fr 1fr}
    .chan-cards{grid-template-columns:repeat(3,1fr)}
    .demo-chan-grid{grid-template-columns:1fr 1fr;gap:6px}
    .panel{padding:16px}
    .chan-demo-card{padding:8px}
    .chan-card{padding:10px 4px}
    .demo-row{flex-direction:column}
    .demo-row .inp{min-width:0!important}
    .result-grid{grid-template-columns:1fr}
    .result-card{padding:14px}
    .result-card .out{font-size:13px!important;line-height:1.6!important;margin-top:6px!important}
    .stats{grid-template-columns:repeat(3,1fr);gap:8px}
    .stat{padding:12px 10px}.stat .ic{display:none}.stat .k{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat .v{font-size:24px;margin:6px 0 2px}.stat .v small{font-size:12px}.stat .d{font-size:10.5px}
  }
  @media (max-width:420px){
    .topbar,.view{padding-left:12px;padding-right:12px}
    .topbar{gap:6px}
    .authbox{gap:5px}
    .shopchip{padding:3px;gap:0;max-width:none;border-radius:50%}
    .shopchip .meta{display:none}  /* 폰에선 이름이 한두 글자로 잘려 보여서 동그란 아바타만 표시(매장명은 대시보드 인사말에 나옴) */
    .kakao-btn{height:32px;padding:0 8px;gap:4px;font-size:11px;flex-shrink:0}
    .kakao-btn svg{width:15px;height:15px}
    .hero .greet{font-size:24px}
    .donut-svg{width:88px!important;height:88px!important}
    .stats{grid-template-columns:1fr 1fr}.stats .stat:last-child{grid-column:1 / -1}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== 치수 도면: 크게 보기 + 사용법 애니메이션 (v66) ===== */
.dim-split{grid-template-columns:minmax(280px,340px) 1fr}
@media (max-width:880px){.dim-split{grid-template-columns:1fr}}
.dim-tools{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.dim-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 10px}
.dim-steps div{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px;font-size:11.5px;line-height:1.45;color:var(--ink-soft)}
.dim-steps b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}
.dim-full{position:fixed;inset:0;z-index:150;background:#1d1714;display:flex;flex-direction:column}
.dim-full-top{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#2a221e;color:#fff;flex-wrap:wrap}
.dim-full-top .t{flex:1;min-width:180px;font-size:13.5px;line-height:1.4}
.dim-full-top .t>b{display:block;font-size:15px}
@media (max-width:600px){.dim-full-top .t{order:2;flex-basis:100%;font-size:13px}.dim-full-top .t>b{display:none}.dim-full-top button{flex:1;padding:9px 6px}}
.dim-full-top button{border:0;border-radius:10px;padding:9px 12px;font-weight:700;font-size:13px;cursor:pointer;background:#fff;color:#271F1B}
.dim-full-top button.ghost{background:rgba(255,255,255,.14);color:#fff}
.dim-full-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}
.dim-full-body canvas{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;touch-action:none;border-radius:6px;background:#fff}
#dim-canvas{touch-action:none}
.dim-loupe{position:fixed;width:130px;height:130px;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,.45);pointer-events:none;z-index:160;display:none;background:#fff}
.dim-tut{position:fixed;inset:0;z-index:210;background:rgba(30,20,15,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.dim-tut-box{background:var(--surface);border-radius:18px;max-width:520px;width:100%;padding:18px 18px 16px;box-shadow:var(--shadow-lg);max-height:calc(100vh - 32px);overflow:auto}
.dim-tut-box h3{margin:2px 0 4px;font-size:18px}
.dim-tut-stage{position:relative;background:#F4EEE8;border-radius:14px;overflow:hidden;margin:10px 0 10px}
.dim-tut-stage svg{display:block;width:100%;height:auto}
.dim-tut-cap{position:relative;height:40px;margin-bottom:6px}
.dim-tut-cap span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:14px;color:var(--ink);opacity:0;animation:dimCap 12s infinite}
.dim-tut-list{margin:0 0 12px;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--ink-soft)}
.dim-tut-list b{color:var(--ink)}
@keyframes dimCap{0%,100%{opacity:0}}
.dt-c1{animation-name:dimC1!important}.dt-c2{animation-name:dimC2!important}.dt-c3{animation-name:dimC3!important}.dt-c4{animation-name:dimC4!important}
@keyframes dimC1{0%,1%{opacity:0}3%,24%{opacity:1}26%,100%{opacity:0}}
@keyframes dimC2{0%,26%{opacity:0}28%,46%{opacity:1}48%,100%{opacity:0}}
@keyframes dimC3{0%,48%{opacity:0}50%,84%{opacity:1}86%,100%{opacity:0}}
@keyframes dimC4{0%,86%{opacity:0}88%,98%{opacity:1}100%{opacity:0}}
.dt-finger{animation:dtFinger 12s infinite ease-in-out}
@keyframes dtFinger{
 0%{transform:translate(180px,215px)}
 9%{transform:translate(62px,152px)} 11%{transform:translate(62px,156px)} 13%{transform:translate(62px,152px)}
 21%{transform:translate(298px,152px)} 23%{transform:translate(298px,156px)} 25%{transform:translate(298px,152px)}
 30%{transform:translate(240px,205px)} 40%{transform:translate(240px,205px)} 42%{transform:translate(240px,209px)} 44%{transform:translate(240px,205px)}
 55%{transform:translate(318px,58px)} 57%{transform:translate(318px,62px)} 59%{transform:translate(318px,58px)}
 67%{transform:translate(318px,172px)} 69%{transform:translate(318px,176px)} 71%{transform:translate(318px,172px)}
 76%{transform:translate(240px,205px)} 79%{transform:translate(240px,205px)} 81%{transform:translate(240px,209px)} 83%{transform:translate(240px,205px)}
 92%,100%{transform:translate(180px,215px)}}
.dt-o{opacity:0;animation:12s infinite}
.dt-p1{animation-name:dtP1}@keyframes dtP1{0%,10.5%{opacity:0}11%,94%{opacity:1}96%,100%{opacity:0}}
.dt-p2{animation-name:dtP2}@keyframes dtP2{0%,22.5%{opacity:0}23%,94%{opacity:1}96%,100%{opacity:0}}
.dt-l1{stroke-dasharray:236;stroke-dashoffset:236;animation:dtL1 12s infinite}@keyframes dtL1{0%,23%{stroke-dashoffset:236;opacity:1}27%,94%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0}}
.dt-pop1{animation-name:dtPop1}@keyframes dtPop1{0%,27%{opacity:0}29%,44%{opacity:1}46%,100%{opacity:0}}
.dt-lab1{animation-name:dtLab1}@keyframes dtLab1{0%,44.5%{opacity:0}46%,94%{opacity:1}96%,100%{opacity:0}}
.dt-p3{animation-name:dtP3}@keyframes dtP3{0%,56.5%{opacity:0}57%,94%{opacity:1}96%,100%{opacity:0}}
.dt-p4{animation-name:dtP4}@keyframes dtP4{0%,68.5%{opacity:0}69%,94%{opacity:1}96%,100%{opacity:0}}
.dt-l2{stroke-dasharray:114;stroke-dashoffset:114;animation:dtL2 12s infinite}@keyframes dtL2{0%,69%{stroke-dashoffset:114;opacity:1}72%,94%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0}}
.dt-pop2{animation-name:dtPop2}@keyframes dtPop2{0%,72%{opacity:0}74%,82%{opacity:1}84%,100%{opacity:0}}
.dt-lab2{animation-name:dtLab2}@keyframes dtLab2{0%,82.5%{opacity:0}84%,94%{opacity:1}96%,100%{opacity:0}}
.dt-r1{animation:dtR1 12s infinite;transform-origin:62px 152px;transform-box:view-box}@keyframes dtR1{0%,10%{opacity:0;transform:scale(.3)}11%{opacity:.7;transform:scale(.6)}15%,100%{opacity:0;transform:scale(1.6)}}
.dt-r2{animation:dtR2 12s infinite;transform-origin:298px 152px;transform-box:view-box}@keyframes dtR2{0%,22%{opacity:0;transform:scale(.3)}23%{opacity:.7;transform:scale(.6)}27%,100%{opacity:0;transform:scale(1.6)}}
.dt-r3{animation:dtR3 12s infinite;transform-origin:318px 58px;transform-box:view-box}@keyframes dtR3{0%,56%{opacity:0;transform:scale(.3)}57%{opacity:.7;transform:scale(.6)}61%,100%{opacity:0;transform:scale(1.6)}}
.dt-r4{animation:dtR4 12s infinite;transform-origin:318px 172px;transform-box:view-box}@keyframes dtR4{0%,68%{opacity:0;transform:scale(.3)}69%{opacity:.7;transform:scale(.6)}73%,100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.dt-o,.dt-l1,.dt-l2{opacity:1!important;stroke-dashoffset:0!important}.dt-pop1,.dt-pop2,.dt-finger{display:none}}
.q-tabs{display:flex;gap:6px;margin:4px 0 10px;flex-wrap:wrap}.q-tab{border:1.5px solid var(--line);background:var(--surface);border-radius:20px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}.q-tab b{color:var(--ink);margin-left:2px}.q-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}.q-tab.on b{color:#fff}
/* ===== 내 상품 · 홈 (v54) ===== */
.item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:16px}
.item-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;min-width:0}
.item-photo{aspect-ratio:4/3;background:var(--surface-2);cursor:pointer}
.item-img,.item-photo .item-thumb-empty{width:100%;height:100%;object-fit:contain;background:#F7F2EC;display:flex;align-items:center;justify-content:center;font-size:34px}
.item-body{padding:12px 12px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.item-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-meta{font-size:11.5px}
.item-price{font-size:13px}.item-price s{color:var(--muted);font-size:11.5px}
.item-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}
.item-actions button{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:7px 2px;font-size:11.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;min-width:0}
.item-actions button:hover{border-color:var(--ink)}
.item-edit-row{display:flex;gap:4px;margin-top:6px}.item-edit-row .btn{flex:1;padding:6px}
.item-thumb-empty{background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.item-form-img{width:120px;height:90px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.item-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.item-form-row.three{grid-template-columns:1fr 1fr 1fr}
.item-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.item-pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;cursor:pointer}
.item-pick:hover{border-color:var(--ink)}
.item-pick-img{width:48px;height:48px;border-radius:9px;object-fit:cover;flex:none;font-size:20px}
.item-pick-text{display:flex;flex-direction:column;min-width:0}.item-pick-text b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-pick-text span{font-size:12px}
.match-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.match-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);min-width:0}
.match-img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#F7F2EC;display:flex;align-items:center;justify-content:center;font-size:28px}
.match-body{padding:9px 10px;display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0}.match-body b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-reason{font-size:11.5px;color:var(--plum);font-weight:600}
.match-cta{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--surface-2);border:1px dashed var(--line);border-radius:14px;padding:14px;font-size:13px;line-height:1.6}
.match-cta span{color:var(--muted)}
.naver-ref{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.naver-ref summary{cursor:pointer;font-size:13px;font-weight:600}
.home-head{margin:4px 0 16px}.home-head h2{margin:4px 0 0;font-size:24px}
.home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.home-stat{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;color:var(--ink)}
div.home-stat{cursor:default}
.home-stat b{font-size:26px;line-height:1.1}.home-stat b small{font-size:13px;margin-left:2px;font-weight:600}.home-stat span{font-size:12.5px;color:var(--muted)}
.home-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start}
.todo-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.todo-row:last-child{border-bottom:0}
.todo-ic{width:36px;height:36px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.todo-text{flex:1;display:flex;flex-direction:column;min-width:0}.todo-text b{font-size:13.5px}.todo-text span{font-size:12px;color:var(--muted);line-height:1.5}
.home-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.home-item{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13px}.home-item b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-item span{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-item-img{width:100%;aspect-ratio:4/3;border-radius:12px;object-fit:contain;background:#F7F2EC;margin-bottom:4px;display:flex;align-items:center;justify-content:center;font-size:26px}
.home-item .item-actions{margin-top:4px;grid-template-columns:repeat(5,1fr)}.home-item .item-actions button{font-size:14px;padding:6px 0}
.home-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:880px){
  .home-cols{grid-template-columns:1fr}
  .home-tiles{grid-template-columns:repeat(4,1fr);gap:8px}
  .home-stats{gap:8px}.home-stat{padding:12px}.home-stat b{font-size:21px}.home-stat span{font-size:11.5px}
  .home-head h2{font-size:20px}
  .item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .item-card .item-actions{grid-template-columns:1fr 1fr;gap:5px}
  .item-card .item-actions button{font-size:12px;padding:8px 0}
}
@media (max-width:420px){
  .home-tiles{grid-template-columns:repeat(3,1fr)}
  .item-form-row.three{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .match-grid{grid-template-columns:1fr 1fr;gap:8px}
}

/* ===== 견적서 (v56) ===== */
.q-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.q-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;min-width:0}
.q-row:hover{border-color:var(--ink)}
.q-main{display:flex;flex-direction:column;min-width:0}.q-main b{font-size:14.5px}.q-main span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}.q-side b{font-size:15px}
.q-status{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line)}
.q-status.s-1{background:#EAF0F8;border-color:#CFDBEC;color:#3b5a85}.q-status.s-2{background:#E7F2EA;border-color:#C9E2D1;color:#2f6b45}.q-status.s-3,.q-status.s-4{color:var(--muted)}
.q-sec{font-size:12px;font-weight:800;color:var(--plum);letter-spacing:.04em;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line-soft)}
.q-line{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;background:var(--surface)}
.q-line-top{display:flex;gap:10px;align-items:flex-start}
.q-thumb{width:54px;height:54px;border-radius:9px;object-fit:cover;flex:none;font-size:20px}
.q-in{padding:8px 10px;font-size:13.5px}.q-spec{margin-top:6px;font-size:12.5px}
.q-x{border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;padding:4px}
.q-line-bot{display:grid;grid-template-columns:80px 1fr auto;gap:8px;align-items:end;margin-top:8px}
.q-line-bot label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);font-weight:600;min-width:0}
.q-amt{font-weight:800;font-size:14px;padding-bottom:9px;white-space:nowrap}
.q-totals{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:4px}
.q-tot{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}.q-tot.grand{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;font-size:16px}.q-tot.grand b{color:var(--plum)}
.q-supplier{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:10px 14px}.q-supplier summary{cursor:pointer;font-weight:700;font-size:13px}
.q-preview{display:flex;flex-direction:column;gap:10px;background:var(--surface-2);border-radius:12px;padding:12px;max-height:78vh;overflow:auto}
.q-preview img{width:100%;border:1px solid var(--line);background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.q-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.q-actions .btn:first-child{grid-column:1/-1}
.q-plus{margin-left:auto;font-size:18px;color:var(--plum);font-weight:700}
.q-fab{display:none}
@media (max-width:880px){.q-preview{max-height:none}.q-fab{display:block;position:fixed;right:16px;bottom:18px;z-index:40;border:0;border-radius:30px;padding:12px 18px;font-weight:700;font-size:14px;background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}}

/* ===== 일해줌(ILHAEJUM) 테마 v73: 남색 바탕 + 노란 포인트 + Pretendard 굵은 고딕 =====
   기존 규칙은 그대로 두고 아래에서 색·글꼴만 덮어씁니다. 되돌리려면 이 블록만 지우면 됩니다. */
:root{
  --bg:#0F1B33;--bg-2:#132240;--surface:#17284A;--surface-2:#1C2F55;
  --ink:#F4F2EC;--ink-soft:#A6B1C8;--ink-faint:#7A89A8;--muted:#A6B1C8;
  --line:#26385E;--line-soft:#1F3053;
  --plum:#F5C443;--plum-deep:#FFD66B;--plum-soft:#2A3350;
  --gold:#F5C443;--gold-deep:#F5C443;--gold-soft:#2A3350;
  --rosegold:#F5C443;--rosegold-deep:#E8B22E;--rosegold-soft:#2A3350;
  --sage:#7FD1A0;--rose:#FF9C7A;--brand:#F5C443;
  --good:#7FD1A0;--warn:#F5C443;--bad:#FF9C7A;
  --on-accent:#0F1B33;--navy-deep:#0A1428;
  --shadow:0 1px 0 rgba(0,0,0,.25),0 14px 34px -14px rgba(0,0,0,.6);
  --shadow-lg:0 1px 0 rgba(0,0,0,.25),0 40px 90px -30px rgba(0,0,0,.8);
  --font-display:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-caption:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color-scheme:dark;
}
body{background:radial-gradient(1100px 560px at 88% -12%,rgba(245,196,67,.08),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(143,179,255,.07),transparent 55%),var(--bg);letter-spacing:-0.02em}
::selection{background:#F5C443;color:#0F1B33}
:focus-visible{outline-color:#F5C443}
/* 글꼴: 세리프·이탤릭 → 굵은 고딕 */
.brand .name,.hero .greet,.stat .v,.mock-banner,.brand .mark,.shopchip .av{font-family:var(--font-sans);font-style:normal}
.brand .name{font-weight:800;font-size:21px;letter-spacing:-.03em}
.hero .greet{font-weight:800;letter-spacing:-.035em;line-height:1.22}
.hero .greet em{font-style:normal;color:#F5C443}
.stat .v{font-weight:800;letter-spacing:-.03em}
.topbar h1{font-weight:800}
.panel h3,.home-head h2{font-weight:800}
.eyebrow,.topbar .eyebrow,.brand .sub,.nav-label{color:#F5C443}
.brand .sub,.nav-label{letter-spacing:.02em;font-weight:600}.nav-label{color:var(--ink-faint)}
/* 메뉴·상단 */
.side{background:var(--navy-deep);border-right-color:var(--line)}
.nav-item{color:var(--ink-soft)}
.nav-item:hover{background:var(--surface);color:var(--ink)}
.nav-item.active{background:var(--surface);color:#F5C443;box-shadow:none}
.nav-item.active::before{background:#F5C443}
.topbar{border-bottom-color:var(--line)}
.brand img.mark{background:#FEFEF8!important}
.tb-brand{gap:9px}
.tb-ic{width:34px;height:34px;border-radius:10px;display:block}
.tb-word{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.tb-word b{color:#F5C443;font-weight:800}
@media (max-width:880px){.tb-ic{width:28px;height:28px}.tb-word{font-size:18px}}
/* 노란 바탕 위 글씨는 남색 */
.btn.primary,.chip.on,.chan-card.on,.badge-new,.nav-item .dot,.mock-banner,.img-caption .cap-tag,.ig-ava,.shopchip .av,.brand .mark,.fab-preview,.fab-add,.q-tab.on,.q-tab.on b,.q-fab{color:var(--on-accent)!important}
.btn.primary{background:#F5C443;box-shadow:0 12px 26px -12px rgba(245,196,67,.6);font-weight:700}
.btn.primary:hover{background:#FFD66B;filter:none}
.btn{background:var(--surface);border-color:var(--line-2,#34497A)}
.btn:hover{border-color:#F5C443}
.btn.ghost{background:transparent}
.chip.on,.chan-card.on,.fab-preview,.fab-add{background:#F5C443}
.q-tab.on{background:#F5C443;border-color:#F5C443}
.q-fab{background:#F5C443}
.badge-new{background:#F5C443}
.nav-item .dot{background:#FF9C7A}
.mock-banner,.img-caption .cap-tag,.ig-ava,.shopchip .av,.brand .mark{background:#F5C443}
/* 입력칸·카드 */
.inp,select.inp,textarea.inp{background:var(--bg-2);border-color:var(--line)}
.inp:focus{background:var(--bg-2);border-color:#F5C443;box-shadow:0 0 0 3px rgba(245,196,67,.18)}
.inp::placeholder,textarea::placeholder{color:var(--ink-faint)}
select.inp option{background:#17284A;color:#F4F2EC}
.qbtn:hover,.drop:hover{background:var(--surface)}
.new-badge{background:#F5C443;color:#0F1B33}
.history-item .h-ic{background:var(--surface)}
.cloud-note{background:linear-gradient(135deg,#1C2F55,#17284A)}
.hero-chip{background:rgba(10,20,40,.82)}
.hero-chip b{color:#F5C443}
.toggle i{background:#F4F2EC}.toggle.on i{background:#0F1B33}
.spinner{border-color:rgba(15,27,51,.35);border-top-color:#0F1B33}
.spinner.dark{border-color:var(--line);border-top-color:#F5C443}
.toast{background:#F4F2EC;color:#0F1B33}
.modal-overlay,.side-backdrop,.dim-tut{background:rgba(5,10,22,.7)}
.change.up{background:#17382F;border-color:#245442;color:#7FD1A0}
.change.down{background:#3A2632;border-color:#5a3644;color:#FF9C7A}
.change.flat{background:#1F2F55;border-color:#34497A;color:#B9C3D6}
.warnbar{background:#2A3350;border-color:#7D6A33;color:#FFD66B}
.disclaimer{background:#2A3350;border-color:#7D6A33;color:#FFD66B}.disclaimer svg{stroke:#FFD66B}
.q-status.s-1{background:#1F2F55;border-color:#34497A;color:#8FB3FF}
.q-status.s-2{background:#17382F;border-color:#245442;color:#7FD1A0}
.q-tot.grand b,.q-sec,.q-plus,.match-reason{color:#F5C443}
/* 상품 사진은 원래 색이 보이도록 밝은 바탕 유지 */
img.item-img,img.match-img,img.home-item-img{background:#EEF2F8}
.item-thumb-empty,div.item-img,div.match-img,div.home-item-img,.item-photo .item-thumb-empty{background:var(--surface-2)!important;color:var(--ink-faint)}
/* SNS 미리보기(실제 화면 모양)는 밝게 유지 */
.ig-mock{background:#fff;color:#191919}.ig-mock .ig-head b,.ig-mock .ig-actions,.ig-mock .ig-cap{color:#191919}.ig-mock .ig-head span{color:#737373}.ig-mock .ig-cap .tag{color:#00376B}
.ig-mock .ig-noimg{background:#F2F2F2;border-color:#e5e5e5}.ig-mock .ig-noimg span{color:#737373}
.kakao-bubble{color:#191919}
.sms-mock{background:#0A1428}
/* 치수 도면 전체화면 */
.dim-full{background:#0A1428}.dim-full-top{background:#132240}
.dim-full-top button{background:#F5C443;color:#0F1B33}
.dim-full-top button.ghost{background:rgba(255,255,255,.12);color:#F4F2EC}
.kakao-dot{border-color:var(--bg)}
a{color:#F5C443}
/* ===== AI 직원 · 글 보관함 (Pro v1) ===== */
.pr-auto{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px}.pr-auto img{height:28px;max-width:90px;object-fit:contain;background:#fff;border-radius:6px;padding:2px}.pr-auto em{font-style:normal;color:var(--ink-faint);font-size:11.5px}.pr-auto span{flex:1;min-width:160px}
.pr-photo-now{display:flex;align-items:center;gap:12px;border:1.5px solid #F5C443;background:#2A3350;border-radius:12px;padding:8px}.pr-photo-now img{width:84px;height:64px;object-fit:cover;border-radius:8px}.pr-photo-now span{flex:1;font-size:13px;font-weight:700}
.pr-ithumb{width:100%;height:100%;object-fit:cover}
.pr-gal-head{display:flex;align-items:flex-start;gap:14px}.pr-gal-head .wz-back{margin-top:10px}
.pr-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.pr-grid.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.pr-grid.sq{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.pr-grid.xtall{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.pr-thumb{display:flex;flex-direction:column;gap:6px;border:1.5px solid transparent;background:none;padding:6px;border-radius:12px;color:var(--ink-soft);font-size:11.5px;text-align:left}.pr-thumb:hover{border-color:#F5C443;background:var(--surface)}
.pr-thumb canvas{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.35);background:var(--surface-2)}
.pr-edit{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;margin-top:14px}
.pr-stage{display:flex;justify-content:center;align-items:flex-start;background:repeating-conic-gradient(#17284A 0 25%,#132240 0 50%) 0 0/24px 24px;border-radius:16px;padding:18px;min-height:300px}.pr-stage canvas{max-width:100%;box-shadow:0 14px 40px rgba(0,0,0,.5);border-radius:4px}
.pr-side{display:flex;flex-direction:column;gap:7px;position:sticky;top:12px}.pr-side .inp{padding:9px 11px;font-size:13.5px}
.pr-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.pr-sw{aspect-ratio:1;border-radius:9px;border:2px solid transparent;cursor:pointer}.pr-sw.on{border-color:#fff;box-shadow:0 0 0 2px #F5C443}
.pr-sl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}.pr-sl span{width:44px}.pr-sl input{flex:1;accent-color:#F5C443}
.pr-dl{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.pr-dl .btn{flex:1}
.pr-grid.xwide{grid-template-columns:1fr}.pr-grid.mix{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:start}
.pr-shape{display:block;width:26px;max-height:30px;border:2.5px solid #F5C443;border-radius:4px;margin:auto}.wz-opt .pr-shape[style*="1080/1920"]{width:17px}
.pr-kind.open{border:1.5px solid #F5C443;border-radius:14px;padding:0 0 12px;background:#202B48}.pr-kind.open>.wz-opt{border-color:transparent;background:none}.pr-kind.open>.wz-opt::after{display:none}
.pr-sizes{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px}.pr-sizes .chip b{color:#F5C443;margin-right:2px}
.pr-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px 0;font-size:13px}.pr-custom label{display:flex;align-items:center;gap:6px}.pr-custom .inp{width:96px;padding:8px 10px}
.pr-unit{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}.pr-unit button{background:none;border:0;color:var(--ink-soft);padding:7px 10px;font-size:12.5px}.pr-unit button.on{background:#F5C443;color:#0F1B33;font-weight:800}
.pr-conf{display:flex;align-items:center;gap:14px;border:1.5px dashed #F5C443;border-radius:14px;padding:12px 14px;margin-top:6px;background:rgba(245,196,67,.06)}.pr-conf.empty{color:var(--ink-faint);font-size:13px;border-color:var(--line)}
.pr-conf-box{width:70px;height:70px;display:flex;align-items:center;justify-content:center;flex:none}.pr-conf-box i{display:block;background:#F5C443;border-radius:2px}
.pr-conf-txt{flex:1;display:flex;flex-direction:column;gap:3px}.pr-conf-txt b{font-size:17px}.pr-conf-txt small{font-size:12px;color:var(--ink-soft)}
.pr-size-pill{display:inline-block;background:#F5C443;color:#0F1B33;font-weight:800;font-size:12px;border-radius:99px;padding:2px 10px;margin-right:6px}
.pr-guide-tg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.pr-edit.xwide{grid-template-columns:1fr}.pr-edit.xwide .pr-swatches{grid-template-columns:repeat(12,minmax(0,40px))}.pr-edit.xwide .pr-side{position:static}.pr-stage.xwide{min-height:0}
@media (max-width:880px){.pr-grid.xwide{grid-template-columns:1fr!important}.pr-conf{flex-wrap:wrap}}
.pr-stagecol{min-width:0}.pr-tip{font-size:12px;color:var(--ink-soft);margin:8px 2px 0;line-height:1.6}.pr-tip b{color:var(--ink)}
.pr-cvwrap{position:relative;display:inline-block;line-height:0;max-width:100%}
.pr-ov{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.pr-bx{position:absolute;cursor:move;touch-action:none;outline:1px dashed transparent;transform-origin:50% 50%}.pr-bx:hover{outline-color:rgba(77,163,255,.8)}.pr-bx.sel{outline:2px solid #4DA3FF}
.pr-h{position:absolute;width:14px;height:14px;background:#fff;border:2px solid #4DA3FF;border-radius:4px;margin:-7px 0 0 -7px;touch-action:none;z-index:2}
.h-nw{left:0;top:0;cursor:nwse-resize}.h-n{left:50%;top:0;cursor:ns-resize}.h-ne{left:100%;top:0;cursor:nesw-resize}.h-e{left:100%;top:50%;cursor:ew-resize}.h-se{left:100%;top:100%;cursor:nwse-resize}.h-s{left:50%;top:100%;cursor:ns-resize}.h-sw{left:0;top:100%;cursor:nesw-resize}.h-w{left:0;top:50%;cursor:ew-resize}
.pr-h.rot{left:50%;top:-30px;border-radius:50%;cursor:grab}.pr-h.rot::after{content:"";position:absolute;left:50%;top:12px;width:2px;height:14px;background:#4DA3FF;margin-left:-1px}
@media (pointer:coarse){.pr-h{width:24px;height:24px;margin:-12px 0 0 -12px}.pr-h.rot{top:-40px}.pr-h.rot::after{top:20px;height:16px}}
.pr-mini{position:absolute;display:flex;align-items:center;gap:1px;background:#fff;border-radius:10px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:5;line-height:normal;white-space:nowrap}
.pr-mini button{border:0;background:none;color:#1B2440;font-weight:800;font-size:13px;padding:6px 8px;border-radius:7px;cursor:pointer;font-family:inherit}.pr-mini button:hover{background:#EEF1F7}.pr-mini .del{color:#D33}.pr-mini i{width:1px;align-self:stretch;background:#E2E6EF;margin:3px 2px}
.pr-hov{position:absolute;border:2px dashed #F5C443;border-radius:4px;pointer-events:none;display:none}.pr-hov span{position:absolute;top:-27px;left:0;background:#F5C443;color:#0F1B33;font-size:12px;font-weight:800;padding:4px 9px;border-radius:7px;white-space:nowrap;line-height:normal}
.pr-gd{position:absolute;background:#FF4DA6;display:none;pointer-events:none;z-index:3}.pr-gd.v{left:50%;top:0;bottom:0;width:1px}.pr-gd.h{top:50%;left:0;right:0;height:1px}
.pr-ed{position:absolute;z-index:6;resize:none;border:2px solid #F5C443;border-radius:8px;padding:6px 8px;line-height:1.25;font-family:Pretendard,sans-serif;font-weight:800;outline:none;box-shadow:0 8px 30px rgba(0,0,0,.5);overflow:hidden;transform-origin:50% 50%}
.pr-addh{display:flex;align-items:center;justify-content:space-between}
.pr-add{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pr-add>*{border:1.5px solid #F5C443;border-radius:11px;padding:9px 2px;text-align:center;font-size:12.5px;font-weight:800;color:#F5C443;background:none;cursor:pointer;font-family:inherit;line-height:1.3}.pr-add small{display:block;font-weight:500;color:var(--ink-soft);font-size:10.5px}.pr-add>*:hover{background:rgba(245,196,67,.1)}
.pr-addlogo{border:1px dashed var(--line);background:none;color:var(--ink-soft);border-radius:9px;padding:7px;font-size:12.5px;cursor:pointer}
.pr-bcard{background:#1C2C50;border:1.5px solid #4DA3FF;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px}
.pr-bc-h{display:flex;justify-content:space-between;font-size:13.5px}.pr-bc-h span{color:#4DA3FF;font-size:12px;font-weight:700}
.pr-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}.pr-row>span:first-child{width:58px;flex:none}.pr-row input[type=range]{flex:1;accent-color:#F5C443}
.pr-seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.pr-seg button{background:none;border:0;color:var(--ink-soft);padding:5px 9px;font-size:12px;cursor:pointer;font-family:inherit}.pr-seg button.on{background:#F5C443;color:#0F1B33;font-weight:800}
.pr-bsw{display:flex;gap:4px;flex-wrap:wrap;align-items:center}.pr-bsw button{width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,.15);cursor:pointer;padding:0}.pr-bsw button.on{border-color:#fff;box-shadow:0 0 0 2px #F5C443}
.pr-bsw-pick{position:relative;width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer}.pr-bsw-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pr-tg{position:relative;display:inline-block;width:36px;height:20px}.pr-tg input{opacity:0;width:0;height:0}.pr-tg i{position:absolute;inset:0;border-radius:10px;background:#34497A;cursor:pointer}.pr-tg i::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}.pr-tg input:checked+i{background:#F5C443}.pr-tg input:checked+i::after{left:19px;background:#0F1B33}
.pr-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.pr-acts button{border:1px solid var(--line);background:none;color:var(--ink);border-radius:9px;padding:7px 0;font-size:12px;cursor:pointer;font-family:inherit}.pr-acts .del{color:#FF7A7A;border-color:#5A2A3A}
.pr-bhint{font-size:12px;color:var(--ink-faint);border:1px dashed var(--line);border-radius:10px;padding:9px 11px}
.pr-layers{display:flex;flex-direction:column;gap:4px}.pr-layers>*{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:7px 10px;border-radius:8px;background:var(--bg-2,#0F1B33);border:1.5px solid transparent;color:var(--ink);text-align:left;cursor:pointer;font-family:inherit}.pr-layers .on{border-color:#4DA3FF}.pr-layers small{color:var(--ink-faint);font-size:11px}.pr-layers .lock{cursor:default;opacity:.7}
.pr-sec{border-top:1px solid var(--line);padding-top:8px}.pr-sec>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-soft);padding:4px 0;list-style:none}.pr-sec>summary::before{content:"▸ ";color:#F5C443}.pr-sec[open]>summary::before{content:"▾ "}.pr-sec[open]{display:flex;flex-direction:column;gap:7px}
@media (max-width:880px){.pr-edit{grid-template-columns:1fr}.pr-side{position:static}.pr-grid{grid-template-columns:repeat(2,1fr)!important}}

.wz-wrap{max-width:560px;margin:0 auto}
.wz{padding:22px 22px 20px;display:flex;flex-direction:column;min-height:560px}
.wz-top{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft)}
.wz-back{border:1px solid var(--line-2,#34497A);background:none;color:var(--ink-soft);border-radius:9px;padding:5px 10px;font-size:12.5px}
.wz-bar{flex:1;height:5px;background:#26385E;border-radius:5px;overflow:hidden}.wz-bar i{display:block;height:100%;background:#F5C443;transition:width .3s}
.wz-q{font-size:26px;font-weight:800;line-height:1.35;margin:26px 0 6px;letter-spacing:-.035em}
.wz-sub{font-size:13px;color:var(--ink-soft);margin:0 0 16px;line-height:1.6}.wz-sub a{color:#F5C443;cursor:pointer;text-decoration:underline}
.wz-body{display:flex;flex-direction:column;gap:9px}
.wz-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--line-2,#34497A);background:var(--surface);color:var(--ink);border-radius:14px;padding:14px 16px;font-size:16px;position:relative}
.wz-opt b{display:block;font-weight:700}.wz-opt small{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.wz-opt.on{border-color:#F5C443;background:#2A3350}.wz-opt.on::after{content:"✓";position:absolute;right:16px;color:#F5C443;font-weight:800}
.wz-ic{font-size:22px;width:30px;text-align:center}
.wz-ai{background:#17382F;border:1px solid #245442;color:#7FD1A0;border-radius:10px;padding:8px 11px;font-size:12.5px}
.wz-add{margin-top:6px;border:1.5px dashed var(--line-2,#34497A);background:transparent;border-radius:12px;padding:12px;font-size:13.5px;color:#8FB3FF}.wz-add b{color:#8FB3FF}.wz-add:hover{border-color:#8FB3FF}
.wz-lab{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:4px}.wz-lab i{font-style:normal;background:#FF9C7A;color:#0F1B33;border-radius:5px;padding:0 5px;font-size:11px;margin-left:4px}
.wz-items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wz-item{display:flex;flex-direction:column;gap:4px;text-align:left;border:1.5px solid var(--line-2,#34497A);background:var(--surface);color:var(--ink);border-radius:12px;padding:8px;min-width:0;position:relative}
.wz-item.on{border-color:#F5C443;background:#2A3350}.wz-item.on::after{content:"✓";position:absolute;top:8px;right:10px;color:#0F1B33;background:#F5C443;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:12px;font-weight:800}
.wz-thumb{aspect-ratio:4/3;border-radius:8px;background:#EEF2F8;display:grid;place-items:center;font-size:26px;overflow:hidden}.wz-thumb img{width:100%;height:100%;object-fit:contain}
.wz-item b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wz-item small{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-kwbox{display:flex;flex-wrap:wrap;gap:7px;align-items:center;border:1.5px solid #F5C443;border-radius:14px;padding:10px;background:var(--bg-2)}
.wz-kwbox input{flex:1;min-width:130px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14.5px;outline:none;padding:6px 2px}.wz-kwbox input::placeholder{color:var(--ink-faint)}
.wz-kw{display:inline-flex;align-items:center;gap:4px;background:#2A3350;border:1px solid #7D6A33;color:#FFD66B;border-radius:20px;padding:5px 7px 5px 12px;font-size:13.5px;font-weight:700}
.wz-kw button{border:0;background:none;color:#FFD66B;font-size:16px;line-height:1;padding:0 3px;cursor:pointer}
.wz-hint{font-size:12px;color:var(--ink-faint);margin-top:6px}
.wz-sum{background:var(--surface);border:1px solid var(--line-2,#34497A);border-radius:14px;padding:2px 14px;font-size:14px}
.wz-sum>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.wz-sum>div:last-child{border:0}
.wz-sum span{color:var(--ink-soft);flex:none}.wz-sum b{text-align:right;line-height:1.5}.wz-sum a{color:#F5C443;font-size:12px;margin-left:6px;cursor:pointer;white-space:nowrap}
.wz-foot{margin-top:auto;padding-top:18px;display:flex;flex-direction:column}
.wz-next{width:100%;padding:15px;font-size:16px;font-weight:800;border-radius:14px}
.wz-skip{margin-top:8px;background:none;border:0;color:var(--ink-soft);font-size:13px;text-decoration:underline}
.ag-reel-hook{background:#2A3350;border:1px solid #7D6A33;color:#FFD66B;border-radius:12px;padding:10px 12px;font-size:13.5px;margin-bottom:10px}.ag-reel-hook b{color:var(--ink)}
.ag-scenes{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.ag-scene{display:grid;grid-template-columns:70px 1fr;gap:10px;background:#0F1B33;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:13px}
.ag-scene em{font-style:normal;color:#F5C443;font-weight:800;font-size:12px}.ag-scene p{margin:2px 0;line-height:1.55}.ag-scene p b{color:var(--ink-soft);font-weight:600;margin-right:4px}
@media (max-width:880px){.wz{min-height:calc(100vh - 160px);padding:18px 16px}.wz-q{font-size:23px}.wz-items{grid-template-columns:repeat(2,1fr)}}

.ag-kw{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg-2)}
.ag-kw-head{display:flex;align-items:baseline;gap:8px;font-size:13px}.ag-kw-head span{font-size:11.5px}.ag-kw-head em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink-faint)}
.ag-kw-box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.ag-kw-box input{flex:1;min-width:160px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;outline:none;padding:6px 2px}
.ag-kw-box input::placeholder{color:var(--ink-faint)}
.ag-kw-chip{display:inline-flex;align-items:center;gap:4px;background:#2A3350;border:1px solid #7D6A33;color:#FFD66B;border-radius:20px;padding:4px 6px 4px 10px;font-size:12.5px;font-weight:600}
.ag-kw-chip button{border:0;background:none;color:#FFD66B;font-size:15px;line-height:1;padding:0 3px;cursor:pointer}
.ag-kw-bar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.ag-kw-bar .chip{padding:5px 10px;font-size:12px}

.dash-ask{border:1.5px solid #7D6A33;background:linear-gradient(135deg,#2A3350,#17284A);border-radius:18px;padding:16px;margin:0 0 18px}
.dash-ask textarea{width:100%;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;line-height:1.6;resize:none;outline:none}
.dash-ask textarea::placeholder{color:var(--ink-faint)}
.dash-ask-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.dash-ask p{margin:10px 0 0;font-size:12px}

.pro-badge{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;background:#F5C443;color:#0F1B33;padding:2px 7px;border-radius:6px;vertical-align:4px}
.nav-item.ag-nav{color:#F5C443;font-weight:700}
.ag-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ag-hero h2{margin:4px 0 6px;font-size:26px;font-weight:800;letter-spacing:-.03em}.ag-hero p{margin:0;font-size:13.5px;line-height:1.6}
.ag-hero-u{font-size:12.5px;color:var(--ink-soft);max-width:420px}
.ag-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.ag-step{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px;margin:18px 0 10px}.ag-step:first-child{margin-top:0}
.ag-step>b{width:22px;height:22px;border-radius:50%;border:1.5px solid #F5C443;color:#F5C443;display:grid;place-items:center;font-size:12px}
.ag-kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ag-kind{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg-2);color:var(--ink)}
.ag-kind span{font-size:22px}.ag-kind b{font-size:14.5px}.ag-kind small{font-size:11.5px;color:var(--ink-soft);line-height:1.45}
.ag-kind.on{border-color:#F5C443;background:#2A3350;box-shadow:0 0 0 3px rgba(245,196,67,.15)}
.ag-ctxs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.ag-ctx{font-size:11.5px;padding:5px 10px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft)}
.ag-ctx.ok{color:#7FD1A0;border-color:#245442;background:#17382F}.ag-ctx.warn{color:#FFD66B;border-color:#7D6A33;background:#2A3350}
.ag-ctx a,.ag-tip a,.fld a{color:#F5C443;cursor:pointer;text-decoration:underline}
.ag-req{font-style:normal;font-size:10.5px;background:#FF9C7A;color:#0F1B33;padding:1px 6px;border-radius:6px;margin-left:4px}
.ag-newcx{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px dashed var(--line-2,#34497A);border-radius:12px;margin:-6px 0 14px}
.ag-note{font-size:12px;color:#FFD66B;background:#2A3350;border-radius:10px;padding:8px 10px;margin:-6px 0 14px}
.ag-more{margin:4px 0 12px;font-size:13px}.ag-more summary{cursor:pointer;color:var(--ink-soft)}
.ag-jobs{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ag-job{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"p b t" "s s s";gap:4px 10px;align-items:center;text-align:left;padding:12px 13px;border-radius:13px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink)}
.ag-job .ag-pill{grid-area:p}.ag-job b{grid-area:b;font-size:13.5px}.ag-job small{grid-area:t;color:var(--ink-faint);font-size:11px}.ag-job>span:not(.ag-pill){grid-area:s;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-job:hover{border-color:#F5C443}
.ag-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;border:1px solid var(--line-2,#34497A);color:var(--ink-soft);white-space:nowrap}
.ag-pill.run{color:#F5C443;border-color:#7D6A33}.ag-pill.run::before{content:"";width:6px;height:6px;border-radius:50%;background:#F5C443;animation:agBlink 1s infinite}
.ag-pill.review{color:#8FB3FF;border-color:#34497A}.ag-pill.ok{color:#7FD1A0;border-color:#245442}.ag-pill.err{color:#FF9C7A;border-color:#5a3644}
@keyframes agBlink{50%{opacity:.25}}
.ag-tip{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--ink-soft);background:var(--bg-2);border-radius:12px;padding:12px}
.ag-card{background:linear-gradient(180deg,#1C2F55,#17284A);border:1px solid var(--line-2,#34497A);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}
.ag-card-top{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600}
.ag-dot{display:inline-block;width:9px;height:9px;border-radius:2px;background:#F5C443;margin-right:9px}
.ag-brief{padding:18px 22px;border-bottom:1px solid var(--line)}.ag-brief small{color:var(--ink-faint);font-size:12px}.ag-brief p{margin:6px 0 10px;font-size:16px;font-weight:700;line-height:1.55}
.ag-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--ink-soft)}
.ag-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px 22px 8px}
.ag-role{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:0}
.ag-av{width:100%;max-width:130px;height:auto}.ag-role.wait .ag-av{opacity:.55}.ag-role.run .ag-av{animation:agBob 1.4s ease-in-out infinite}
@keyframes agBob{50%{transform:translateY(-3px)}}
.ag-role b{font-size:14px;margin-top:4px}.ag-role small{font-size:11.5px;color:var(--ink-soft)}.ag-role.run b{color:#F5C443}
.ag-role em{font-style:normal;font-size:12px;color:var(--ink-faint);margin-top:4px}.ag-role.run em{color:#F5C443;font-weight:700}.ag-role.done em{color:var(--ink-soft)}
.ag-rnote{margin:2px 0 0;font-size:11px;color:var(--ink-faint);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ag-bar{width:100%;height:5px;border-radius:5px;background:#26385E;overflow:hidden;margin-top:6px}.ag-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#EEF2F8,#F5C443);transition:width .6s}
.ag-role.run .ag-bar i{background:linear-gradient(90deg,#F5C443,#FFD66B)}.ag-role.done .ag-bar i{background:#D5DCEA}
.ag-total{display:flex;align-items:center;gap:12px;padding:10px 22px;font-size:12.5px;color:var(--ink-soft)}.ag-bar.big{height:6px;margin:0;flex:1}
.ag-now{display:flex;align-items:center;gap:10px;padding:4px 22px 18px;font-size:13.5px;font-weight:700}
.ag-result{border-top:1px solid var(--line);background:#132240;padding:18px 22px 20px}
.ag-rtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
.ag-rtab{border:0;background:none;color:var(--ink-soft);font-weight:700;font-size:13.5px;padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}.ag-rtab b{color:var(--ink-faint);font-size:12px;margin-left:3px}
.ag-rtab.on{color:var(--ink);border-bottom-color:#F5C443}
.ag-rgrid{display:grid;grid-template-columns:1.4fr .9fr;gap:16px}
.ag-out{font-size:14px;line-height:1.75;background:#0F1B33}
.ag-title{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;margin-bottom:6px;font-size:13.5px;cursor:pointer}.ag-title span{flex:1}.ag-title.on{border-color:#F5C443;background:#2A3350}
.ag-title input{accent-color:#F5C443}
.ag-tags{font-size:12.5px;color:#8FB3FF;margin:8px 0;line-height:1.6}
.ag-sub{font-weight:800;font-size:13px;margin:16px 0 8px}
.ag-reply{background:#0F1B33;border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:6px;font-size:13px}.ag-reply p{margin:4px 0 2px;color:var(--ink-soft);line-height:1.6}
.ag-side{background:#0F1B33;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:12.5px;line-height:1.6;align-self:start}
.ag-side p{margin:4px 0}.ag-side ul{margin:4px 0;padding-left:18px;color:var(--ink-soft)}.ag-side b{color:var(--ink)}
.ag-warn{margin-top:10px;font-size:12px;color:#FFD66B;background:#2A3350;border:1px solid #7D6A33;border-radius:10px;padding:8px 10px}
.ag-err{padding:18px 22px;color:#FF9C7A;font-size:13.5px;line-height:1.6;border-top:1px solid var(--line)}
.ag-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.lib-item{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:8px;background:var(--bg-2)}
.lib-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.lib-top b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-item p{margin:5px 0;font-size:12.5px;color:var(--ink-soft);line-height:1.55;white-space:pre-line}
.lib-meta{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ink-faint)}
.dash-ag{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;margin-bottom:16px;border-radius:18px;border:1.5px solid #7D6A33;background:linear-gradient(135deg,#2A3350,#17284A);cursor:pointer}
.dash-ag b{font-size:16px}.dash-ag p{margin:4px 0 0;font-size:12.5px;color:var(--ink-soft)}
@media (max-width:880px){
  .ag-grid,.ag-rgrid{grid-template-columns:1fr}
  .ag-roles{grid-template-columns:repeat(4,1fr);gap:6px;padding:16px 12px 6px}.ag-role b{font-size:12px}.ag-role small,.ag-rnote{display:none}
  .ag-card-top,.ag-brief,.ag-total,.ag-now,.ag-result{padding-left:14px;padding-right:14px}
  .ag-hero h2{font-size:22px}
}
#upd-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9500;display:flex;align-items:center;gap:12px;background:var(--surface,#fff);color:var(--ink,#222);border:1.5px solid var(--gold,#C9A15A);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 14px 40px rgba(0,0,0,.35);font-size:13.5px;white-space:nowrap}
#upd-bar button{background:var(--gold,#C9A15A);color:#fff;border:0;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer}
/* ===== 첫 로그인 시작 가이드 ===== */
.ob-ov{position:fixed;inset:0;z-index:9000;background:rgba(14,8,16,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.ob-card{width:100%;max-width:500px;min-height:0!important;max-height:calc(100vh - 32px);overflow-y:auto;box-shadow:0 30px 90px rgba(0,0,0,.55);animation:obIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes obIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.ob-hero{display:flex;justify-content:center;margin:10px 0 -8px}
.ob-hero img{width:84px;height:84px;border-radius:22px;box-shadow:0 14px 40px rgba(245,196,67,.35)}
.ob-hero.done{width:76px;height:76px;margin:12px auto -8px;border-radius:50%;background:#F5C443;color:#0F1B33;font-size:40px;font-weight:900;align-items:center}
.ob-card .wz-q{text-align:left}
.ob-list{display:flex;flex-direction:column;gap:8px}
.ob-biz{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ob-biz .wz-opt{padding:13px 12px;font-size:14.5px}
.ob-item{display:flex;gap:10px;border:1.5px solid var(--line-2,#34507F);border-radius:14px;padding:10px;background:var(--surface)}
.ob-item-n{width:24px;height:24px;border-radius:50%;background:#233A66;color:#FFD66B;font-weight:800;font-size:13px;display:grid;place-items:center;flex:none;margin-top:8px}
.ob-item-f{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ob-item-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ob-item .inp{padding:9px 11px;font-size:14px}
.ob-sum{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft,#3a2a3d);font-size:14px}
.ob-sum:last-child{border-bottom:0}.ob-sum span{color:var(--ink-soft)}.ob-sum b{text-align:right}.ob-sum em{color:var(--ink-faint);font-style:normal;font-weight:500}
.ob-btns{display:flex;gap:8px}.ob-btns .wz-next{flex:2}.ob-later{flex:1;padding:15px;font-size:15px;font-weight:700;border-radius:14px;background:transparent;border:1.5px solid var(--line-2,#34507F);color:var(--ink-soft)}
.ob-resume{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(90deg,rgba(245,196,67,.18),rgba(245,196,67,.06));border:1.5px solid rgba(245,196,67,.45);border-radius:16px;padding:14px 16px;margin:0 0 16px}
.ob-resume b{display:block;font-size:15px}.ob-resume span{font-size:12.5px;color:var(--ink-soft)}
@media(max-width:560px){.ob-ov{align-items:flex-end;padding:0}.ob-card{max-width:none;border-radius:22px 22px 0 0;max-height:94vh}}

/* ===== 첫 화면 아이콘 기능판 ===== */
.m-br{display:none}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.hub-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 10px 18px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .15s,border-color .15s}
.hub-tile:hover{transform:translateY(-2px);border-color:#F5C443}.hub-tile:active{transform:scale(.97)}
.hub-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:32px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.hub-svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.hub-ic.sm .hub-svg{width:24px;height:24px}
.hub-ic.sm{width:44px;height:44px;border-radius:14px;font-size:22px;box-shadow:none}
.hub-tile b{font-size:16px;font-weight:800;letter-spacing:-.02em}.hub-tile small{font-size:12px;color:var(--ink-soft,#A6B1C8);text-align:center;line-height:1.4}
.hub-ask{display:flex;align-items:center;gap:8px;border:1.5px solid rgba(245,196,67,.45);background:var(--surface);border-radius:16px;padding:8px 8px 8px 14px;margin-bottom:14px}
.hub-ask input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-size:14.5px;font-family:inherit}
.hub-ask-ic{font-size:20px}
.hub-alerts{display:flex;flex-direction:column;gap:8px}
.hub-alert{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer}
.hub-at{flex:1}.hub-alert em{font-style:normal;color:#F5C443;font-weight:700;font-size:13px;white-space:nowrap}
.hub-ov{position:fixed;inset:0;z-index:8500;background:rgba(14,8,16,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:hubFade .2s}
.hub-sheet{width:100%;max-width:460px;background:var(--surface,#17284A);border:1px solid var(--line);border-radius:22px;padding:14px 16px 18px;box-shadow:0 30px 80px rgba(0,0,0,.55);animation:hubUp .28s cubic-bezier(.2,.8,.2,1);max-height:88vh;overflow-y:auto}
.hub-grab{display:none;width:44px;height:5px;border-radius:5px;background:#34507F;margin:0 auto 10px}
.hub-hd{display:flex;align-items:center;gap:12px;padding:4px 2px 12px}.hub-hd b{display:block;font-size:18px}.hub-hd small{font-size:12.5px;color:var(--ink-soft,#A6B1C8)}
.hub-x{margin-left:auto;background:none;border:0;color:var(--ink-soft,#A6B1C8);font-size:18px;cursor:pointer;padding:6px}
.hub-list{display:flex;flex-direction:column;gap:8px}
.hub-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line-2,#34507F);background:transparent;color:var(--ink);cursor:pointer}
.hub-row:hover{border-color:#F5C443;background:#233A66}
.hub-ric{width:42px;height:42px;border-radius:12px;background:#233A66;display:grid;place-items:center;font-size:21px;flex:none}
.hub-rt{flex:1;min-width:0}.hub-rt b{display:block;font-size:15.5px}.hub-rt small{font-size:12.5px;color:var(--ink-soft,#A6B1C8)}
.hub-chev{color:#F5C443;font-size:22px;font-weight:700}
@keyframes hubFade{from{opacity:0}to{opacity:1}}@keyframes hubUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:560px){.m-br{display:inline}.hub-grid{gap:9px}.hub-tile{padding:16px 6px 14px;border-radius:18px}.hub-ic{width:54px;height:54px;font-size:27px;border-radius:17px}.hub-tile b{font-size:14.5px}.hub-tile small{font-size:11px}
 .hub-ov{align-items:flex-end;padding:0}.hub-sheet{max-width:none;border-radius:22px 22px 0 0;padding-bottom:26px}.hub-grab{display:block}}

/* ===== 인스타 미리보기 ===== */
.ig-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:start}
.ig-pv-lab{font-size:12.5px;font-weight:700;color:var(--ink-soft,#A6B1C8);margin-bottom:8px}
.ig-phone{background:#111;border-radius:28px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.ig-card{background:#fff;color:#111;border-radius:21px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Pretendard',sans-serif;letter-spacing:0}
.ig-top{display:flex;align-items:center;gap:9px;padding:10px 12px}
.ig-av{width:34px;height:34px;border-radius:50%;padding:2px;background:conic-gradient(#FFD66B,#E37FA0,#B47EE0,#FFD66B);flex:none}
.ig-av i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#0F1B33;color:#F5C443;font-style:normal;font-weight:800;font-size:13px;border:2px solid #fff}
.ig-who{flex:1;min-width:0;line-height:1.2}.ig-who b{font-size:13px;display:block}.ig-who small{font-size:11px;color:#555}
.ig-more{font-size:12px;letter-spacing:1px;color:#222}
.ig-media{position:relative;aspect-ratio:1/1;background:#F3EEF1}
.ig-media img{width:100%;height:100%;object-fit:cover;display:block}
.ig-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;background:linear-gradient(135deg,#FBEFF3,#F1E6FA);color:#6b4c5c}
.ig-empty span{font-size:36px}.ig-empty b{font-size:14px}.ig-empty small{font-size:11.5px;opacity:.75}
.ig-count{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:600;border-radius:12px;padding:3px 8px}
.ig-arr{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#222;font-size:18px;line-height:24px;cursor:pointer;padding:0}
.ig-arr.l{left:8px}.ig-arr.r{right:8px}
.ig-acts{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 10px 4px}
.ig-acts>span{display:flex;gap:12px}.ig-acts>span:last-child{justify-content:flex-end}
.ig-acts svg{width:23px;height:23px;fill:none;stroke:#111;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ig-dots{display:flex;gap:4px}.ig-dots i{width:6px;height:6px;border-radius:50%;background:#c9c9c9}.ig-dots i.on{background:#3897f0}
.ig-likes{font-size:13px;font-weight:700;padding:2px 12px}
.ig-cap{font-size:13px;line-height:1.5;padding:3px 12px 0;max-height:190px;overflow-y:auto;word-break:keep-all}
.ig-card,.ig-card b,.ig-card span,.ig-card div,.ig-card small{color:#111!important;opacity:1}
.ig-card .ig-who small{color:#555!important}.ig-card .ig-time{color:#888!important}
.ig-card .ig-tag{color:#00376b!important}.ig-card .ig-count{color:#fff!important}.ig-card .ig-av i{color:#F5C443!important}.ig-card .ig-empty b,.ig-card .ig-empty small,.ig-card .ig-empty span{color:#6b4c5c!important}
.ig-time{font-size:10.5px;color:#888;padding:6px 12px 12px}
.ag-ph-row{display:flex;gap:8px;flex-wrap:wrap}
.ag-ph{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;border:1.5px solid var(--line-2,#34507F);padding:0;background:#233A66;cursor:pointer}
.ag-ph img{width:100%;height:100%;object-fit:cover}.ag-ph.on{border-color:#F5C443;cursor:default}
.ag-ph em{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff;font-style:normal;font-size:24px;font-weight:800}
.ag-ph span{position:absolute;left:4px;top:4px;background:#F5C443;color:#0F1B33;font-size:10px;font-weight:800;border-radius:6px;padding:1px 5px}
.ag-ph button{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:11px;line-height:20px;padding:0;cursor:pointer}
@media(max-width:1180px){.ig-wrap{grid-template-columns:1fr}.ig-pv{max-width:380px;width:100%;margin:0 auto 6px}}
.pv-sms{min-height:380px}

/* ===== 블로그·카페·문자 미리보기 ===== */
.pv-frame{background:#111;border-radius:28px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.pv-frame>div{background:#fff;border-radius:21px;overflow:hidden;max-height:620px;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,'Pretendard',sans-serif;letter-spacing:-.01em}
.pv-frame,.pv-frame *{color:#222}
.pv-av{width:34px;height:34px;border-radius:50%;background:#0F1B33;color:#F5C443!important;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.pvb-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #eee;font-size:13px}.pvb-logo{font-size:16px}
.pvb-cat{padding:16px 16px 0;font-size:12px;color:#7A6A3A!important;font-weight:700}
.pvb-title{font-size:21px;line-height:1.35;font-weight:800;margin:6px 16px 14px;color:#111!important}
.pvb-auth,.pvc-auth{display:flex;align-items:center;gap:10px;padding:0 16px 14px;border-bottom:1px solid #eee}
.pvb-auth b,.pvc-auth b{display:block;font-size:13px}.pvb-auth small,.pvc-auth small{font-size:11.5px;color:#999!important}
.pvb-body,.pvc-body{padding:16px;font-size:14px;line-height:1.85}
.pvb-body p,.pvc-body p{margin:0;word-break:keep-all}
.pvb-ph img,.pvc-ph img{width:100%;display:block;border-radius:4px;margin-bottom:12px}
.pvb-foot,.pvc-foot{display:flex;gap:16px;padding:12px 16px 16px;border-top:1px solid #eee;font-size:12.5px;color:#666!important}
.pvc-top{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#FBF4F6;border-bottom:1px solid #f0e3e8;font-size:14px}
.pvc-board{padding:14px 16px 0;font-size:12px;color:#7A6A3A!important;font-weight:700}
.pvc-title{font-size:19px;line-height:1.4;font-weight:800;margin:6px 16px 14px;color:#111!important}
.pvc-auth em{font-style:normal;font-size:10.5px;background:#EAF6EE;color:#3E8E5E!important;border-radius:6px;padding:1px 6px;margin-left:4px;font-weight:700}
.pv-sms{display:flex;flex-direction:column;min-height:520px;background:#fff}
.pvs-top{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px 10px;border-bottom:1px solid #eee}
.pvs-top b{font-size:14px}.pvs-top small{font-size:11px;color:#888!important}
.pvs-chat{flex:1;padding:12px 12px 16px;background:#F7F7F9}
.pvs-day{text-align:center;font-size:11px;color:#999!important;margin:2px 0 12px}
.pvs-row{display:flex;align-items:flex-end;gap:6px}
.pvs-bub{max-width:78%;background:#E9E9EE;border-radius:18px 18px 18px 6px;padding:10px 13px;font-size:13.5px;line-height:1.6;word-break:keep-all}
.pvs-time{font-size:10px;color:#999!important;white-space:nowrap}
.pvs-in{padding:10px 12px;border-top:1px solid #eee}.pvs-in span{display:block;border:1px solid #ddd;border-radius:18px;padding:7px 14px;font-size:12.5px;color:#aaa!important}
.pv-ph-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ig-pv-lab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pv-edit{background:#F5C443;color:#0F1B33;border:0;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.ig-cap{cursor:text}
.ed-flash{outline:3px solid #F5C443!important;box-shadow:0 0 0 6px rgba(245,196,67,.25)!important;transition:outline .2s}
.m-shopbar{display:none}
@media(max-width:560px){.topbar .shopchip{display:none!important}
 .m-shopbar.on{display:flex;align-items:center;gap:10px;margin:10px 16px 0;padding:9px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
 .m-shopbar .av{width:30px;height:30px;border-radius:50%;background:#0F1B33;border:1.5px solid #F5C443;color:#F5C443;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
 .m-shop-t{flex:1;min-width:0;line-height:1.25}.m-shop-t b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-shop-t small{font-size:11.5px;color:var(--ink-soft,#A6B1C8)}
 .m-shopbar em{font-style:normal;font-size:12px;color:#F5C443;font-weight:700;white-space:nowrap}}
.ck-ring{width:30px;height:30px;border-radius:50%;background:#0F1B33;display:inline-grid;place-items:center;margin-right:10px;vertical-align:middle;flex:none}
.ck-ring svg{width:17px;height:17px;fill:none;stroke:#F5C443;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.wz-next:has(.ck-ring){display:flex;align-items:center;justify-content:center}
.pub-btn{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:13px 14px;border-radius:16px;border:0;background:linear-gradient(90deg,#FFD66B,#F5C443);color:#0F1B33;text-align:left;cursor:pointer;box-shadow:0 10px 26px rgba(245,196,67,.3)}
.pub-btn .pub-ic{width:40px;height:40px;border-radius:12px;background:#0F1B33;display:grid;place-items:center;font-size:20px;flex:none}
.pub-btn b{display:block;font-size:15.5px;color:#0F1B33}.pub-btn small{font-size:12px;color:#3A3320}.pub-btn em{margin-left:auto;font-style:normal;font-size:24px;font-weight:800}
.pub-btn.done{background:#2F3A33;color:#BFE8CF;box-shadow:none;border:1px solid #3E6B52}.pub-btn.done b{color:#BFE8CF}.pub-btn.done small{color:#8FC2A4}.pub-btn.done .pub-ic{background:#1E2A23}
.pub-hd{display:flex;align-items:center;gap:12px;margin:2px 0 14px}.pub-hd>span{font-size:28px}.pub-hd b{display:block;font-size:18px}.pub-hd small{font-size:12.5px;color:var(--ink-soft)}
.pub-steps{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:s}
.pub-steps li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2,#2F2033);font-size:13.5px;counter-increment:s}
.pub-steps li span::before{content:counter(s);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#F5C443;color:#0F1B33;font-size:11px;font-weight:800;margin-right:8px}
.pub-go{width:100%;padding:15px;font-size:15.5px;font-weight:800;border-radius:14px}
.pub-title{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border:1.5px dashed var(--line-2,#34507F);border-radius:12px}.pub-title div{flex:1;min-width:0}.pub-title small{display:block;font-size:11px;color:var(--ink-soft)}.pub-title b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-tip{font-size:12.5px;line-height:1.7;color:var(--ink-soft);margin:12px 0 4px;background:rgba(245,196,67,.08);border-radius:10px;padding:10px 12px}
.pub-cafe{margin-bottom:12px}.pub-cafe em{font-style:normal;color:#F5C443}
.biz-ic{width:38px;height:38px;border-radius:12px;border:1.5px solid rgba(245,196,67,.55);display:grid;place-items:center;flex:none}
.biz-ic svg{width:22px;height:22px;fill:none;stroke:#F5C443;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wz-opt.on .biz-ic{background:#F5C443;border-color:#F5C443}.wz-opt.on .biz-ic svg{stroke:#0F1B33}
@media(max-width:560px){.wz{min-height:0!important}.wz-foot{margin-top:22px!important;padding-top:4px!important}}

/* line icons (emoji replacement) */
.ei{width:1.15em;height:1.15em;vertical-align:-.22em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block}
.hub-ric,.wz-ic,.h-ic,.pub-ic,.pvb-logo,.pvc-top,.photoMainIcon,.fab-icon,.hub-ask-ic{color:var(--plum,currentColor)}
.hub-ric .ei,.wz-ic .ei,.h-ic .ei,.pub-ic .ei{width:1em;height:1em;vertical-align:middle}
.wz-ic,.h-ic,.hub-ric,.pub-ic{display:inline-grid;place-items:center}
.ag-sub .ei,.hd h3 .ei,.wz-ai .ei,.ag-tip .ei,.pr-tip .ei,.vocTitle .ei,.eyebrow .ei{color:var(--plum,currentColor)}
.warnbar .ei,.ag-err .ei{color:var(--rose,#E5484D)}
/* 포토 상품찾기: 인터넷(네이버 쇼핑) 결과 · 구글 렌즈 */
.web-card{text-decoration:none;color:inherit;display:block;transition:border-color .15s}
.web-card:hover{border-color:var(--plum)}
.web-card .match-img{background:#fff}
.web-price{font-size:13.5px;font-weight:800;color:var(--plum-deep)}
.web-card small{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-loading{display:flex;align-items:center;gap:10px;padding:18px;font-size:13px;color:var(--muted)}
.lens-box{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.lens-box .muted{font-size:11.5px;text-align:center}
.web-kw{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.web-kw .muted{font-size:12px;font-weight:600;width:100%}
.web-card .match-body b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.4;min-height:2.8em}
/* ===== 블로그 섹션별 이미지 ===== */
.bi-cta{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:12px 14px;border-radius:14px;border:1.5px dashed var(--plum);background:var(--plum-soft);color:var(--ink);text-align:left;cursor:pointer}
.bi-cta b{display:block;font-size:14px}.bi-cta small{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}.bi-cta em{margin-left:auto;font-style:normal;font-size:20px;color:var(--plum)}
.bi-panel{margin-top:16px}
.bi-hd{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.bi-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--ink-soft)}.bi-legend b{color:var(--ink);font-weight:600}
.bi-list{display:grid;gap:14px;margin-top:14px}
.bi-sec{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface-2)}
.bi-sec-hd{display:flex;align-items:center;gap:8px}.bi-sec-hd em{font-style:normal;font-weight:700;font-size:12px;color:var(--plum)}.bi-sec-hd b{font-size:14.5px}
.bi-sec-text{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:6px 0 10px}
.bi-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bi-type{display:flex;flex-direction:column;gap:3px;padding:6px 6px 8px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;min-width:0}
.bi-type.on{border-color:var(--plum);box-shadow:0 0 0 2px var(--plum-soft)}.bi-type[disabled]{opacity:.45;cursor:not-allowed}
.bi-type b{font-size:12px;display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bi-type small{font-size:11px;color:var(--ink-soft)}
.bi-ex{position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--surface-2);margin-bottom:4px}
.bi-ex img,.bi-ex-svg{width:100%;height:100%;object-fit:cover;display:block}
.bi-ex-ic{display:grid;place-items:center;width:100%;height:100%;font-size:26px;color:var(--ink-soft)}
.bi-badge{position:absolute;right:4px;bottom:4px;width:22px;height:22px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center;font-size:12px}
.bi-opt{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.bi-opt .lab{width:100%;font-size:12px;color:var(--ink-soft)}.bi-opt textarea{width:100%}
.bi-ph-row{display:flex;gap:6px;flex-wrap:wrap}
.bi-ph{width:56px;height:56px;border-radius:10px;overflow:hidden;border:2px solid var(--line);padding:0;background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--ink-soft)}
.bi-ph.on{border-color:var(--plum)}.bi-ph img{width:100%;height:100%;object-fit:cover}
.bi-res{margin-top:12px}.bi-res img{width:100%;border-radius:10px;display:block;border:1px solid var(--line)}
.bi-res-act{display:flex;gap:6px;margin-top:6px}
.bi-res.wait,.bi-res.empty{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px dashed var(--line);border-radius:10px;font-size:12.5px;color:var(--ink-soft)}
.bi-res.wait{justify-content:flex-start}
.bi-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:720px){.bi-types{grid-template-columns:repeat(2,1fr)}}
/* 시작 가이드: 카드를 눌러 그 자리에서 입력(아코디언) + 하단 버튼 고정 */
.ob-acc{border:1.5px solid var(--line-2,#34507F);border-radius:14px;background:var(--surface);overflow:hidden}
.ob-acc.open{border-color:#F5C443;box-shadow:0 0 0 3px rgba(245,196,67,.15)}
.ob-acc-hd{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:none;border:0;color:var(--ink);text-align:left;cursor:pointer}
.ob-acc-hd .ob-num{width:28px;height:28px;border-radius:50%;background:#F5C443;color:#0F1B33;font-weight:800;display:grid;place-items:center;flex:none;font-size:14px}
.ob-acc.done:not(.open) .ob-num{background:#2E7D5B;color:#fff}
.ob-acc-t{display:flex;flex-direction:column;min-width:0;flex:1}.ob-acc-t b{font-size:15px}.ob-acc-t small{color:var(--ink-soft);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-acc.done:not(.open) .ob-acc-t small{color:#7FD1A8}
.ob-acc-hd em{font-style:normal;color:var(--ink-soft);font-size:14px}
.ob-acc-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:8px}
.ob-acc-body .fld{margin:0}
.ob-tags .chip{font-size:13.5px;padding:8px 12px}
.ob-list .ob-acc{display:block;padding:0}
.ob-card{max-height:calc(100dvh - 32px)}
.ob-card .ob-foot{position:sticky;bottom:-20px;margin:auto -22px -20px;padding:14px 22px calc(16px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line-soft,#2a3a5e);z-index:2}
@media(max-width:560px){.ob-ov{height:100dvh}.ob-card{max-height:calc(100dvh - 12px)!important;padding-bottom:0}.ob-card .ob-foot{margin:18px -16px 0!important;padding:12px 16px calc(14px + env(safe-area-inset-bottom))!important;bottom:0}}
.ob-ov.ready .ob-card{animation:none}
/* ===== 상세페이지 만들기 (새 버전): 만드는 화면은 앱 톤, 상세페이지(종이)는 아이보리 한 톤 ===== */
.pdp{max-width:520px;margin:0 auto}
.pdp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:14px}.pdp-top h2{margin:4px 0 0;font-size:22px}
.pdp-top-act{display:flex;gap:8px;align-items:center}
.pdp-plus{width:40px;height:40px;border-radius:50%;border:0;background:#F5C443;color:#0F1B33;font-size:24px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(245,196,67,.3)}
.pdp-old{font-size:12px;text-align:center;margin:18px 0 6px}.pdp-old a{color:var(--plum);text-decoration:underline}
.pdq{display:block;width:100%;margin:12px 0;border-radius:16px;border:1.5px solid var(--line-2,#34507F);background:var(--surface);color:var(--ink);text-align:left}
.pdq.open{border-color:#F5C443;box-shadow:0 0 0 3px rgba(245,196,67,.14);padding:16px;animation:pdqIn .3s ease}
@keyframes pdqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pdq-hd{display:flex;gap:12px;align-items:flex-start}.pdq-hd b{display:block;font-size:17px}.pdq-hd small{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:3px;line-height:1.5}
.pdq-n{width:28px;height:28px;border-radius:50%;background:#F5C443;color:#0F1B33;font-weight:800;display:grid;place-items:center;flex:none;font-size:14px}
.pdq-body{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.pdq-go{width:100%;margin-top:8px;padding:14px;font-size:15px}
.pdq.done{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer}.pdq.done .pdq-n{background:#2E7D5B;color:#fff}
.pdq-sum{flex:1;min-width:0}.pdq-sum small{display:block;font-size:11.5px;color:var(--ink-soft)}.pdq-sum b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdq.done em{font-style:normal;font-size:12px;color:var(--plum)}
.pdp-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 12px;border:2px dashed var(--line-2,#34507F);border-radius:14px;cursor:pointer;text-align:center}
.pdp-drop svg{width:30px;height:30px;color:#F5C443}.pdp-drop b{font-size:15px}.pdp-drop small{color:var(--ink-soft);font-size:12.5px}
.pdp-ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pdp-ph{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:var(--surface-2)}
.pdp-ph.main{border-color:#F5C443}.pdp-ph img{width:100%;height:100%;object-fit:cover}
.pdp-ph>button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;cursor:pointer}
.pdp-ph em,.pdp-ph .mk{position:absolute;left:3px;bottom:3px;font-style:normal;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:6px;background:#F5C443;color:#0F1B33;border:0;cursor:pointer}
.pdp-ph .mk{background:rgba(0,0,0,.6);color:#fff;top:auto;right:auto;width:auto;height:auto}
.pdp-ph.add{display:grid;place-items:center;border-style:dashed;cursor:pointer;font-size:24px;color:var(--ink-soft)}
.pdp-fg{margin-top:4px}.pdp-fg-hd{display:flex;gap:6px;align-items:baseline;margin:4px 0 6px}.pdp-fg-hd b{font-size:13px}.pdp-fg-hd small{font-size:11.5px;color:#F5C443}
.pdp-hide{display:none}
.pdp-addfeat{display:flex;gap:6px;width:100%;margin-top:4px}.pdp-addfeat .inp{flex:1;padding:8px 10px;font-size:14px}
.pdp-fp{border-top:1px solid var(--line-soft,#2a3a5e);padding-top:8px}.pdp-fp b{font-size:13.5px}
.pdp-fp-row{display:flex;gap:6px;overflow-x:auto;padding:6px 0 2px}
.pdp-fp-ph{flex:none;width:58px;height:58px;border-radius:10px;border:2px solid var(--line);background:var(--surface-2);padding:0;overflow:hidden;cursor:pointer;color:var(--ink-soft);font-size:12px;display:grid;place-items:center}
.pdp-fp-ph.on{border-color:#F5C443}.pdp-fp-ph img{width:100%;height:100%;object-fit:cover}.pdp-fp-ph.add{border-style:dashed;font-size:20px}
.pdp-sz-head,.pdp-sz{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 28px;gap:5px;align-items:center}
.pdp-sz-head span{font-size:11.5px;color:var(--ink-soft)}.pdp-sz .inp{padding:8px 6px;font-size:14px;text-align:center}
.pdp-sz-extra{grid-column:1/-1;text-align:left!important;font-size:12.5px!important}.pdp-sz-x{border:0;background:none;color:var(--ink-soft);cursor:pointer}
.pdp-sz+.pdp-sz{margin-top:6px}
.pdp-guide{display:flex;flex-direction:column;gap:8px}.pdp-guide>div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.6}
.pdp-guide>div>b{display:block;font-size:12px;color:var(--plum);margin-bottom:2px}
.pdp-guide-cats p{margin:0;font-size:12px;color:var(--ink-soft)}.pdp-guide-cats em{font-style:normal;font-weight:700;color:var(--ink);margin-right:4px}
.pdp-resume{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px solid rgba(245,196,67,.45);background:rgba(245,196,67,.1);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.pdp-resume b{display:block;font-size:14px}.pdp-resume span{font-size:12px;color:var(--ink-soft)}
.pdp-vrow{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft,#2a3a5e)}.pdp-vrow img,.pdp-vth{width:46px;height:46px;border-radius:8px;object-fit:cover;background:var(--surface-2);flex:none}
.pdp-vrow>div{flex:1;min-width:0}.pdp-vrow b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdp-vrow small{font-size:11.5px;color:var(--ink-soft)}
.pdp-fbar{position:sticky;top:0;z-index:5;background:var(--bg,#0E1729);padding:10px 0;margin-bottom:10px}.pdp-fbar.bottom{position:static;margin:12px 0 0}
.pdp-fbar-btns{display:flex;gap:6px;flex-wrap:wrap}.pdp-fbar-btns .btn{flex:1;min-width:0;white-space:nowrap}
.pdp-fbar-shots{display:flex;gap:6px;align-items:center;margin-bottom:8px;font-size:12px;color:var(--ink-soft)}
.pdp-fbar-shots button{width:54px;height:38px;border-radius:8px;overflow:hidden;border:2px solid var(--line);padding:0;cursor:pointer;background:none}.pdp-fbar-shots button.on{border-color:#F5C443}.pdp-fbar-shots img{width:100%;height:100%;object-fit:cover}
/* 종이(결과물) — 430px 기준으로 그리고 PNG는 2배(860px) */
.pd-paper{max-width:430px;margin:0 auto;background:#F7F3EE;color:#2B2622;border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.35);font-family:Pretendard,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;letter-spacing:-.01em}
.pdp .pd-paper+.pd-paper{margin-top:-8px;border-top-left-radius:0;border-top-right-radius:0}
.pdp.is-finished .pd-paper{border-radius:6px}
.pd-sec{padding:40px 26px}
.pd-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#A07E5E;text-transform:uppercase}.pd-paper .c{text-align:center}
.pd-h1{font-size:28px;font-weight:800;line-height:1.3;margin:8px 0 10px;color:#2B2622;word-break:keep-all}
.pd-h2{font-size:21px;font-weight:800;line-height:1.4;margin:8px 0 14px;color:#2B2622;word-break:keep-all}
.pd-sub{font-size:15px;line-height:1.7;color:#6B5E52;margin:0;word-break:keep-all}
.pd-p{font-size:14.5px;line-height:1.85;color:#4A4038;margin:14px 0 0;word-break:keep-all}
.pd-note{font-size:11.5px;color:#9A8B7C;margin:10px 0 0;line-height:1.6}
.pd-hero{padding:0}.pd-hero-img{position:relative;aspect-ratio:3/2;background:#E9E1D6;overflow:hidden}.pd-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.pd-hero-txt{padding:30px 26px 36px}
.pd-badge{position:absolute;left:12px;bottom:12px;display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:600;padding:7px 11px;border-radius:999px;background:rgba(20,16,12,.7);color:#fff;border:0}
.pd-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:200% 100%;animation:pdSh 1.4s linear infinite}
@keyframes pdSh{from{background-position:200% 0}to{background-position:-200% 0}}
.pd-kp{background:#FFFFFF}.pd-kp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.pd-kp-grid>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 6px;border-radius:14px;background:#F7F3EE}
.pd-kp-ic{width:40px;height:40px;border-radius:50%;background:#2B2622;color:#F5D9A8;display:grid;place-items:center;font-size:18px}
.pd-kp-grid b{font-size:13.5px;line-height:1.35;word-break:keep-all}.pd-kp-grid small{font-size:11.5px;color:#6B5E52;line-height:1.5;word-break:keep-all}
.pd-feat+.pd-feat{border-top:1px solid #E6DCCF}
.pd-feat-img{margin-top:6px;border-radius:14px;overflow:hidden;background:#E9E1D6}.pd-feat-img img{width:100%;display:block}
.pd-mat{background:#EFE7DC}.pd-mat-name{font-size:24px;font-weight:800;color:#8A6B4C;margin:2px 0 4px}
.pd-mood{padding:0;position:relative}.pd-mood img{width:100%;display:block}.pd-mood-cap{margin:0;padding:20px 26px 26px;text-align:center;font-size:15px;color:#6B5E52;background:#F7F3EE}
.pd-size{background:#FFFFFF}.pd-dim{width:100%;max-width:340px;display:block;margin:6px auto 14px}
.pd-table{width:100%;border-collapse:collapse;font-size:13.5px}.pd-table th{background:#2B2622;color:#F7F3EE;font-weight:600;padding:9px 4px}.pd-table td{text-align:center;padding:10px 4px;border-bottom:1px solid #E6DCCF}
.pd-table tr.ex td{font-size:11.5px;color:#8A7A6A;padding:6px 4px 10px;text-align:left}
.pd-shop{background:#2B2622;color:#F7F3EE;text-align:center}.pd-shop .pd-h2{color:#F7F3EE}
.pd-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:4px 0 18px}.pd-tags span{font-size:12px;padding:6px 11px;border-radius:999px;border:1px solid rgba(247,243,238,.35)}
.pd-shop-name{font-size:18px;font-weight:800;color:#F5D9A8}.pd-shop-meta{font-size:12.5px;opacity:.75;margin-top:4px}
[data-ped][contenteditable]{outline:1.5px dashed #C9A27E;outline-offset:3px;border-radius:4px;cursor:text}
@media(max-width:560px){.pdp-fbar-btns{display:grid;grid-template-columns:1fr 1fr}.pdp-fbar-btns .btn{font-size:13px;padding:10px 6px}}
/* 상세페이지 개편 2: 추천·구성·전원·구매 전 확인·배송 섹션 */
.pdp-tip{display:block;font-size:11.5px;color:#F5C443;margin-top:2px}
.pd-rec-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pd-rec-list li{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:12px;padding:13px 14px;font-size:14.5px;line-height:1.5}

.pd-kp-grid.n4{grid-template-columns:repeat(2,1fr)}.pd-kp-grid.n5{grid-template-columns:repeat(3,1fr)}
.pd-mat-row+.pd-mat-row{margin-top:22px;padding-top:20px;border-top:1px solid #DCCFBF}.pd-mat-row>small{font-size:11.5px;color:#9A8B7C;font-weight:700}
.pd-comp{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 16px}.pd-comp span{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:#F7F3EE;border:1px solid #E0D4C4}
.pd-sx{margin-top:14px;border-top:1px solid #E6DCCF}.pd-sx>div{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid #E6DCCF;font-size:13px}.pd-sx span{color:#8A7A6A}
.pd-power{background:#EFE7DC}.pd-ul{margin:4px 0 0;padding-left:18px;font-size:14px;line-height:1.75;color:#4A4038}.pd-ul li+li{margin-top:6px}
.pd-check{background:#fff}.pd-ck{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pd-ck li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;padding:12px 14px;border-radius:12px;background:#F7F3EE}

.pd-dv>div{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #E6DCCF;font-size:14px;line-height:1.5}.pd-dv>div>span{flex:none;width:84px;color:#8A7A6A;font-size:13px}

.pd-dot{flex:none;width:22px;height:22px;line-height:22px;border-radius:50%;background:#8A6B4C;color:#fff;font-size:12px;font-weight:700;font-style:normal;text-align:center;margin-top:1px}.pd-dot.dark{background:#2B2622;color:#F5D9A8}
.pd-ck.plain li{background:rgba(255,255,255,.55)}
.pd-kp-ic{font-size:13px;font-weight:800;line-height:40px;text-align:center;display:block!important}
/* AI 제품 사진: 스타일 버튼(예시 사진 포함) */
.st-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.st-mode{display:flex;flex-direction:column;gap:6px;padding:6px 6px 10px;border:1.5px solid var(--line-2,#34507F);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;min-width:0}
.st-mode:not([disabled]):hover,.st-mode.on{border-color:#F5C443;box-shadow:0 0 0 3px rgba(245,196,67,.14)}.st-mode[disabled]{cursor:not-allowed}.st-mode[disabled] .st-mode-t{opacity:.6}
.st-mode-img{position:relative;display:block;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:var(--surface-2)}.st-mode-img img{width:100%;height:100%;object-fit:cover;display:block}
.st-mode-img em{position:absolute;left:5px;top:5px;font-style:normal;font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff}
.st-mode-t b{display:flex;gap:5px;align-items:center;font-size:14px}.st-mode-t small{display:block;font-size:11.5px;color:var(--ink-soft);line-height:1.4;margin-top:2px}
.st-sample-link{display:inline-flex;gap:6px;align-items:center;margin-top:10px;border:0;background:none;color:var(--plum);font-size:12.5px;font-weight:600;cursor:pointer;padding:0}
.st-scene{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}.st-scene summary{cursor:pointer}.st-scene textarea{margin-top:8px;width:100%}
.st-samples{display:grid;grid-template-columns:1fr 1fr;gap:8px}.st-samples figure{margin:0}.st-samples img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.st-samples figcaption{font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.4}
.st-thumbs{display:flex;gap:6px;margin-top:10px;overflow-x:auto}.st-thumbs button{flex:none;width:64px;height:48px;padding:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:none;cursor:pointer}.st-thumbs button.on{border-color:#F5C443}.st-thumbs img{width:100%;height:100%;object-fit:cover}
@media(max-width:420px){.st-mode-t small{display:none}}

/* ===== 오래 걸리는 작업: 완료 알림 ===== */
.bg-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px auto 0;padding:7px 12px;border-radius:999px;background:rgba(245,196,67,.12);color:var(--ink-soft,#5F554B);font-size:12.5px;font-weight:600;line-height:1.4;max-width:max-content;text-align:center}
.bg-hint .ei{width:15px;height:15px;color:#C9A24B;flex:none}
.job-flash{animation:jobFlash 2.2s ease-out}
@keyframes jobFlash{0%,35%{box-shadow:0 0 0 3px #F5C443,0 0 24px rgba(245,196,67,.45)}100%{box-shadow:0 0 0 0 rgba(245,196,67,0)}}
#done-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9000;display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100vw - 24px));pointer-events:none}
#done-bar:empty{display:none}
.done-item{pointer-events:auto;display:flex;align-items:center;gap:10px;background:#0F1B33;color:#fff;border:1px solid #7D6A33;border-radius:14px;padding:10px 10px 10px 14px;box-shadow:0 12px 32px rgba(0,0,0,.35);animation:doneIn .28s ease-out}
.done-item>.ei{width:20px;height:20px;color:#F5C443;flex:none}
.done-item span{flex:1;font-size:14px;line-height:1.4}
.done-go{flex:none;border:0;border-radius:999px;background:#F5C443;color:#1B1405;font-weight:800;font-size:13.5px;padding:9px 14px;cursor:pointer;font-family:inherit}
.done-x{flex:none;border:0;background:transparent;color:#93A0BB;font-size:15px;width:30px;height:30px;cursor:pointer;border-radius:50%}
.done-x:hover{background:rgba(255,255,255,.08)}
@keyframes doneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 카카오톡 공유 버튼(첫 화면 오른쪽 아래) */
.share-fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:35;width:56px;height:56px;border-radius:50%;border:0;background:#FEE500;box-shadow:0 8px 22px rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:pointer;transition:transform .15s ease,bottom .25s ease;font-family:inherit}
.share-fab span{font-size:10px;font-weight:800;color:#191600;line-height:1;margin-top:1px}
.share-fab:active{transform:scale(.94)}
.share-fab[hidden]{display:none}
body:has(#done-bar .done-item) .share-fab,body:has(#upd-bar) .share-fab{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
body:has(.side.open) .share-fab{display:none}