:root{
  --bg:#f7f8fa; --card:#fff; --line:#e4e8ee;
  --text:#1f2430; --sub:#7c8798;
  --accent:#3b6ef5; --accent-d:#2b57cf;
  --ok:#12a67c; --warn:#e8624a;
  --radius:16px;
  --logomark:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M14 15 L24 33 L34 15' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='.38'/%3E%3Ccircle cx='14' cy='15' r='6'/%3E%3Ccircle cx='34' cy='15' r='6'/%3E%3Ccircle cx='24' cy='34' r='6.5'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
/* 화면이 좌우로 밀리는 것을 원천 차단.
   overflow:hidden 이 아니라 clip 을 쓰는 이유 — hidden 은 상단 고정 메뉴(sticky)를 망가뜨린다. */
html,body{max-width:100%;overflow-x:clip}
/* 브라우저가 그리는 스크롤바는 완전히 없앤다 (자리도 차지하지 않게) */
html{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}
/* 대신 직접 그린 막대를 움직일 때만 보여준다 */
.sbar{position:fixed;right:3px;width:4px;border-radius:99px;z-index:90;pointer-events:none;
  background:rgba(140,140,140,.45);opacity:0;transition:opacity .45s ease}
.sbar.on{opacity:1}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* 긴 주소·코드가 칸을 밀고 나가지 않게 */
code,pre,.fieldmsg,.hint{overflow-wrap:anywhere}
img,iframe,canvas,video,svg{max-width:100%}
/* 플렉스 칸 안의 글자가 칸을 넓혀버리는 것을 막는다 */
.topbar>*,.shop-searchrow>*,.upl>*{min-width:0}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;min-height:100dvh;
}
a{color:inherit}
/* 화면 폭에 따라 여백·본문 폭이 알아서 늘고 줄게 —
   폴더블처럼 접었다 펴면 폭이 크게 달라지는 기기까지 한 규칙으로 대응한다. */
.wrap{width:100%;max-width:clamp(320px, 92vw, 560px);margin:0 auto;
  padding:20px clamp(14px, 4.5vw, 26px) 60px}
/* 폴더블을 펼쳤을 때(대략 600~840px)는 본문을 조금 더 넓게 */
@media (min-width:600px){ .wrap{max-width:600px} }
/* 접힌 상태의 아주 좁은 화면 */
@media (max-width:360px){
  .sectabs-scroll button{padding:6px 10px;font-size:12px}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
}
.hidden{display:none!important}

/* 헤더 */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.logo{font-weight:800;font-size:17px;letter-spacing:-.3px;text-decoration:none;display:flex;align-items:center;gap:6px}
/* 로고 마크 (A안 — 노드 3점) */
.logo .dot{width:20px;height:20px;display:inline-block;background:var(--accent);
  -webkit-mask:var(--logomark) center/contain no-repeat;mask:var(--logomark) center/contain no-repeat}

/* 버튼 */
.btn{
  display:block;width:100%;border:0;cursor:pointer;text-align:center;text-decoration:none;
  font-family:inherit;font-size:15.5px;font-weight:700;color:#fff;
  background:var(--accent);padding:14px;border-radius:12px;margin-top:10px;
  transition:transform .12s, background .15s;
}
.btn:hover{background:var(--accent-d)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:var(--card);color:var(--text);border:1.5px solid var(--line);font-weight:600}
.btn.ghost:hover{background:#f2f4f8}
.btn.danger{background:#fff;color:var(--warn);border:1.5px solid #f6d5cf}
.btn.sm{width:auto;display:inline-block;padding:9px 14px;font-size:13.5px;margin:0}
.btn.google{background:#fff;color:#3c4043;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;gap:9px}
.btn.kakao{background:#FEE500;color:#191600;display:flex;align-items:center;justify-content:center;gap:9px}

/* 카드·폼 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:16px}
.card h2{font-size:17px;font-weight:800;letter-spacing:-.2px}
.card p.hint{font-size:13px;color:var(--sub);margin-top:6px;line-height:1.7}
label.fl{display:block;font-size:12.5px;color:var(--sub);font-weight:700;margin-top:14px}
label.fl:first-child{margin-top:0}
/* 글씨가 16px 보다 작으면 아이폰이 입력칸을 누를 때 화면을 멋대로 확대하고
   되돌려주지 않는다. 그래서 입력칸은 반드시 16px 이상으로 둔다. */
input.fi,textarea.fi,select.fi{
  width:100%;max-width:100%;margin-top:7px;background:#fbfcfd;border:1.5px solid var(--line);border-radius:11px;
  padding:12px;font-family:inherit;font-size:16px;color:var(--text);outline:none;resize:none;
}
input.fi:focus,textarea.fi:focus,select.fi:focus{border-color:var(--accent);background:#fff}
.fieldmsg{font-size:12.5px;margin-top:6px;min-height:18px}
.fieldmsg.ok{color:var(--ok)}
.fieldmsg.no{color:var(--warn)}
.handle-row{display:flex;align-items:center;gap:0;margin-top:7px}
.handle-row .pre{font-size:13.5px;color:var(--sub);background:#f0f2f6;border:1.5px solid var(--line);border-right:0;border-radius:11px 0 0 11px;padding:12px 8px 12px 12px;white-space:nowrap}
.handle-row input{margin-top:0;border-radius:0 11px 11px 0}

.tabs{display:flex;gap:6px;background:#eef0f4;padding:4px;border-radius:12px;margin-top:4px}
.tabs button{flex:1;border:0;background:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--sub);padding:9px;border-radius:9px;cursor:pointer}
.tabs button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.07)}

.divider{display:flex;align-items:center;gap:10px;margin:18px 0 4px;color:#b9c1cd;font-size:12.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* 링크 아이템 (관리) */
.lk{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-top:10px;display:flex;align-items:center;gap:11px}
.lk.off{opacity:.5}
.lk .lk-emoji{font-size:21px;flex-shrink:0;width:26px;text-align:center}
.lk .lk-body{flex:1;min-width:0}
.lk .lk-title{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk .lk-url{font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk .lk-meta{font-size:11px;color:var(--sub);margin-top:2px;display:flex;gap:8px;align-items:center}
.badge{font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;background:#eef2ff;color:var(--accent)}
.badge.b-hot{background:#ffe9e4;color:#e8624a}
.lk-thumb{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
code{background:#eef1f6;border-radius:4px;padding:1px 5px;font-size:12px;word-break:break-all}

/* 사진 올리기 */
.upl{display:flex;gap:8px;margin-top:7px;align-items:center}
.upl .btn{margin-top:0;flex-shrink:0;width:auto;padding:11px 14px;font-size:13.5px}
.upl-prev{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--line);flex-shrink:0;display:none}
.upl-prev.on{display:block}
.upl-or{font-size:12px;color:var(--sub);margin-top:9px}

/* 사진 자르기 */
/* 사진 자르기 — 사진 전체를 보여주고 그 위에서 네모를 끌어 만든다 */
.crop-stage{position:relative;width:100%;background:#20242c;border-radius:12px;overflow:hidden;
  touch-action:none;margin-top:12px;user-select:none;-webkit-user-select:none}
.crop-stage img{position:absolute;user-select:none;-webkit-user-drag:none;pointer-events:none;max-width:none}
/* 가운데를 뚫고 바깥만 어둡게 */
.crop-shade{position:absolute;pointer-events:none;z-index:1}
.crop-box{position:absolute;z-index:2;cursor:move;box-shadow:0 0 0 1.5px rgba(255,255,255,.95)}
/* 삼분할 격자 */
.crop-box .cg{position:absolute;background:rgba(255,255,255,.42);pointer-events:none}
.crop-box .cg-v1{left:33.33%;top:0;bottom:0;width:1px}
.crop-box .cg-v2{left:66.66%;top:0;bottom:0;width:1px}
.crop-box .cg-h1{top:33.33%;left:0;right:0;height:1px}
.crop-box .cg-h2{top:66.66%;left:0;right:0;height:1px}
/* 모서리 손잡이 */
.crop-box .ch{position:absolute;width:26px;height:26px;z-index:3}
.crop-box .ch::after{content:"";position:absolute;width:16px;height:16px;border:3px solid #fff;
  border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.crop-box .ch-nw{left:-13px;top:-13px;cursor:nwse-resize}
.crop-box .ch-nw::after{left:5px;top:5px;border-right:0;border-bottom:0}
.crop-box .ch-ne{right:-13px;top:-13px;cursor:nesw-resize}
.crop-box .ch-ne::after{right:5px;top:5px;border-left:0;border-bottom:0}
.crop-box .ch-sw{left:-13px;bottom:-13px;cursor:nesw-resize}
.crop-box .ch-sw::after{left:5px;bottom:5px;border-right:0;border-top:0}
.crop-box .ch-se{right:-13px;bottom:-13px;cursor:nwse-resize}
.crop-box .ch-se::after{right:5px;bottom:5px;border-left:0;border-top:0}
/* 변(위·아래·좌·우) 손잡이 */
.crop-box .ce{position:absolute;z-index:3}
.crop-box .ce::after{content:"";position:absolute;background:#fff;border-radius:99px;
  box-shadow:0 1px 4px rgba(0,0,0,.5)}
.crop-box .ce-n{left:26px;right:26px;top:-13px;height:26px;cursor:ns-resize}
.crop-box .ce-n::after{left:50%;transform:translateX(-50%);top:10px;width:26px;height:4px}
.crop-box .ce-s{left:26px;right:26px;bottom:-13px;height:26px;cursor:ns-resize}
.crop-box .ce-s::after{left:50%;transform:translateX(-50%);bottom:10px;width:26px;height:4px}
.crop-box .ce-w{top:26px;bottom:26px;left:-13px;width:26px;cursor:ew-resize}
.crop-box .ce-w::after{top:50%;transform:translateY(-50%);left:10px;height:26px;width:4px}
.crop-box .ce-e{top:26px;bottom:26px;right:-13px;width:26px;cursor:ew-resize}
.crop-box .ce-e::after{top:50%;transform:translateY(-50%);right:10px;height:26px;width:4px}
.crop-hint{font-size:12.5px;color:var(--sub);text-align:center;margin-top:8px}

/* 이모지 고르기 */
.emoji-row{display:flex;gap:7px;align-items:center;margin-top:7px}
.emoji-row input{margin-top:0;flex:1}
.emoji-btn{flex-shrink:0;border:1.5px solid var(--line);background:#fff;border-radius:11px;
  width:46px;height:46px;font-size:20px;cursor:pointer;line-height:1;padding:0}
.emoji-btn:hover{background:#f2f4f8}
.emoji-pad{display:none;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:8px;
  background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:9px;max-height:190px;overflow-y:auto}
.emoji-pad.on{display:grid}
.emoji-pad button{border:0;background:none;font-size:19px;cursor:pointer;padding:5px 0;border-radius:7px;line-height:1}
.emoji-pad button:hover{background:#e6ebf3}
@media (max-width:420px){ .emoji-pad{grid-template-columns:repeat(8,1fr)} }

/* 드래그로 순서 바꾸기 — 카드 전체를 잡고 움직임 */
.lk{touch-action:pan-y;will-change:transform}
.lk-drag{flex-shrink:0;width:22px;text-align:center;color:#c3cdd9;font-size:15px;line-height:1;
  user-select:none;-webkit-user-select:none;pointer-events:none}
.lk.dragging{box-shadow:0 14px 34px rgba(0,0,0,.22);border-color:var(--accent);
  position:relative;z-index:30;cursor:grabbing;transition:none!important}
.lk.dragging .lk-drag{color:var(--accent)}
.lk.shifting{transition:transform .16s cubic-bezier(.2,.8,.25,1)}
.lk.grabhint{cursor:grab}
/* 드래그 중에는 글자가 선택되지 않게 */
body.dragging-now{user-select:none;-webkit-user-select:none;cursor:grabbing}
body.dragging-now .lk{pointer-events:none}
body.dragging-now img{pointer-events:none}

/* 실시간 미리보기 */
.pv-panel{display:none}
.pv-frame{width:330px;height:660px;border:9px solid #22262e;border-radius:34px;overflow:hidden;
  background:#fff;box-shadow:0 16px 42px rgba(0,0,0,.2)}
.pv-frame iframe{width:100%;height:100%;border:0;display:block}
.pv-title{font-size:12.5px;color:var(--sub);font-weight:700;text-align:center;margin-bottom:9px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;
  max-width:348px;line-height:1.5}
.pv-reload{display:block;margin:10px auto 0;font-size:12.5px;color:var(--accent);background:none;border:0;
  cursor:pointer;font-family:inherit;font-weight:700}
@media (min-width:1120px){
  body.has-preview .pv-panel{display:block;position:fixed;left:calc(50% - 560px);top:86px;z-index:10;
    border-radius:22px}   /* 반짝임(outline)이 둥글게 돌게 */
  body.has-preview .wrap{margin-left:auto;margin-right:auto;transform:translateX(190px)}
}
/* 미리보기 팝업 — 화면 한가운데에 휴대폰 모양 창으로 */
.pv-sheet{position:fixed;inset:0;z-index:70;display:none}
/* 화면 정중앙에 휴대폰 창 + 그 아래 닫기 버튼을 한 덩어리로 배치 */
.pv-sheet.on{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:16px 16px max(16px,env(safe-area-inset-bottom))}
.pv-sheet .pv-back{position:absolute;inset:0;background:rgba(31,36,48,.62);animation:fadeIn .22s both;
  touch-action:none}   /* 어두운 바깥을 끌어도 뒤 화면이 안 움직이게 */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pv-sheet .pv-body{position:relative;flex:0 1 700px;min-height:0;overscroll-behavior:contain;
  width:min(340px,100%);max-height:700px;
  background:#fff;border:9px solid #22262e;border-radius:34px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;
  animation:popIn .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(10px)}
                 to{opacity:1;transform:scale(1) translateY(0)}}
.pv-sheet .pv-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 8px 9px 14px;border-bottom:1px solid var(--line);flex-shrink:0;background:#fff}
.pv-sheet .pv-bar b{font-size:13.5px}
.pv-sheet .pv-bar .btn{width:auto;margin:0;padding:7px 12px;font-size:12.5px;flex-shrink:0}
.pv-sheet iframe{flex:1;width:100%;border:0;display:block}
.pv-grip{display:none}
/* 팝업 바로 아래 닫기 버튼 */
.pv-sheet .pv-x{position:relative;flex:0 0 auto;
  background:#fff;color:var(--text);border:0;border-radius:99px;
  padding:11px 26px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.3);animation:fadeIn .3s .1s both}

/* 떠 있는 미리보기 버튼 (설정을 바꾸면 나타남) */
.pv-fab{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);
  bottom:max(18px,env(safe-area-inset-bottom));z-index:60;
  background:var(--text);color:#fff;border:0;border-radius:99px;
  padding:13px 22px;font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;
  box-shadow:0 8px 26px rgba(31,36,48,.38);display:flex;align-items:center;gap:7px;
  opacity:0;pointer-events:none;transition:opacity .22s, transform .22s;white-space:nowrap}
.pv-fab.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.pv-fab .fab-dot{width:7px;height:7px;border-radius:50%;background:#ffd76e;flex-shrink:0;
  animation:fabPulse 1.4s ease-in-out infinite}
@keyframes fabPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
/* PC에서 옆에 실시간 미리보기가 이미 보이면 떠 있는 버튼은 숨김 */
@media (min-width:1120px){ body.has-preview .pv-fab{display:none} }

/* 설정 메뉴 */
.menu-list{margin-top:16px}
.menu-item{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:15px 16px;margin-top:9px;cursor:pointer;width:100%;font-family:inherit;
  text-align:left;transition:border-color .13s,transform .12s}
.menu-item:hover{border-color:var(--accent)}
.menu-item:active{transform:scale(.99)}
.menu-item .mi-e{font-size:21px;flex-shrink:0}
.menu-item .mi-n{font-size:14.5px;font-weight:800}
.menu-item .mi-d{font-size:12px;color:var(--sub);margin-top:2px;line-height:1.5}
.menu-item .mi-go{margin-left:auto;color:#c3cdd9;font-size:16px;flex-shrink:0}
.sec-back{display:flex;align-items:center;gap:8px;background:none;border:0;font-family:inherit;
  font-size:14px;font-weight:700;color:var(--sub);cursor:pointer;padding:12px 2px;margin-top:8px}

/* 섹션 바로 이동 탭 */
.sectabs{display:flex;align-items:flex-start;gap:7px;margin-top:14px;position:sticky;top:112px;z-index:14;
  background:var(--bg);padding:6px 0}
.sec-home{flex-shrink:0;border:1.5px solid var(--line);background:#fff;border-radius:10px;width:36px;height:34px;
  font-size:15px;cursor:pointer;color:var(--sub);padding:0;line-height:1}
.sec-home:hover{background:#f2f4f8;color:var(--text)}
/* 메뉴가 많아졌으므로 옆으로 스크롤하지 않고 줄바꿈해서 전부 한눈에 보이게 */
.sectabs-scroll{display:flex;gap:6px;flex-wrap:wrap;padding:1px;flex:1;min-width:0}
.sectabs-scroll button{flex-shrink:0;border:1.5px solid var(--line);background:#fff;border-radius:99px;
  padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer;white-space:nowrap}
.sectabs-scroll button.on{border-color:var(--accent);color:var(--accent);background:#f4f7ff}

/* 링크 목록 스크롤 영역 */
.list-scroll{max-height:58vh;overflow-y:auto;overscroll-behavior:contain;padding-right:3px;margin-top:4px}
.list-scroll{scrollbar-width:none}
.list-scroll::-webkit-scrollbar{width:0;display:none}
/* 목록 안쪽에도 직접 그린 스크롤 막대를 둔다 (링크가 많으면 여기가 따로 스크롤되므로) */
.scrollhost{position:relative}
.sbar.sbar-in{position:absolute;right:0}

/* 알림 종 */
.bell{position:relative;border:1.5px solid var(--line);background:#fff;border-radius:10px;
  width:36px;height:34px;font-size:15px;cursor:pointer;padding:0;line-height:1}
.bell:hover{background:#f2f4f8}
.bell .nbadge{position:absolute;top:-5px;right:-5px;background:var(--warn);color:#fff;font-size:9.5px;
  font-weight:800;border-radius:99px;min-width:16px;height:16px;display:flex;align-items:center;
  justify-content:center;padding:0 4px}
.notice{display:flex;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line);align-items:flex-start}
.notice:last-child{border:0}
.notice .nbody{flex:1;min-width:0}
.notice .non{font-size:11.5px;color:#a8b1bf;font-weight:700;display:inline-block;margin-top:5px}
.notice .nx{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:0;background:none;
  color:#c3cdd9;font-size:16px;line-height:1;cursor:pointer;padding:0;font-family:inherit;align-self:center}
.notice .nx:hover{background:#f2f4f8;color:var(--warn)}
.notice .ne{font-size:21px;flex-shrink:0}
.notice .nt{font-size:14.5px;font-weight:800}
.notice .nd{font-size:12.5px;color:var(--sub);line-height:1.6;margin-top:3px}
.notice .ntag{font-size:10px;font-weight:800;color:#fff;background:var(--sub);border-radius:99px;
  padding:2px 7px;margin-left:6px;vertical-align:middle}
/* 준비 중은 읽음 여부와 상관없이 늘 빨갛게
   (아래쪽 .soon 은 '준비 중 기능 카드'용이라 이름이 겹치지 않게 t-soon 을 쓴다) */
.notice .ntag.t-soon{background:var(--warn)}
/* NEW 는 새 소식일 때만 눈에 띄게 */
.notice .ntag.t-new{background:var(--sub)}
.notice.new .ntag.t-new{background:var(--accent)}

/* 준비 중 기능 */
.soon{background:linear-gradient(135deg,#f3f6fb,#eef2f9);border:1px dashed var(--line);border-radius:14px;
  padding:15px;margin-top:10px;display:flex;align-items:center;gap:12px;cursor:pointer}
.soon .se{font-size:24px;flex-shrink:0}
.soon .sn{font-size:14.5px;font-weight:800}
.soon .sd{font-size:12px;color:var(--sub);line-height:1.5;margin-top:2px}
.soon .sb{margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:800;color:#fff;background:var(--sub);
  border-radius:99px;padding:4px 9px}

/* 종류 선택 */
.kind-row{display:flex;gap:7px;margin-bottom:4px}
.kind-row button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px 4px;font-family:inherit;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer}
.kind-row button.on{border-color:var(--accent);color:var(--accent);background:#f4f7ff}
.lk.sec{background:#f4f6fa;border-style:dashed}
.lk.sec .lk-title{color:var(--sub);letter-spacing:.3px}

/* 여러 장 사진 */
.pics{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.pic{position:relative;width:56px;height:56px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.pic img{width:100%;height:100%;object-fit:cover}
.pic button{position:absolute;top:2px;right:2px;width:17px;height:17px;border-radius:50%;border:0;
  background:rgba(0,0,0,.62);color:#fff;font-size:10px;cursor:pointer;line-height:1;padding:0}
.pic .n{position:absolute;bottom:2px;left:3px;font-size:9px;color:#fff;background:rgba(0,0,0,.5);
  border-radius:4px;padding:0 3px;font-weight:700}

/* 배너 미리보기 */
.hnew{display:inline-block;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;
  padding:1px 6px;border-radius:99px;margin-left:5px;vertical-align:2px;letter-spacing:.3px}

/* 저장 상태 — 글자와 테두리 색으로 같이 알려준다 */
.pv-dirty,.pv-saved{display:none;margin-left:6px;border-radius:99px;padding:3px 10px;
  font-size:11px;font-weight:800;vertical-align:1px}
.pv-dirty{background:linear-gradient(180deg,#fdf0ef,#fbe4e2);color:#c9564d;border:1px solid #f3d2ce}
.pv-saved{background:linear-gradient(180deg,#eefaf5,#dff4ec);color:#12906b;border:1px solid #c2e8d8}
.pv-dirty.on,.pv-saved.on{display:inline-block}
.pv-dirty.on{animation:tagSoft 2.8s ease-in-out infinite}
.pv-saved.on{animation:tagSoft 1.5s ease-in-out infinite}
@keyframes tagSoft{0%,100%{opacity:.62}50%{opacity:1}}

/* 미리보기 테두리 — 폰 모양을 따라 빛이 은은하게 번진다.
   ⚠️ 이 요소들은 overflow:hidden 이라 안쪽에 그린 빛은 잘려나간다.
      그래서 요소 자체의 그림자로 그려야 바깥까지 보인다. */
.pv-frame.dirty{animation:glowDirty 2.8s ease-in-out infinite}
.pv-frame.saved{animation:glowSaved 1.5s ease-in-out infinite}
.pv-sheet .pv-body.dirty{animation:glowDirtyBig 2.8s ease-in-out infinite}
.pv-sheet .pv-body.saved{animation:glowSavedBig 1.5s ease-in-out infinite}

@keyframes glowDirty{
  0%,100%{box-shadow:0 0 0 1px rgba(226,92,84,.20), 0 0 12px 2px rgba(226,92,84,.16), 0 16px 42px rgba(0,0,0,.2)}
  50%    {box-shadow:0 0 0 3px rgba(226,92,84,.42), 0 0 26px 7px rgba(226,92,84,.52), 0 16px 42px rgba(0,0,0,.2)}
}
@keyframes glowSaved{
  0%,100%{box-shadow:0 0 0 1px rgba(28,178,133,.22), 0 0 12px 2px rgba(28,178,133,.18), 0 16px 42px rgba(0,0,0,.2)}
  50%    {box-shadow:0 0 0 3px rgba(28,178,133,.45), 0 0 26px 7px rgba(28,178,133,.55), 0 16px 42px rgba(0,0,0,.2)}
}
@keyframes glowDirtyBig{
  0%,100%{box-shadow:0 0 0 1px rgba(226,92,84,.20), 0 0 12px 2px rgba(226,92,84,.16), 0 22px 60px rgba(0,0,0,.4)}
  50%    {box-shadow:0 0 0 3px rgba(226,92,84,.42), 0 0 26px 7px rgba(226,92,84,.52), 0 22px 60px rgba(0,0,0,.4)}
}
@keyframes glowSavedBig{
  0%,100%{box-shadow:0 0 0 1px rgba(28,178,133,.22), 0 0 12px 2px rgba(28,178,133,.18), 0 22px 60px rgba(0,0,0,.4)}
  50%    {box-shadow:0 0 0 3px rgba(28,178,133,.45), 0 0 26px 7px rgba(28,178,133,.55), 0 22px 60px rgba(0,0,0,.4)}
}
@media (prefers-reduced-motion:reduce){
  .pv-frame.dirty,.pv-frame.saved,
  .pv-sheet .pv-body.dirty,.pv-sheet .pv-body.saved{animation:none}
  .pv-frame.dirty{box-shadow:0 0 0 2px rgba(226,92,84,.4), 0 0 20px 5px rgba(226,92,84,.35)}
  .pv-frame.saved{box-shadow:0 0 0 2px rgba(28,178,133,.4), 0 0 20px 5px rgba(28,178,133,.4)}
}
@media (prefers-reduced-motion:reduce){ .pv-dirty.on,.pv-saved.on{animation:none} }

/* 스킨 */
.skinbtn{margin-top:12px;border-color:#d9e4ff;color:var(--accent);font-weight:800}
.skinbtn:hover{background:#f4f7ff}
.skin{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:10px;background:#fbfcfe}
.skin .sk-top{display:flex;align-items:center;gap:9px}
.skin .sk-top b{font-size:14.5px}
.skin .sk-sw{display:flex;gap:3px;flex-shrink:0}
.skin .sk-sw i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.08)}
.skin .sk-d{font-size:12.5px;color:var(--sub);line-height:1.65;margin-top:7px;word-break:keep-all}
.skin .btn.sm{width:auto;margin-top:0;padding:9px 16px;font-size:13px}
.skin .sk-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.skin.on{border-color:var(--accent);background:#f4f7ff;box-shadow:0 0 0 3px rgba(59,110,245,.1)}
.skin .sk-now{margin-left:auto;flex-shrink:0;font-size:11px;font-weight:800;color:var(--accent);
  background:#e6edff;border-radius:99px;padding:3px 9px}
/* 미리보기 창 아래 — 스킨 시험 중일 때만 */
.pv-skinbar{flex:0 0 auto;background:#fff;border-radius:14px;padding:11px 13px;max-width:340px;width:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.22);text-align:center}
.pv-skinbar span{display:block;font-size:12.5px;font-weight:700;color:var(--sub);line-height:1.5}
.pv-skinbar .row{display:flex;gap:8px;margin-top:9px}
.pv-skinbar .btn.sm{flex:1;width:auto;margin-top:0;padding:10px 8px;font-size:13px}
.btn.sk-undo{margin-top:12px;border-color:#ffd9d9;color:#d2453d;font-weight:800}
.btn.sk-undo:hover{background:#fff5f5}
/* PC에서 스킨을 미리보는 중에는 — 어두운 막이 왼쪽 실시간 미리보기까지 덮어서 확인할 수가 없다.
   창 자체는 미리보기와 겹치지 않으므로(가운데 정렬 vs 왼쪽 고정) 제자리에 두고,
   막만 스르륵 걷어서 미리보기를 그대로 보고 만질 수 있게 한다. */
#modal-skin{transition:background-color .34s ease}
#modal-skin .modal{transition:box-shadow .34s ease}
@media (min-width:1120px){
  body.has-preview #modal-skin.peek{background-color:rgba(31,36,48,0);pointer-events:none}
  body.has-preview #modal-skin.peek .modal{pointer-events:auto;
    border:1px solid var(--line);box-shadow:0 20px 60px rgba(31,36,48,.34)}
}
@media (prefers-reduced-motion:reduce){
  #modal-skin, #modal-skin .modal{transition:none}
}
/* 미리보기를 켜 두면 안 고른 스킨은 살짝 접어서 목록이 한눈에 들어오게 */
#modal-skin.peek .skin:not(.on) .sk-d{display:none}
#modal-skin.peek .skin:not(.on){padding:11px 13px}
#modal-skin.peek .skin:not(.on) .sk-btns{margin-top:9px}

/* 미리보기 위에 "지금 이 스킨을 보고 있어요" 표시 */
.pv-skin{display:none;font-size:11px;font-weight:800;color:var(--accent);
  background:#e6edff;border:1px solid #cfdcff;border-radius:99px;padding:3px 9px;white-space:nowrap}
.pv-skin.on{display:inline-block;animation:skinIn .34s cubic-bezier(.2,.9,.3,1) both,
                                           skinChip 2.6s ease-in-out .34s 2 both}
@keyframes skinIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes skinChip{0%,100%{box-shadow:0 0 0 0 rgba(59,110,245,0)}
                    50%{box-shadow:0 0 0 5px rgba(59,110,245,.16)}}
/* 스킨을 갈아입을 때 미리보기 둘레가 눈에 띄게 반짝 — 눈이 왼쪽으로 따라가게.
   (테두리 반짝임은 '저장 전/저장됨' 표시와 겹치므로 바깥 패널에 준다) */
.pv-panel.skinflash{animation:skinFlash 2.6s cubic-bezier(.35,0,.25,1) both}
@keyframes skinFlash{
  0%  {outline:0 solid rgba(59,110,245,0);   outline-offset:2px}
  8%  {outline:5px solid rgba(59,110,245,.9);outline-offset:12px}
  26% {outline:5px solid rgba(59,110,245,.1);outline-offset:12px}
  44% {outline:5px solid rgba(59,110,245,.9);outline-offset:12px}
  62% {outline:5px solid rgba(59,110,245,.1);outline-offset:12px}
  78% {outline:5px solid rgba(59,110,245,.8);outline-offset:12px}
  100%{outline:5px solid rgba(59,110,245,0); outline-offset:26px}
}

/* 블록 추가 줄 */
.addrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.addrow button{flex:1 1 auto;min-width:0;border:1.5px solid var(--line);background:#fff;border-radius:10px;
  padding:9px 10px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer;white-space:nowrap}
.addrow button:hover{border-color:var(--accent);color:var(--accent)}

/* 글상자 꾸미기 */
.rich-row{display:flex;gap:7px;margin-top:8px}
.rich-row button{width:44px;height:40px;border:1.5px solid var(--line);background:#fff;border-radius:10px;
  cursor:pointer;font-family:inherit;font-size:15px;color:var(--sub);padding:0}
.rich-row button.on{border-color:var(--accent);color:var(--accent);background:#f4f7ff}
.color-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cdot{width:30px;height:30px;border-radius:50%;border:2px solid #fff;cursor:pointer;padding:0;
  box-shadow:0 0 0 1.5px var(--line)}
.cdot.sel{box-shadow:0 0 0 2.5px var(--accent)}
.cdot.auto{background:repeating-linear-gradient(45deg,#e9edf3,#e9edf3 5px,#fff 5px,#fff 10px)}
.rich-prev{margin-top:8px;background:#f5f7fa;border:1px dashed var(--line);border-radius:12px;
  padding:14px;line-height:1.75;white-space:pre-wrap;word-break:keep-all;min-height:52px}
.rich-prev.boxed{background:#fff;border:1px solid var(--line);border-style:solid;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* 미니 플레이어 — 버튼 문구 정하기 */
.bgm-btn-demo{display:inline-flex;align-items:center;margin-top:8px;
  background:var(--text);color:#fff;border-radius:99px;padding:10px 16px;
  font-size:12.5px;font-weight:800;box-shadow:0 4px 14px rgba(31,36,48,.25)}
.bgm-ex{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.bgm-ex .hint{width:100%;margin:0 0 2px}
.bgm-ex button{border:1.5px solid var(--line);background:#fff;border-radius:99px;
  padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer}
.bgm-ex button:hover{border-color:var(--accent);color:var(--accent)}

/* 영상 미리보기 */
.vidprev{position:relative;padding-top:56.25%;margin-top:10px;border-radius:12px;overflow:hidden;background:#000}
.vidprev iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 건의함 카드 · 운영자 답변 */
.idea-card{background:#f7f9fc;border:1px solid var(--line);border-radius:13px;padding:13px;margin-top:9px}
.idea-card .ik{display:inline-block;font-size:11.5px;font-weight:800;color:var(--accent);
  background:#eaf0ff;border-radius:99px;padding:3px 9px}
.idea-card .ib{font-size:13.5px;line-height:1.7;margin-top:8px;white-space:pre-wrap;word-break:break-word}
.idea-card .iw{display:block;font-size:11.5px;color:#a8b1bf;font-weight:700;margin-top:7px}
.idea-card .ire{margin-top:10px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:9px;padding:10px 11px;font-size:13px;line-height:1.7}
.idea-card .ire b{color:var(--ok);font-size:12px}
.idea-card .ire p{margin-top:4px;white-space:pre-wrap;word-break:break-word}
.idea-card .ire.wait{color:var(--sub);border-left-color:#d4dbe4;font-size:12.5px}
.idea-card .ir{margin-top:9px;background:#fff}
.idea-card .btn.sm{width:auto;margin-top:8px;padding:9px 16px;font-size:13px}
.inbox-tabs{margin-top:12px}

/* 건의함 — 아직 안 열어본 사람에게만 은은하게 반짝인다 */
.idea-bell.glow{animation:ideaGlow 2.6s ease-in-out infinite;position:relative}
@keyframes ideaGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(59,110,245,0);transform:none}
  40%{box-shadow:0 0 0 5px rgba(59,110,245,.16);transform:scale(1.08) rotate(-6deg)}
  55%{transform:scale(1.08) rotate(6deg)}
  70%{box-shadow:0 0 0 0 rgba(59,110,245,0);transform:none}
}
@media (prefers-reduced-motion:reduce){ .idea-bell.glow{animation:none} }

.keystate{font-size:13px;font-weight:700;color:var(--sub);background:#f5f7fa;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-top:14px;line-height:1.6}
.keystate.on{color:var(--ok);background:#f0faf6;border-color:#bfe8d8}
.filled{font-size:12.5px;line-height:1.85;color:#3d6b4f;background:#f0faf6;border:1px solid #bfe8d8;
  border-radius:10px;padding:11px 12px;margin-top:10px}

/* 쿠팡 상품 찾기 */
.btn.coupang{background:#ae0a12;margin-bottom:4px}
.btn.coupang:hover{background:#8d080f}
.shop-searchrow{display:flex;gap:8px;align-items:flex-start;margin-top:6px}
.shop-searchrow .fi{margin-top:0;flex:1}
.shop-searchrow .btn{margin-top:0;width:auto;flex-shrink:0;padding:14px 18px}
.shop-tabs{margin-top:4px}
/* 주제 고르기 — 큰 갈래는 가로 칩, 고른 갈래의 항목만 아래에 펼친다 */
.cat-row{margin-top:8px}
/* 큰 갈래 — 여덟 개가 한눈에 들어오게 (가로로 밀면 뒤쪽을 못 본다) */
.cat-tabs{display:flex;flex-wrap:wrap;gap:5px}
.cat-tab{position:relative;border:1.5px solid var(--line);background:#fff;border-radius:9px;
  padding:6px 9px;font-family:inherit;font-size:12px;font-weight:700;color:var(--sub);
  cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.cat-tab:hover{background:#f4f7ff}
.cat-tab.open{border-color:var(--accent);color:var(--accent);background:#eef3ff}
/* 접혀 있어도 그 갈래 안에 고른 것이 있으면 점으로 알려준다 */
.cat-tab.has::after{content:"";position:absolute;top:4px;right:5px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
/* 작은 갈래 — 높이가 자라면서 스르륵 내려온다 */
.cat-subwrap{overflow:hidden;height:0;transition:height .3s cubic-bezier(.2,.8,.3,1)}
.cat-sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;padding-top:10px;
  border-top:1px dashed var(--line);opacity:0;transform:translateY(-4px);
  transition:opacity .26s ease .04s, transform .26s ease .04s}
.cat-subwrap.on .cat-sub{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cat-subwrap,.cat-sub{transition:none}
}
.cat-chip{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 12px;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer;white-space:nowrap}
.cat-chip.on{border-color:var(--accent);color:var(--accent);background:#f4f7ff}
.cat-chip.unknown{color:#a8b1bf;border-style:dashed}
.cat-chip.gold{border-color:#e8a33d;color:#b0741d;background:#fff8ec}
.cat-chip.gold.on{border-color:#e8a33d;background:#ffeccd}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.shop-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;
  cursor:pointer;font-family:inherit;text-align:left;display:flex;flex-direction:column;gap:6px;
  transition:border-color .14s, transform .14s}
.shop-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.sc-thumb{position:relative;display:block;width:100%}
.shop-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#f0f2f6;display:block}
.sc-rank{position:absolute;top:5px;left:5px;background:var(--text);color:#fff;font-size:11px;font-weight:800;
  min-width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.sc-rk{position:absolute;left:5px;bottom:5px;background:rgba(0,163,224,.94);color:#fff;
  font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:99px;letter-spacing:-.2px}
.sc-name{font-size:12px;line-height:1.45;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-price{font-size:13px;font-weight:800;color:var(--text)}
.sc-tags{display:flex;flex-wrap:wrap;gap:4px}
.sc-tags b{font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:5px;letter-spacing:-.2px}
.sc-tags .t-rk{background:#e4f5fc;color:#0079a8}
.sc-tags .t-no{background:#f1f3f7;color:#8b95a4}
.sc-tags .t-fr{background:#eaf7f0;color:#12805f}

/* 사진 크게 보기 */
.picmodal{max-width:440px}
.pic-stage{position:relative;margin-top:14px;background:#eef1f6;border-radius:14px;overflow:hidden;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.pic-stage img{width:100%;height:100%;display:block}
.pic-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;pointer-events:none}
.pic-nav button{pointer-events:auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(17,24,39,.62);color:#fff;font-size:20px;line-height:1;padding:0;font-family:inherit}
.pic-count{position:absolute;right:9px;top:9px;background:rgba(17,24,39,.66);color:#fff;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px}
.pic-fits{display:flex;gap:8px;margin-top:8px}
.pic-fits button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:10px 8px;
  font-family:inherit;font-size:13.5px;font-weight:800;color:var(--sub);cursor:pointer;line-height:1.35}
.pic-fits button span{display:block;font-size:11px;font-weight:600;color:#a5aebc;margin-top:3px}
.pic-fits button.on{border-color:var(--accent);color:var(--accent);background:#f4f7ff}
.btn.ghost.danger{color:var(--warn)}
.pic img{cursor:zoom-in}

/* 쿠팡 상품 찾기 계속 */
.hint.warn{color:#b4552f}
.hint.ok{color:var(--ok)}

/* 배너 노출 확인 */
.btest{margin-top:12px;background:#f5f7fa;border:1px solid var(--line);border-radius:14px;padding:14px}
.btest-msg{font-size:13px;line-height:1.75;color:var(--text)}
.btest-msg.ok{color:var(--ok)}
.btest-msg.no{color:#4a5563}
.btest-msg code{background:#e7ecf3;border-radius:4px;padding:1px 5px;font-size:12px;word-break:break-all}
.btest-stage{margin-top:12px;display:flex;justify-content:center;overflow:hidden}
.btest-stage iframe{border:0;display:block;max-width:100%}

.bprev{margin-top:14px;background:#f5f7fa;border:1px solid var(--line);border-radius:14px;padding:14px}
.bprev-t{font-size:12.5px;color:var(--sub);text-align:center;line-height:1.6}
.bprev-phone{width:180px;margin:12px auto 0;background:#fff;border:2px solid #d7dee7;border-radius:14px;padding:12px 10px}
.bprev-bar{height:15px;background:#eef1f6;border-radius:5px;margin-bottom:7px}
.bprev-bar.short{width:70%;margin-left:auto;margin-right:auto}
.bprev-box{margin:11px auto 0;background:repeating-linear-gradient(45deg,#dbe6fb,#dbe6fb 6px,#e8effd 6px,#e8effd 12px);
  border:1.5px dashed var(--accent);border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:10.5px;font-weight:800;transition:width .2s, height .2s}
.bprev-foot{text-align:center;font-size:8px;color:#c3cdd9;font-weight:800;margin-top:9px;letter-spacing:.5px}
.bprev-n{font-size:12px;color:var(--sub);text-align:center;margin-top:10px;line-height:1.6}

/* QR 코드 */
.qrbox{text-align:center;padding:10px 0}
.qrbox canvas{border:1px solid var(--line);border-radius:12px;background:#fff}

/* 화면 전환 탭 */
.viewtabs{display:flex;gap:6px;background:#eef0f4;padding:4px;border-radius:12px;margin-top:16px;position:sticky;top:58px;z-index:15}
.viewtabs button{flex:1;border:0;background:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--sub);padding:10px;border-radius:9px;cursor:pointer}
.viewtabs button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.07)}

/* 통계 차트 */
.chart{display:flex;align-items:flex-end;gap:3px;height:74px;margin-top:12px}
.chart .bar{flex:1;background:#e7ebf2;border-radius:3px 3px 0 0;position:relative;min-height:3px;transition:background .15s}
.chart .bar.has{background:var(--accent)}
.chart .bar:hover{background:var(--accent-d)}
.chart .bar .bv{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;color:var(--accent);white-space:nowrap}
.chart-x{display:flex;gap:3px;margin-top:5px}
.chart-x span{flex:1;text-align:center;font-size:9px;color:var(--sub)}
.chart-empty{text-align:center;color:var(--sub);font-size:13px;padding:26px 0;line-height:1.7}

/* 도움말 */
.help-sec{border-bottom:1px solid var(--line)}
.help-sec:last-child{border:0}
.help-sec summary{cursor:pointer;font-size:14.5px;font-weight:700;padding:13px 2px;list-style:none;display:flex;align-items:center;gap:8px}
.help-sec summary::-webkit-details-marker{display:none}
.help-sec summary::after{content:"+";margin-left:auto;color:var(--sub);font-weight:700}
.help-sec[open] summary::after{content:"−"}
.help-sec .hb{font-size:13.5px;color:var(--sub);line-height:1.85;padding:0 2px 15px}
.help-sec .hb b{color:var(--text)}
.help-sec .hb ol{margin:6px 0 0 17px}
.help-sec .hb li{margin-bottom:5px}
.lk-acts{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.iconbtn{border:1px solid var(--line);background:#fff;border-radius:7px;width:28px;height:24px;font-size:12px;cursor:pointer;color:var(--sub);line-height:1;padding:0}
.iconbtn:hover{background:#f2f4f8;color:var(--text)}
.lk-side{display:flex;gap:6px;flex-shrink:0}

.chk{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;cursor:pointer;user-select:none}
.chk input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}

.theme-row{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.theme-chip{border:2px solid var(--line);border-radius:10px;padding:7px 11px;font-size:13px;font-weight:700;cursor:pointer;background:#fff;font-family:inherit;display:flex;align-items:center;gap:6px}
.theme-chip.sel{border-color:var(--accent)}
.theme-dot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.08)}

.stat-row{display:flex;gap:10px;margin-top:14px}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px;text-align:center}
.stat .sv{font-size:22px;font-weight:800;letter-spacing:-.5px}
.stat .sl{font-size:11.5px;color:var(--sub);margin-top:2px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);background:#1f2430;color:#fff;font-size:13.5px;font-weight:600;padding:12px 20px;border-radius:99px;transition:transform .3s;z-index:99;max-width:88vw;text-align:center}
.toast.on{transform:translateX(-50%) translateY(0)}

.modal-bg{position:fixed;inset:0;background:rgba(31,36,48,.45);display:none;align-items:center;justify-content:center;z-index:60;padding:22px}
/* 링크 추가 창 위에서 다시 열리는 창들은 더 위층에 (안 그러면 뒤에 가려져 멈춘 것처럼 보인다) */
#modal-skin{z-index:76}
#modal-shop{z-index:78}
#modal-pic{z-index:80}
#modal-idea{z-index:82}
#modal-inbox{z-index:84}
#modal-crop{z-index:86}
.modal-bg.on{display:flex}
.modal{background:#fff;border-radius:18px;padding:22px;max-width:400px;width:100%;max-height:86vh;overflow-y:auto}
.modal h3{font-size:16.5px;font-weight:800}

.foot{text-align:center;color:#aab3c0;font-size:11.5px;margin-top:30px;line-height:1.8}
.foot a{color:#aab3c0}

.spinner{width:20px;height:20px;border:2.5px solid #dfe4ea;border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══ 페이지 여러 개 ═══ */
/* 페이지가 2개 이상일 때만 위에 뜨는 전환 줄 */
.pagebar{display:flex;gap:7px;overflow-x:auto;padding:2px;margin-top:16px;
  scrollbar-width:none}
.pagebar::-webkit-scrollbar{display:none}
.pgchip{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1.5px solid var(--line);background:#fff;border-radius:12px;
  padding:8px 13px;font-family:inherit;cursor:pointer;text-align:left;
  transition:border-color .15s, background .15s}
.pgchip b{font-size:13px;font-weight:800;color:var(--text);
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgchip span{font-size:11px;color:var(--sub);font-weight:600}
.pgchip:hover{background:#f4f7ff}
.pgchip.on{border-color:var(--accent);background:#f4f7ff}
.pgchip.on b{color:var(--accent)}
.addpg{border-style:dashed}
.menu-item.danger-item .mi-n{color:#d2453d}
/* 새 페이지 주소 입력 — 온보딩과 같은 모양 */
#modal-page .handle-row{display:flex;align-items:stretch;margin-top:6px}
#modal-page .handle-row .pre{display:flex;align-items:center;padding:0 9px;
  background:#f2f4f8;border:1.5px solid var(--line);border-right:0;
  border-radius:12px 0 0 12px;font-size:12.5px;color:var(--sub);white-space:nowrap}
#modal-page .handle-row .fi{border-radius:0 12px 12px 0;margin:0;min-width:0}

/* ═══ 내 페이지에 온 문의 ═══ */
.askrow{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:10px;background:#fbfcfe}
.askrow .ar-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.askrow .ar-top b{font-size:14px;font-weight:800}
.ar-tag{font-size:10px;font-weight:800;border-radius:5px;padding:2px 6px}
.ar-tag.sec{background:#eef1f6;color:#6b7482}
.ar-tag.pub{background:#e6f7f0;color:var(--ok)}
.ar-when{margin-left:auto;font-size:11px;color:var(--sub)}
.ar-body{font-size:13.5px;line-height:1.7;margin-top:8px;white-space:pre-wrap;word-break:keep-all}
.ar-contact{font-size:12px;color:var(--sub);margin-top:7px;overflow-wrap:anywhere}
.askrow .ar-reply{margin-top:10px}
.askrow .chk.ar-pub{margin-top:9px}
.askrow .chk.ar-pub.off{opacity:.5}
.ar-btns{display:flex;gap:8px;margin-top:10px}
.ar-btns .btn.sm{flex:1;width:auto;margin:0}

/* 부분별 글자 설정 줄 (프로필·상단문구·문의에서 공통) */
.pstyle{margin-top:4px}
.fl-sub{font-weight:600;color:var(--sub);opacity:.85}
/* 흰색 글자 색이 흰 카드 위에서 안 보이던 문제 — 옅은 테두리를 둘러준다 */
.color-row .cdot{box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.color-row .cdot.sel{box-shadow:0 0 0 1px rgba(0,0,0,.14), 0 0 0 3px var(--accent)}