/* ──────────────────────────────────────────────
   flover — fromis9.co.kr 의 디자인 언어를 따른다
   Gowun Dodum / 소프트 네이비 / 옅은 민트-아이스 배경
   ────────────────────────────────────────────── */
:root{
  --lime:#a6ff00;
  --blue:#00f0ff;
  --ink:#2c3e50;
  --ink-2:#6b7c8c;
  --ink-3:#9aa8b4;
  --card:rgba(255,255,255,.85);
  --hair:rgba(44,62,80,.08);
  --r:20px;
  --shadow:0 4px 15px rgba(0,0,0,.03);
  --font:'Gowun Dodum',-apple-system,BlinkMacSystemFont,'system-ui',sans-serif;

  /* 아래 둘은 나중에 붙인 화면들이 쓰는 이름이다.
     정의가 없으면 var() 가 통째로 무효가 되어 그 속성이 초기값으로 떨어진다 —
     stroke 는 none 이 되어 자물쇠 고리가 사라졌고, fill 은 검정이 됐다. */
  --muted:#6b7c8c;
  --line:rgba(44,62,80,.08);
}

*{box-sizing:border-box; margin:0; padding:0; font-family:var(--font)}
[hidden]{display:none !important}

html,body{min-height:100%}
body{
  background:linear-gradient(135deg,#f6fff8 0%,#eafbff 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── 로딩 ─────────────────────────────────────── */
html.booted .loader{display:none}
.loader{
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center; background:#fff;
  transition:opacity .5s ease, visibility .5s;
}
.loader.hide{opacity:0; visibility:hidden}
.loader-inner{text-align:center; width:80%; max-width:300px}
.loader-logo{font-size:1.2rem; font-weight:700; color:#333; margin-bottom:20px; letter-spacing:.02em}
.loader-bar{height:6px; border-radius:3px; background:#e8ecee; overflow:hidden}
.loader-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--lime),var(--blue));
  transition:width .18s linear;
}
.loader-tag{margin-top:14px; font-size:.78rem; color:var(--ink-3)}
.loader-tag b{font-weight:700; color:var(--ink-2)}

/* ── 앱 셸 ────────────────────────────────────── */
.app{
  width:95%; max-width:900px; margin:22px auto;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border-radius:var(--r);
  box-shadow:0 8px 32px rgba(31,38,135,.07);
  overflow:hidden;
}

.topbar{display:flex; align-items:center; gap:12px; padding:24px 22px 4px}
.brand{
  font-size:1.5rem; font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(45deg,#00c6ff,#0072ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-sub{font-size:.7rem; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase}
.back{
  display:inline-block; text-decoration:none; line-height:1;
  border:1px solid #d8e0e5; background:rgba(255,255,255,.8);
  border-radius:9px; padding:7px 11px; font-size:.85rem; cursor:pointer;
  color:var(--ink-2); transition:.25s;
}
.back:hover{background:#fff; border-color:var(--blue); color:var(--ink)}

.stage{flex:1; padding:18px 22px 26px}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ── 홈 2x2 ───────────────────────────────────── */
.grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  max-width:460px; margin:8px auto 0;      /* 가운데로 모아 정사각을 유지한다 */
}
.tile{
  text-decoration:none;
  background:var(--card); border-radius:var(--r);
  aspect-ratio:1/1;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px;
  cursor:pointer; color:var(--ink);
  border:2px solid transparent; box-shadow:var(--shadow);
  transition:all .3s ease;
}
.tile-ico{color:#7d8b96; transition:color .3s}
.tile-ico svg{width:34px; height:34px; display:block}
.tile-name{font-size:.95rem; font-weight:600}
.tile:hover,.tile:focus-visible{
  outline:none; transform:translateY(-4px);
  border-color:var(--blue);
  box-shadow:0 0 12px rgba(0,240,255,.45), inset 0 0 10px rgba(166,255,0,.10);
}
.tile:hover .tile-ico{color:var(--ink)}

.soon{
  padding:64px 20px; text-align:center; color:var(--ink-3); font-size:.9rem;
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
}

/* ── 곡 목록 ──────────────────────────────────── */
.picker-hint{font-size:.85rem; color:var(--ink-3); margin-bottom:14px}
.song-list{display:flex; flex-direction:column; gap:10px}
.song-card{
  background:var(--card); padding:15px 20px; border-radius:12px;
  display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left;
  border:2px solid transparent; box-shadow:var(--shadow); transition:all .2s;
}
.song-card:hover,.song-card:focus-visible{
  outline:none; border-color:var(--lime); transform:translateX(5px);
}
.song-card .sn{
  font-size:.75rem; color:var(--ink-3); width:20px; flex:none; font-weight:600;
}
.song-card .st{display:block; font-size:1.05rem; font-weight:600}
.song-card .sm{display:block; font-size:.75rem; color:var(--ink-3); margin-top:3px}
.song-card[disabled]{opacity:.5; cursor:not-allowed}

/* ── 타자게임 ─────────────────────────────────── */
.typing{position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.typing-bg{position:absolute; inset:0; background-size:cover; background-position:center; background-color:#f8f9fa}
.typing-scrim{position:absolute; inset:0; background:rgba(255,255,255,.82); backdrop-filter:blur(3px)}
.typing-body{position:relative; padding:34px 30px 30px; text-align:center}

.typing-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:26px; font-size:.8rem;
}
.typing-song{font-weight:600; color:var(--ink-2)}
.typing-progress{color:var(--ink-3)}

.line-stack{margin-bottom:24px}
.line-stack.rolling{animation:rollUp .36s ease}
@keyframes rollUp{from{transform:translateY(20px); opacity:.3} to{transform:none; opacity:1}}
.line-ghost{
  font-size:.9rem; line-height:1.6; color:var(--ink-3); opacity:.5;
  min-height:1.6em; word-break:keep-all;
}
.line-target{
  font-size:clamp(1.2rem,3.4vw,1.7rem); line-height:1.6;
  margin:12px 0; min-height:1.6em; word-break:keep-all;
}
.line-target .ch{transition:color .1s}
.line-target .ok{color:var(--ink)}
.line-target .bad{color:#e08196; text-decoration:underline; text-underline-offset:4px}
.line-target .todo{color:#a3b3c0}
.line-target .cur{border-bottom:2px solid #63d8e8}

.input-wrap{position:relative; max-width:560px; margin:0 auto}
.type-input{
  width:100%; padding:13px 16px; font-size:1rem; text-align:center;
  border-radius:12px; border:1.5px solid #dfe7eb;
  background:rgba(255,255,255,.9); color:var(--ink); outline:none;
  transition:.25s;
}
.type-input::placeholder{color:#c3ccd4}
.type-input:focus{border-color:#9be7f2; box-shadow:0 0 0 3px rgba(0,240,255,.10)}
.type-input.ready{border-color:#c6f06a; box-shadow:0 0 0 3px rgba(166,255,0,.13)}
.type-input.shake{animation:shake .18s}
@keyframes shake{25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}}
.enter-hint{
  display:block; margin-top:9px; font-size:.72rem; color:var(--ink-3);
  opacity:0; transition:opacity .2s;
}
.enter-hint.show{opacity:1}

.typing-stats{display:flex; justify-content:center; gap:28px; margin-top:24px}
.stat{display:flex; align-items:baseline; gap:5px}
.stat b{font-size:1.15rem; font-weight:600; font-variant-numeric:tabular-nums}
.stat span{font-size:.7rem; color:var(--ink-3)}

.typing-done{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:22px 18px; overflow-y:auto;
  background:rgba(255,255,255,.95);
}
/* 내용이 길어지면 가운데 정렬 때문에 위아래가 함께 잘린다. 넘칠 땐 스크롤되게 둔다 */
.typing-done > *{flex:none}
.done-title{font-size:1.6rem; font-weight:700; color:var(--ink)}
.done-sub{font-size:.82rem; color:var(--ink-2); margin-bottom:14px}
.btn{
  display:inline-block; text-decoration:none; text-align:center; line-height:1.2;
  cursor:pointer; font-size:.88rem; font-weight:600;
  padding:10px 24px; border-radius:10px; border:1.5px solid transparent;
  background:rgba(255,255,255,.9); color:var(--ink); border-color:#dfe7eb;
  transition:.25s;
}
.btn:hover{border-color:var(--blue)}
.btn.ghost{color:var(--ink-3)}

.notice{
  padding:16px 18px; border-radius:12px; font-size:.85rem; line-height:1.75;
  background:rgba(255,255,255,.7); color:var(--ink-2); box-shadow:var(--shadow);
}
.notice code{background:rgba(44,62,80,.06); padding:1px 6px; border-radius:5px; font-size:.8rem}

/* ── 기여자 ───────────────────────────────────── */
.credit-hero{text-align:center; padding:30px 20px 26px}
.credit-eyebrow{font-size:.7rem; letter-spacing:.16em; color:var(--ink-3); margin-bottom:10px}
.credit-title{font-size:clamp(1.3rem,4vw,1.75rem); font-weight:800; letter-spacing:-.01em}
.credit-period{
  display:inline-block; margin-top:12px; padding:5px 14px; border-radius:99px;
  font-size:.8rem; color:var(--ink-2);
  background:rgba(255,255,255,.75); border:1px solid var(--hair);
}
.credit-lead{margin-top:18px; font-size:.87rem; line-height:1.9; color:var(--ink-2)}

.poster{margin-bottom:32px}
.poster img{
  display:block; width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow);
}

.credit-h{
  font-size:.82rem; font-weight:600; color:var(--ink-3);
  letter-spacing:.06em; text-align:center; margin-bottom:16px;
}
.donor-list{
  list-style:none; max-width:460px; margin:0 auto 34px;
  background:var(--card); border-radius:14px; padding:6px 20px; box-shadow:var(--shadow);
}
.donor{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--hair);
}
.donor:last-child{border-bottom:none}
.donor-name{flex:1; font-size:.95rem; font-weight:600; word-break:keep-all}
.donor-amt{font-size:.82rem; color:var(--ink-3); font-variant-numeric:tabular-nums}

.credit-sub{
  font-size:.75rem; color:var(--ink-3); text-align:center;
  letter-spacing:.06em; margin-bottom:12px;
}
.donor-names{
  max-width:520px; margin:0 auto;
  text-align:center; font-size:.82rem; line-height:2.1; color:var(--ink-2);
}
.donor-names span:not(:last-child)::after{
  content:"·"; color:var(--ink-3); margin:0 7px; opacity:.6;
}
.credit-thanks{
  margin-top:30px; text-align:center; font-size:.8rem; line-height:1.9; color:var(--ink-3);
}

/* ── 게시판 ───────────────────────────────────── */
.board-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; min-height:34px;
}
.board-count{font-size:.78rem; color:var(--ink-3)}

.board-status{
  text-align:center; font-size:.82rem; color:var(--ink-3);
  padding:26px 12px; line-height:1.7; white-space:pre-line;
}
.post-list{display:flex; flex-direction:column; gap:10px}
.post{
  background:var(--card); border-radius:14px; padding:15px 18px;
  box-shadow:var(--shadow); animation:fade .3s ease;
}
.post-head{display:flex; align-items:baseline; gap:9px; margin-bottom:7px}
.post-nick{font-size:.82rem; font-weight:600; color:var(--ink-2)}
.post-time{font-size:.72rem; color:var(--ink-3); flex:1}
.post-del{
  border:none; background:none; cursor:pointer; padding:2px 4px;
  font-size:.72rem; color:#c8d1d8; transition:color .2s;
}
.post-del:hover{color:#e08196}
.post-body{
  font-size:.92rem; line-height:1.85; color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
}
.more{display:block; margin:16px auto 0}

/* ── 글쓰기 화면 ─────────────────────────────── */
.write{
  background:var(--card); border-radius:16px; padding:22px;
  box-shadow:var(--shadow);
}
.write-who{
  font-size:.75rem; color:var(--ink-3); line-height:1.7;
  padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--hair);
}
.w-in,.w-area{
  padding:12px 14px; font-size:.9rem;
  border:1.5px solid #dfe7eb; border-radius:10px;
  background:rgba(255,255,255,.9); color:var(--ink); outline:none;
  transition:border-color .25s;
}
.w-area{width:100%; resize:vertical; min-height:150px; line-height:1.85}
.w-in.pw{width:170px; font-size:.82rem}
.w-in::placeholder,.w-area::placeholder{color:#c3ccd4}
.w-in:focus,.w-area:focus{border-color:#9be7f2}

.write-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:12px;
}
.w-count{font-size:.72rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.turnstile-wrap{margin-top:16px}
.ts-note{font-size:.78rem; color:var(--ink-3); margin-bottom:10px; line-height:1.7}
.write-blocked{
  margin-top:14px; padding:14px 16px; border-radius:10px;
  font-size:.82rem; line-height:1.8; color:#c2607a;
  background:rgba(224,129,150,.09);
}
.write-err{
  margin-top:12px; padding:10px 14px; border-radius:9px;
  font-size:.8rem; color:#c2607a; background:rgba(224,129,150,.09);
}
.write-actions{display:flex; justify-content:flex-end; gap:9px; margin-top:18px}

@media (max-width:560px){
  .write{padding:18px}
  .write-foot{flex-direction:column; align-items:stretch; gap:10px}
  .w-in.pw{width:100%}
}

/* ── 로그인 ──────────────────────────────────── */
.topbar-auth{margin-left:auto; display:flex; align-items:center; gap:10px}
.auth-name{font-size:.78rem; color:var(--ink-2); font-weight:600}
.auth-link{
  background:none; border:none; cursor:pointer; padding:0;
  font-size:.75rem; color:var(--ink-3); text-decoration:none;
  font-family:inherit; transition:color .2s;
}
.auth-link:hover{color:#0072ff}

.auth-box{
  max-width:360px; margin:12px auto 0;
  background:var(--card); border-radius:16px; padding:24px; box-shadow:var(--shadow);
}
.auth-tabs{display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--hair)}
.auth-tab{
  flex:1; background:none; border:none; cursor:pointer; font-family:inherit;
  padding:10px 0 12px; font-size:.88rem; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:.2s;
}
.auth-tab.is-on{color:var(--ink); font-weight:600; border-bottom-color:#63d8e8}
.auth-form{display:flex; flex-direction:column; gap:10px}
.auth-form .w-in{width:100%}
.btn.wide{width:100%; padding:12px}
.auth-err{
  margin-top:14px; padding:10px 14px; border-radius:9px;
  font-size:.8rem; color:#c2607a; background:rgba(224,129,150,.09);
}
.auth-note{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--hair);
  font-size:.72rem; color:var(--ink-3); line-height:1.7; text-align:center;
}

/* ── 타자게임 점수 ───────────────────────────── */
.score-box{margin:4px 0 6px; text-align:center}
.score-main{display:flex; align-items:baseline; justify-content:center; gap:5px}
.score-main b{
  font-size:2.4rem; font-weight:700; font-variant-numeric:tabular-nums;
  background:linear-gradient(45deg,#00c6ff,#0072ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.score-main span{font-size:.85rem; color:var(--ink-3)}
.score-meta{font-size:.76rem; color:var(--ink-3); margin-top:4px}
.score-meta a{color:#0072ff; text-decoration:none}

.rank-box{
  margin:14px auto 4px; max-width:280px; width:100%;
  padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.75);
  border:1px solid var(--hair);
}
.rank-title{font-size:.72rem; color:var(--ink-3); margin-bottom:9px; text-align:center}
.rank-list{list-style:none}
.rank-list li{
  display:flex; align-items:baseline; gap:10px;
  padding:6px 0; font-size:.82rem;
}
.rank-n{width:14px; color:var(--ink-3); font-size:.75rem}
.rank-name{flex:1; color:var(--ink); word-break:keep-all}
.rank-score{color:var(--ink-2); font-variant-numeric:tabular-nums}

/* ── 이메일 인증 · 관리자 ────────────────────── */
.verify-icon{
  font-size:2.4rem; text-align:center; margin-bottom:14px;
  background:linear-gradient(45deg,#00c6ff,#0072ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.verify-msg{
  text-align:center; font-size:.88rem; line-height:1.9; color:var(--ink-2);
  white-space:pre-line;
}
.verify-actions{display:flex; gap:9px; justify-content:center; margin-top:22px; flex-wrap:wrap}

.verify-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-radius:12px; margin-bottom:16px;
  font-size:.8rem; line-height:1.7; color:#8a6d3b;
  background:rgba(255,209,102,.16); border:1px solid rgba(255,209,102,.4);
}
.verify-banner a{color:#0072ff; text-decoration:none; font-weight:600}

.admin-tabs{display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--hair)}

/* ── 글 첨부 사진 ────────────────────────────── */
.write-image{position:relative; margin-top:12px; max-width:260px}
.write-image img{
  display:block; width:100%; height:auto; border-radius:11px;
  border:1px solid var(--hair);
}
.img-remove{
  position:absolute; top:7px; right:7px; width:24px; height:24px;
  border:none; border-radius:50%; cursor:pointer; line-height:1;
  font-size:15px; color:#fff; background:rgba(30,45,55,.62);
  display:grid; place-items:center; transition:background .2s;
}
.img-remove:hover{background:rgba(30,45,55,.85)}
.btn-sm{padding:7px 14px; font-size:.78rem}

.post-image{display:block; margin-top:10px; max-width:340px}
.post-image img{
  display:block; width:100%; height:auto; border-radius:11px;
  border:1px solid var(--hair);
}

/* ── 프로필 사진 ─────────────────────────────── */
.avatar{
  width:30px; height:30px; flex:none; border-radius:50%;
  display:inline-grid; place-items:center; overflow:hidden;
  font-size:.8rem; font-weight:700; color:#33484a;
  background:#e6eef1; line-height:1; user-select:none;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar-sm{width:26px; height:26px; font-size:.72rem}
.avatar-lg{width:84px; height:84px; font-size:2rem}

/* ── 설정 ────────────────────────────────────── */
.settings{max-width:440px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.set-card{
  background:var(--card); border-radius:14px; padding:20px; box-shadow:var(--shadow);
}
.set-title{
  font-size:.78rem; font-weight:600; color:var(--ink-3);
  letter-spacing:.04em; margin-bottom:14px;
}
.set-avatar{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.set-avatar-actions{display:flex; gap:8px; flex-wrap:wrap}
.set-row{display:flex; flex-direction:column; gap:9px}
.set-row .w-in{width:100%}
.set-info{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:.84rem}
.set-info + .set-info{border-top:1px solid var(--hair)}
.set-info b{font-weight:600; color:var(--ink-3); font-size:.78rem}
.set-msg{
  margin-top:12px; padding:10px 14px; border-radius:9px; font-size:.8rem; line-height:1.6;
}
.set-msg.ok{color:#2f7a52; background:rgba(124,220,160,.15)}
.set-msg.bad{color:#c2607a; background:rgba(224,129,150,.09)}
.set-file{display:none}

/* ── 코인 ────────────────────────────────────── */
.coin-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:99px; text-decoration:none;
  font-size:.74rem; font-weight:600; color:#8a6d2f;
  background:linear-gradient(135deg,#ffe9a8,#ffd977);
  transition:filter .2s;
}
.coin-chip:hover{filter:brightness(1.05)}
.coin-dot{
  width:9px; height:9px; border-radius:50%;
  background:#f5b301; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);
}
a.auth-name{text-decoration:none}
a.auth-name:hover{color:#0072ff}

.coin-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,14px);
  padding:11px 20px; border-radius:99px; z-index:60;
  font-size:.82rem; color:#8a6d2f; background:linear-gradient(135deg,#ffe9a8,#ffd977);
  box-shadow:0 6px 20px rgba(180,140,40,.22);
  opacity:0; transition:opacity .3s, transform .3s;
}
.coin-toast.show{opacity:1; transform:translate(-50%,0)}

/* ── 안내 팝업 ───────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  padding:20px; background:rgba(30,45,55,.28);
}
.modal-box{
  width:100%; max-width:360px; background:#fff; border-radius:16px; padding:24px;
  box-shadow:0 16px 44px rgba(31,38,135,.16);
}
.modal-title{font-size:1rem; font-weight:700; margin-bottom:16px}
.modal-list{list-style:none; display:flex; flex-direction:column; gap:9px}
.modal-list li{
  font-size:.84rem; line-height:1.7; color:var(--ink-2); padding-left:14px; position:relative;
}
.modal-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:#c9d6de;
}
.modal-list b{color:var(--ink); font-weight:700}
.modal-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:22px;
}
.modal-skip{display:flex; align-items:center; gap:7px; font-size:.76rem; color:var(--ink-3)}

.modal-guest{
  margin-top:14px; padding:11px 14px; border-radius:9px;
  font-size:.76rem; line-height:1.7; color:var(--ink-2); background:rgba(240,246,249,.8);
}
.board-status a{color:#0072ff; text-decoration:none; font-weight:600}

/* ── 상점 ────────────────────────────────────── */
.grid-3{grid-template-columns:repeat(3,1fr); max-width:600px}
.tile.is-soon{opacity:.55}

.shop-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:16px; max-width:520px; margin:0 auto;
}
.shop-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px; border-radius:16px; text-decoration:none; color:inherit;
  background:var(--card); box-shadow:var(--shadow);
  border:2px solid transparent; transition:all .25s;
}
.shop-item:hover{transform:translateY(-3px); border-color:var(--blue)}
.shop-item.sold-out{opacity:.55}
.shop-name{font-size:.92rem; font-weight:600}
.shop-price{font-size:.78rem; color:var(--ink-3)}
.shop-price b{color:var(--ink); font-size:.92rem}
.shop-price s{opacity:.5; margin-right:3px}
.shop-sold{font-size:.7rem; color:#c2607a}

.mystery-card{
  display:grid; place-items:center; width:110px; aspect-ratio:3/4;
  border-radius:14px; background:linear-gradient(150deg,#dbeafe,#e7f7ee 55%,#fde7f1);
  border:1px solid rgba(44,62,80,.08);
}
.mystery-card > span{
  font-size:2.6rem; font-weight:700; color:#b6c4cf;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.mystery-card.sm{width:52px; border-radius:9px}
.mystery-card.sm > span{font-size:1.2rem}

.product{max-width:420px; margin:0 auto; text-align:center}
.product .mystery-card{width:150px; margin:0 auto 22px}
.product-price{font-size:1.05rem; margin-bottom:8px}
.product-price b{font-size:1.4rem; font-weight:700}
.product-price s{opacity:.45; margin-right:6px; font-size:.9rem}
.sale-tag{
  display:inline-block; margin-left:8px; padding:3px 9px; border-radius:99px;
  font-size:.68rem; font-weight:700; color:#fff; background:#ff8fa8;
}
.product-stock{font-size:.78rem; color:var(--ink-3); margin-bottom:22px}
.product-desc{
  font-size:.88rem; line-height:1.95; color:var(--ink-2);
  text-align:left; padding:18px; border-radius:13px;
  background:var(--card); box-shadow:var(--shadow); margin-bottom:20px;
}
.product-note{font-size:.78rem; color:var(--ink-3); margin-top:10px}
.btn.disabled{opacity:.5; pointer-events:none}
.fineprint{
  margin-top:22px; font-size:.7rem; line-height:1.85; color:#aeb9c2; text-align:left;
}

/* ── 구매 ────────────────────────────────────── */
.order-form{
  max-width:400px; margin:0 auto; display:flex; flex-direction:column; gap:10px;
  background:var(--card); border-radius:16px; padding:22px; box-shadow:var(--shadow);
}
.order-form .set-title{margin:10px 0 2px}
.order-summary{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--hair);
}
.order-name{font-size:.95rem; font-weight:600}
.order-price{font-size:.82rem; color:var(--ink-3); margin-top:3px}
.order-price b{color:var(--ink); font-size:.95rem}
.order-addr{display:flex; gap:8px}
.order-addr .w-in{flex:1}
.order-addr .btn{flex:none; white-space:nowrap}
.order-form .w-in{width:100%}
.order-form .w-in[readonly]{background:rgba(240,245,247,.8); cursor:default}

.consent{
  display:flex; gap:10px; align-items:flex-start; margin-top:8px;
  padding:14px 16px; border-radius:11px; background:rgba(240,246,249,.7);
  font-size:.8rem; line-height:1.6; cursor:pointer;
}
.consent input{margin-top:3px; flex:none}
.consent b{display:block; font-weight:700; margin-bottom:6px; font-size:.82rem}
.consent-body{display:block; font-size:.74rem; line-height:1.8; color:var(--ink-3)}

.order-done{max-width:400px; margin:0 auto; text-align:center; padding:40px 20px}
.order-done .done-title{margin-bottom:10px}
.order-done .done-sub{margin-bottom:22px}
.post-del.done{color:#2f7a52; cursor:default}

@media (max-width:560px){
  .grid-3{grid-template-columns:1fr 1fr}
  .shop-grid{grid-template-columns:1fr 1fr}
}

/* ── 타자연습 배경 영상 ──────────────────────── */
.typing-video{
  position:absolute; inset:-8%; z-index:0;
  opacity:0; transition:opacity 1s ease; pointer-events:none;
  filter:blur(14px) saturate(1.15);
}
.typing-video.on{opacity:.55}
.typing-video iframe, .typing-video > div{
  width:100%; height:100%; border:0; display:block;
  transform:scale(1.25); transform-origin:center;
}
.typing-scrim{z-index:1}
.typing-body{z-index:2}

/* ── 랭킹보드 ────────────────────────────────── */
.grid-2x2{grid-template-columns:repeat(2,1fr); max-width:460px}
.rank-songs{display:flex; flex-direction:column; gap:14px; max-width:460px; margin:0 auto}
.rank-card{
  background:var(--card); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow);
}
.rank-song{font-size:.95rem; font-weight:700; margin-bottom:12px}
.rank-empty{font-size:.8rem; color:var(--ink-3)}
.rank-card .rank-list li{gap:10px; padding:7px 0}
.rank-card .rank-list li + li{border-top:1px solid var(--hair)}
.rank-list li.is-me{
  background:rgba(0,198,255,.07); border-radius:8px;
  margin:0 -8px; padding-left:8px; padding-right:8px;
}
.rank-list li.is-me .rank-name{font-weight:700}

/* ── 관리자 코인 수정 ────────────────────────── */
.coin-chip.static{pointer-events:none}
.coin-edit{display:flex; gap:7px; margin-top:12px}
.coin-edit .w-in{flex:1; padding:8px 12px; font-size:.8rem}
.coin-edit .btn{flex:none}

/* ── BGM 버튼 ─────────────────────────────────── */
.bgm-toggle{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:#fff; border:1px solid #e0e0e0; color:#555; font-size:15px;
  box-shadow:var(--shadow); transition:transform .2s ease, color .2s;
}
.bgm-toggle:hover{transform:scale(1.06)}
.bgm-toggle.playing{color:#00c3ff}
.bgm-toggle.playing .bgm-icon{display:inline-block; animation:spin 3s linear infinite}
@keyframes spin{100%{transform:rotate(360deg)}}

/* ── 하단 바 ─────────────────────────────────── */
.footer{
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.6);
  border-top:1px solid rgba(0,0,0,.05);
  font-size:.8rem; color:#666; line-height:1.6; text-align:center;
}
.footer-links{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-bottom:8px}
.footer-links a{
  display:inline-flex; align-items:center; gap:6px;
  color:#333; text-decoration:none; font-weight:600; transition:color .2s;
}
.footer-links a:hover{color:#0072ff}
.fi{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; color:#98a4ac;
}
.fi svg{width:100%; height:100%; display:block}
.footer-links a:hover .fi{color:#0072ff}
.footer-addr{font-size:.75rem; color:#888}
.footer-note{margin-top:6px; font-size:.7rem; color:#a8b2ba}

/* ── 반응형 ───────────────────────────────────── */
@media (max-width:560px){
  .app{width:100%; margin:0; border-radius:0; min-height:100vh}
  .topbar{padding:20px 16px 4px}
  .stage{padding:14px 16px 22px}
  .grid{gap:12px; max-width:none}
  .tile-ico svg{width:29px; height:29px}
  .typing-body{padding:26px 18px 24px}
  .typing-stats{gap:20px}
  .donor-list{padding:4px 16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
}

/* ── 좁은 화면 보강 ──────────────────────────────
   기존 규칙 뒤에 덧붙여 덮어쓴다. 위쪽 규칙을 지우지 않는다. */
@media (max-width:560px){
  .topbar{flex-wrap:wrap; gap:8px; padding:16px 14px 4px}
  .brand{font-size:1.25rem}
  .brand-sub{display:none}
  .topbar-auth{gap:8px}
  .coin-chip{padding:3px 8px; font-size:.7rem}

  .grid, .grid-2x2, .grid-3, .shop-grid{max-width:none}
  .grid-3{grid-template-columns:1fr 1fr}
  .tile{padding:14px}
  .tile-ico svg{width:26px; height:26px}
  .tile-name{font-size:.86rem}

  .typing{min-height:0}
  .typing-done{padding:18px 14px}
  .score-main b{font-size:1.9rem}
  .rank-box{max-width:none}

  .shop-grid{grid-template-columns:1fr 1fr; gap:10px}
  .shop-item{padding:12px; gap:7px}
  .mystery-card{width:100%; max-width:120px}
  .product{max-width:none}
  .product .mystery-card{width:130px}

  .rank-songs{max-width:none}
  .rank-card{padding:15px 16px}
  .rank-list li{gap:8px; font-size:.8rem}
  .rank-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  .order-form, .settings, .auth-box{max-width:none}
  .order-addr{flex-direction:column}
  .order-addr .btn{width:100%}
  .coin-edit{flex-wrap:wrap}
  .coin-edit .w-in{flex:1 1 100%}
  .modal-actions{flex-direction:column; align-items:stretch; gap:12px}
  .modal-actions .btn{width:100%}
}

@media (max-width:380px){
  .grid, .grid-3, .shop-grid{grid-template-columns:1fr}
  .tile{aspect-ratio:auto; min-height:110px}
}

/* ── 이벤트 ──────────────────────────────────── */
.event-box{
  max-width:460px; margin:0 auto 26px; padding:24px 22px; border-radius:16px;
  text-align:center; box-shadow:var(--shadow);
  background:linear-gradient(150deg,#eef7ff,#f4fbf6 55%,#fdeef5);
  border:1px solid rgba(44,62,80,.07);
}
.event-tag{
  display:inline-block; padding:3px 11px; border-radius:99px; margin-bottom:12px;
  font-size:.66rem; font-weight:700; letter-spacing:.12em; color:#fff; background:#0072ff;
}
.event-title{font-size:1.1rem; font-weight:700; margin-bottom:10px}
.event-lead{font-size:.85rem; line-height:1.85; color:var(--ink-2); margin-bottom:16px}
.event-prizes{
  list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:20px;
  padding:14px 16px; border-radius:11px; background:rgba(255,255,255,.75);
}
.event-prizes li{font-size:.85rem; color:var(--ink)}
.event-prizes b{
  display:inline-block; min-width:38px; margin-right:8px;
  font-weight:700; color:#0072ff;
}
.event-note{margin-top:12px; font-size:.72rem; color:var(--ink-3)}
.ev-hint{font-size:.74rem; line-height:1.75; color:var(--ink-3); margin:-2px 0 6px}

/* ── 공지 팝업 ───────────────────────────────── */
.notice-pop{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  padding:20px; background:rgba(30,45,55,.3);
}
.notice-box{
  position:relative; width:100%; max-width:330px; padding:26px 22px 20px;
  border-radius:16px; text-align:center;
  background:linear-gradient(150deg,#eef7ff,#f6fbf8 55%,#fdeef5);
  box-shadow:0 16px 44px rgba(31,38,135,.2);
}
.notice-x{
  position:absolute; top:10px; right:10px; width:28px; height:28px;
  border:none; background:none; cursor:pointer; line-height:1;
  font-size:20px; color:#9aa8b4; border-radius:50%; transition:.2s;
}
.notice-x:hover{background:rgba(44,62,80,.07); color:var(--ink)}
.notice-title{font-size:1.02rem; font-weight:700; margin-bottom:10px}
.notice-body{font-size:.82rem; line-height:1.85; color:var(--ink-2); margin-bottom:20px}
.notice-skip{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:14px; font-size:.74rem; color:var(--ink-3); cursor:pointer;
}

.entry-link{
  display:block; margin-top:6px; font-size:.74rem; color:#0072ff;
  word-break:break-all; text-decoration:none;
}
.entry-tools{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap}
.entry-tools .w-in{flex:1; min-width:120px; padding:8px 12px; font-size:.8rem}

@media (max-width:560px){
  .event-box{max-width:none; padding:20px 18px}
  .notice-box{max-width:none}
}

/* ── 상점 광고 ───────────────────────────────── */

/* ── 응모 조건 ───────────────────────────────── */
.ev-rules{
  max-width:400px; margin:0 auto 14px; padding:20px 22px; border-radius:16px;
  background:var(--card); box-shadow:var(--shadow);
}
.ev-rules .set-title{margin:0 0 12px}
.ev-rules .set-title + *{margin-top:0}
.rule-list{margin:0 0 18px; padding-left:18px}
.rule-list li{font-size:.84rem; line-height:1.9; color:var(--ink-2)}
.rule-list b{color:var(--ink); font-weight:700}
.rule-list.plain{list-style:none; padding-left:0; margin-bottom:0}
.rule-list.plain li{position:relative; padding-left:13px}
.rule-list.plain li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:4px; height:4px; border-radius:50%; background:#c9d6de;
}
.tag-list{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px}
.tag-list span{
  font-size:.76rem; font-weight:600; color:#0072ff;
  padding:5px 11px; border-radius:99px; background:rgba(0,114,255,.08);
}
@media (max-width:560px){ .ev-rules{max-width:none} }

/* ── 응모 심사 ───────────────────────────────── */
.entry-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px; flex-wrap:wrap;
}
.entry-filters{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  border:1px solid var(--hair); background:rgba(255,255,255,.8); cursor:pointer;
  padding:6px 13px; border-radius:99px; font-size:.76rem; color:var(--ink-3);
  font-family:inherit; transition:.2s;
}
.chip:hover{color:var(--ink)}
.chip.is-on{background:#0072ff; border-color:#0072ff; color:#fff; font-weight:600}

.plat-tag{
  font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:99px;
  color:#fff; flex:none;
}
.plat-x{background:#1d1d1f}
.plat-instagram{background:#c9418b}
.plat-other{background:#b6c2cb}

.post.is-pass{box-shadow:0 0 0 2px rgba(47,122,82,.35), var(--shadow)}
.post.is-fail{opacity:.6}

.ox-group{display:flex; gap:4px; flex:none}
.ox{
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-family:inherit;
  font-size:.86rem; font-weight:700; border:1px solid var(--hair);
  background:rgba(255,255,255,.85); color:var(--ink-3); transition:.2s;
}
.ox-pass.is-on{background:#2f7a52; border-color:#2f7a52; color:#fff}
.ox-fail.is-on{background:#c2607a; border-color:#c2607a; color:#fff}
.ox:hover{color:var(--ink)}

/* ── 응모 링크 입력 ──────────────────────────── */
.url-row{display:flex; gap:8px}
.url-row .w-in{flex:1; min-width:0}
.url-row .btn{flex:none; white-space:nowrap}
.ev-hint.ok{color:#2f7a52}
.ev-hint.bad{color:#c2607a}
.rule-list.plain.warn li::before{background:#e8a0b0}
.rule-list.plain.warn li{color:var(--ink-2)}
.btn:disabled{opacity:.45; cursor:not-allowed}
@media (max-width:560px){
  .url-row{flex-direction:column}
  .url-row .btn{width:100%}
}

/* 목록 다음에 오는 소제목은 위쪽 여백이 필요하다 */
.ev-rules .rule-list + .set-title,
.ev-rules .tag-list + .set-title{margin-top:22px}
.ev-rules .rule-list.plain{margin-bottom:0}
.ev-rules .rule-list.plain b{color:var(--ink)}
.ev-rules .rule-list.plain li{margin-bottom:4px}

/* ── 광고판 위치 ─────────────────────────────── */
.ev-place{
  max-width:400px; margin:0 auto 14px; padding:22px 20px; border-radius:16px;
  text-align:center; color:#fff;
  background:linear-gradient(135deg,#0072ff,#00c6ff);
  box-shadow:0 8px 24px rgba(0,114,255,.25);
}
.place-tag{
  font-size:.66rem; font-weight:700; letter-spacing:.14em;
  opacity:.85; margin-bottom:10px;
}
.place-line{font-size:1.35rem; font-weight:800; letter-spacing:-.01em}
.place-sub{margin-top:8px; font-size:.88rem; line-height:1.7; opacity:.95}

.ev-go{margin-top:24px; padding-top:20px; border-top:1px solid var(--hair)}
.ev-go-note{margin-top:9px; font-size:.74rem; color:var(--ink-3); text-align:center}

@media (max-width:560px){
  .ev-place{max-width:none}
  .place-line{font-size:1.2rem}
}

.event-place, .notice-place{
  margin:0 0 16px; padding:12px 14px; border-radius:11px;
  font-size:.84rem; line-height:1.7; color:#0a4f9e;
  background:rgba(0,114,255,.09);
}
.event-place b, .notice-place b{font-size:.95rem; font-weight:800}

.ev-must{
  margin:20px 0 0; padding:14px 16px; border-radius:11px;
  font-size:.82rem; line-height:1.8; color:#8a5a2b;
  background:rgba(255,196,110,.16); border:1px solid rgba(255,196,110,.45);
}
.ev-must b{color:#7a4a18; font-weight:700}

/* 광고는 DOM 을 옮기지 않고 순서만 뒤로 보낸다 */

/* ── 주문 내역 ───────────────────────────────── */
.set-empty{font-size:.8rem; color:var(--ink-3)}
.order-row{padding:12px 0; border-bottom:1px solid var(--hair)}
.order-row:last-child{border-bottom:none}
.order-row:first-child{padding-top:0}
.order-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.order-nm{font-size:.9rem; font-weight:600}
.order-st{
  font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:99px;
  color:var(--ink-3); background:rgba(44,62,80,.06); flex:none;
}
.order-st.done{color:#2f7a52; background:rgba(47,122,82,.1)}
.order-sub{font-size:.74rem; color:var(--ink-3); margin-top:5px}
.track-link{
  display:inline-block; margin-top:8px; padding:7px 13px; border-radius:9px;
  font-size:.76rem; font-weight:600; text-decoration:none;
  color:#0a4f9e; background:rgba(0,114,255,.09);
}
.track-link:hover{background:rgba(0,114,255,.16)}

.track-fields{display:flex; gap:7px; margin-top:10px}
.track-fields .w-in{flex:1; min-width:0; padding:8px 12px; font-size:.8rem}
.track-fields select.w-in{flex:0 0 118px}
@media (max-width:560px){ .track-fields{flex-wrap:wrap} .track-fields select.w-in{flex:1 1 100%} }

.track-fields{display:flex; gap:7px; margin-top:10px}
.track-fields .w-in{flex:1; min-width:0; padding:8px 12px; font-size:.8rem}
.track-fields select.w-in{flex:0 0 120px}
.track-fields .w-in:disabled{opacity:.6}
@media (max-width:560px){
  .track-fields{flex-wrap:wrap}
  .track-fields select.w-in{flex:1 1 100%}
}

/* 광고는 그 자체가 사각형이라 카드를 씌우지 않는다 */

/* 팝업 제목이 두 줄이어도 넘치지 않게 */
.notice-title{line-height:1.5}
.notice-body{margin-bottom:18px}

/* ── 404 ─────────────────────────────────────── */
.nf{max-width:420px; margin:0 auto; text-align:center; padding:8px 0 20px}
.nf-photo{margin:0 0 26px; position:relative}
.nf-photo img{
  display:block; width:100%; height:auto; max-height:320px; object-fit:cover;
  object-position:center 22%;
  border-radius:18px; box-shadow:var(--shadow);
}
.nf-photo.is-empty img{display:none}
.nf-photo.is-empty{
  height:180px; border-radius:18px;
  background:linear-gradient(150deg,#dbeafe,#e7f7ee 55%,#fde7f1);
  display:grid; place-items:center;
}
.nf-cap{
  margin-top:10px; font-size:.74rem; color:var(--ink-3);
}
.nf-photo.is-empty .nf-cap{margin:0}

.nf-code{
  font-size:3.2rem; font-weight:800; line-height:1; letter-spacing:.02em;
  background:linear-gradient(45deg,#00c6ff,#0072ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nf-title{font-size:1.05rem; font-weight:700; margin-top:12px}
.nf-text{font-size:.85rem; line-height:1.9; color:var(--ink-2); margin-top:12px}
.nf-links{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:26px;
}
@media (max-width:560px){
  .nf{max-width:none}
  .nf-code{font-size:2.6rem}
  .nf-photo img{max-height:240px}
}

/* ── 좋아요, 댓글, 신고 ──────────────────────── */
.post-actions{
  display:flex; align-items:center; gap:6px; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--hair);
}
.act{
  display:inline-flex; align-items:center; gap:5px;
  border:none; background:none; cursor:pointer; font-family:inherit;
  padding:5px 9px; border-radius:8px; font-size:.76rem; color:var(--ink-3);
  transition:.2s;
}
.act:hover{background:rgba(44,62,80,.05); color:var(--ink-2)}
.act:disabled{opacity:.5; cursor:default}
.act-ico{font-size:.86rem; line-height:1}
.act.like.is-on{color:#e05575}
.act.like.is-on .act-ico{transform:scale(1.1)}
.act.quiet{margin-left:auto; color:#c3ccd4; font-size:.72rem}
.act.quiet:hover{color:#e08196}

.comment-pane{margin-top:12px; padding-top:12px; border-top:1px solid var(--hair)}
.cm-list{display:flex; flex-direction:column; gap:12px; margin-bottom:12px}
.cm-empty{font-size:.78rem; color:var(--ink-3); padding:4px 0}
.cm-head{display:flex; align-items:center; gap:8px}
.cm-who{font-size:.78rem; font-weight:600; color:var(--ink-2)}
.cm-time{font-size:.7rem; color:var(--ink-3); flex:1}
.cm-head .act.quiet{margin-left:0}
.cm-body{
  font-size:.84rem; line-height:1.8; color:var(--ink); margin-top:5px;
  padding-left:34px; white-space:pre-wrap; word-break:break-word;
}
.cm-form{display:flex; gap:7px; flex-wrap:wrap}
.cm-form .w-in{flex:1; min-width:0; padding:9px 13px; font-size:.82rem}
.cm-form .cm-pw{flex:0 0 110px}
.cm-form .btn{flex:none}

.rp-opts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.rp-opt{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  font-size:.82rem; color:var(--ink-2);
  padding:9px 12px; border-radius:9px; background:rgba(240,246,249,.7);
}
.rp-opt:has(input:checked){background:rgba(0,114,255,.1); color:var(--ink); font-weight:600}
.rp-detail{width:100%}
.rp-err{margin-top:10px}

@media (max-width:560px){
  .cm-form .cm-pw{flex:1 1 100%}
  .cm-body{padding-left:0}
}

.rp-meta{font-size:.74rem; color:var(--ink-3); margin-top:8px; line-height:1.7}

/* ── 알림 배지 ───────────────────────────────── */
.tile{position:relative}
.tile-badge{
  position:absolute; top:10px; right:10px;
  min-width:20px; height:20px; padding:0 6px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; line-height:1;
  color:#fff; background:#ff3b30;
  box-shadow:0 2px 6px rgba(255,59,48,.4);
}

/* ── 상점 광고를 상품처럼 ────────────────────── */
/* 320px 광고가 들어가야 하므로 칸을 그만큼 넓게 잡는다 */
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); max-width:640px}
@media (max-width:560px){
  .shop-grid{grid-template-columns:1fr 1fr; max-width:none}
}

/* ── 한글 줄바꿈 ──────────────────────────────
   기본값은 한글을 아무 글자 사이에서나 끊는다. 그래서 "즐기실 수 있습니 / 다."
   처럼 낱말이 두 동강 나고 마지막 줄에 한 글자만 남는다.
   word-break 은 상속되므로 body 에만 걸면 되고, 게시글 본문처럼 스스로
   break-word 를 쓰는 곳은 자기 규칙을 그대로 유지한다.
   긴 영단어나 URL 은 overflow-wrap 이 받아 준다 — 가로 넘침 방지. */
body{word-break:keep-all; overflow-wrap:break-word}

/* ── 관리자 권한 지정 ────────────────────────── */
.perm-edit{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,0,0,.06);
}
.perm-label{font-size:.72rem; color:var(--muted); margin-right:2px}
.perm-note{font-size:.72rem; color:var(--blue); font-weight:600}
.perm-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.76rem; color:var(--ink);
  padding:3px 8px; border-radius:999px; background:rgba(0,0,0,.04); cursor:pointer;
}
.perm-chip input{margin:0; accent-color:var(--blue)}

/* ── 출석체크 바 ──────────────────────────────── */
.attend{margin:18px auto 0; max-width:520px; width:100%}
.attend-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 16px; border:1px solid var(--line); border-radius:16px;
  background:var(--card); box-shadow:0 2px 10px rgba(0,0,0,.04);
  cursor:pointer; text-align:left; font:inherit; color:inherit;
  transition:transform .12s ease, border-color .12s ease;
}
.attend-row:hover{transform:translateY(-1px); border-color:var(--blue)}
.attend-ico{flex:0 0 auto; width:22px; height:22px; color:var(--blue)}
.attend-ico svg{width:100%; height:100%}
.attend.done .attend-ico{color:var(--lime,#7bc043)}
.attend-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.attend-label{font-size:.92rem; font-weight:600; color:var(--ink)}
.attend-sub{font-size:.72rem; color:var(--muted)}
.attend-btn{flex:0 0 auto; pointer-events:none}

.attend-panel{
  margin-top:8px; padding:14px 16px 16px;
  border:1px solid var(--line); border-radius:16px; background:var(--card);
}
.cal-head{text-align:center; font-weight:600; font-size:.88rem; margin:0 0 10px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; justify-items:center}
.cal-dow{font-size:.66rem; color:var(--muted); padding-bottom:4px}
.cal-pad{height:30px}
.cal-day{
  width:30px; height:30px; line-height:30px; text-align:center;
  font-size:.76rem; border-radius:50%; color:var(--ink);
}
.cal-day.on{background:var(--blue); color:#fff; font-weight:600}
.cal-day.today{outline:2px solid var(--blue); outline-offset:-2px}
.cal-day.future{color:#c8d0d8}
.cal-foot{margin:10px 0 0; text-align:center; font-size:.72rem; color:var(--muted)}

.attend-toast{
  position:fixed; left:50%; bottom:86px; transform:translate(-50%,10px);
  background:rgba(20,28,36,.94); color:#fff; padding:11px 18px; border-radius:14px;
  font-size:.82rem; line-height:1.5; white-space:pre-line; text-align:center;
  opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:60; pointer-events:none;
}
.attend-toast.go{opacity:1; transform:translate(-50%,0)}

/* ── 계급 ─────────────────────────────────────── */
.rank-badge{display:inline-flex; align-items:center; gap:5px; vertical-align:middle}
.rank-badge .rank-name{font-size:.76rem; font-weight:600; color:inherit}
.rank-ico{flex:0 0 auto}

.rank-box{max-width:440px}
.rank-lead{font-size:.8rem; color:var(--muted); line-height:1.6; margin:0 0 14px}
.rank-table{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.rank-row{
  display:grid; grid-template-columns:28px 58px 1fr; align-items:center; gap:8px;
  padding:7px 8px; border-radius:10px; font-size:.78rem;
}
.rank-row.is-mine{background:rgba(56,132,255,.10)}
.rank-cell-ico{display:flex; align-items:center; justify-content:center}
.rank-cell-nm{font-weight:600; color:var(--ink)}
.rank-cell-need{color:var(--muted); font-size:.72rem}
.rank-foot{margin:14px 0 0; font-size:.72rem; color:var(--muted); text-align:center}

@media (max-width:560px){
  .rank-row{grid-template-columns:26px 52px 1fr; gap:6px; font-size:.74rem}
  .rank-cell-need{font-size:.68rem}
  .cal-day, .cal-pad{width:28px; height:28px; line-height:28px}
}

/* 설정 — 프로필 아래 계급 줄 */
.set-rank{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
}
.set-rank-badge{display:inline-flex}
.set-rank-next{flex:1; min-width:120px; font-size:.74rem; color:var(--muted)}

/* 상점 — 계급 상품 카드 */
.mystery-card.rank-card{
  display:flex; align-items:center; justify-content:center;
  color:#1b2026; background:linear-gradient(160deg,#f2f5f8,#e4e9ee);
}
.mystery-card.rank-card svg{width:54px; height:54px}

/* 관리자 검색줄 */
.adm-search{display:flex; gap:6px; margin:0 0 12px}
.adm-search .w-in{flex:1; min-width:0}

/* 게시판 — 닉네임 오른쪽에 작게. 이름이 밀리지 않게 폭을 고정한다 */
.post-head .rank-badge, .cm-head .rank-badge{
  flex:0 0 auto; gap:3px; margin-left:-2px; opacity:.75;
}
.post-head .rank-badge .rank-name{font-size:.66rem; font-weight:500}
.cm-head .rank-badge .rank-name{font-size:.62rem; font-weight:500}

/* ── 메인 아래 얇은 버튼 두 개 ────────────────── */
.minibar{
  display:flex; margin:16px auto 0; max-width:520px; width:100%;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--card); box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.mini{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 10px; text-decoration:none; color:var(--ink);
  transition:background .12s ease;
}
.mini + .mini{border-left:1px solid var(--line)}
.mini:hover{background:rgba(56,132,255,.06)}
.mini-ico{flex:0 0 auto; width:20px; height:20px; color:var(--blue); display:flex}
.mini-ico svg{width:100%; height:100%}
.mini-name{font-size:.84rem; font-weight:600; white-space:nowrap}
.mini-sub{
  font-size:.68rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mini-sub.on{color:#3f9a4e}
@media (max-width:400px){
  .mini{flex-direction:column; gap:2px; padding:9px 6px}
  .mini-name{font-size:.78rem}
}

/* ── 출석 페이지 ──────────────────────────────── */
.at-hero{
  text-align:center; padding:22px 18px; margin-bottom:14px;
  border:1px solid var(--line); border-radius:18px; background:var(--card);
}
.at-hero.done{background:linear-gradient(160deg,#f0f9f1,#e8f5ea); border-color:#c8e6cd}
.at-streak{margin:0 0 4px; font-size:1.18rem; font-weight:700; color:var(--ink)}
.at-total{margin:0 0 16px; font-size:.78rem; color:var(--muted)}
.at-msg{margin:12px 0 0; font-size:.8rem; font-weight:600; color:#3f9a4e}
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-nav .cal-head{margin:0}
.cal-arrow{
  width:30px; height:30px; border:1px solid var(--line); border-radius:8px;
  background:none; color:var(--ink); font-size:1rem; line-height:1; cursor:pointer;
}
.cal-arrow:disabled{opacity:.3; cursor:default}
.at-rules{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.at-rules li{display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--ink)}
.at-rule-n{
  flex:0 0 auto; min-width:44px; text-align:center; font-weight:700; color:var(--blue);
  background:rgba(56,132,255,.10); border-radius:8px; padding:3px 8px; font-size:.82rem;
}
.at-note{margin:14px 0 0; font-size:.72rem; color:var(--muted); line-height:1.6}

/* ── 계급 페이지 ──────────────────────────────── */
.rk-hero{
  text-align:center; padding:24px 18px; margin-bottom:14px;
  border:1px solid var(--line); border-radius:18px; background:var(--card);
}
.rk-hero-ico{display:inline-flex; margin-bottom:8px}
.rk-hero-name{margin:0 0 4px; font-size:1.3rem; font-weight:700; color:var(--ink)}
.rk-hero-sub{margin:0; font-size:.76rem; color:var(--muted)}
.rk-next-name{display:flex; align-items:center; gap:7px; margin:0 0 12px; font-size:.95rem}
.rk-next-name b{color:var(--ink)}
.rk-next-done{margin:12px 0 0; font-size:.78rem; font-weight:600; color:#3f9a4e}
.rk-bar{display:grid; grid-template-columns:40px 1fr 62px; align-items:center; gap:9px; margin-bottom:9px}
.rk-bar-label{font-size:.76rem; color:var(--muted)}
.rk-bar-track{height:7px; border-radius:99px; background:rgba(0,0,0,.07); overflow:hidden}
.rk-bar-fill{display:block; height:100%; border-radius:99px; background:var(--blue); transition:width .4s ease}
.rk-bar.done .rk-bar-fill{background:#3f9a4e}
.rk-bar-num{font-size:.72rem; color:var(--muted); text-align:right}
.rk-stats{display:flex; gap:8px}
.rk-stat{
  flex:1; text-align:center; padding:12px 6px;
  border-radius:12px; background:rgba(0,0,0,.03);
}
.rk-stat b{display:block; font-size:1.22rem; color:var(--ink)}
.rk-stat span{font-size:.7rem; color:var(--muted)}
.rk-buy-lead{margin:0 0 14px; font-size:.8rem; color:var(--muted); line-height:1.6}

/* 상점 — 남은 수량 */
.shop-left{
  font-size:.68rem; font-weight:600; color:#c8922e;
  background:rgba(200,146,46,.10); border-radius:999px; padding:2px 8px; margin-top:2px;
}

/* 관리자 — 상품 관리 */
.prod-card{padding:12px 14px}
.prod-card.is-off{opacity:.55}
.prod-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:10px 0}
.pf{display:flex; flex-direction:column; gap:3px}
.pf-label{font-size:.68rem; color:var(--muted)}
.pf .w-in{width:100%; font-size:.8rem}
.pf textarea.w-in{resize:vertical; min-height:56px; font-family:inherit}
.prod-add{margin-top:6px}
.prod-add summary{
  cursor:pointer; font-size:.8rem; font-weight:600; color:var(--blue);
  padding:8px 4px; list-style:none;
}
.prod-add summary::-webkit-details-marker{display:none}
.prod-add summary::before{content:'+ '}

/* ── 계급장 색 ─────────────────────────────────
   계급마다 색을 달리했더니 등급이 색으로 읽혀 표지 모양이 묻혔다.
   전부 검정으로 통일한다. 파일 끝에 두어야 .mini-ico 처럼
   뒤에 오는 같은 굵기의 규칙에 색을 뺏기지 않는다. */
.tier-bar, .tier-chev, .tier-dia, .tier-leaf{color:#1b2026}

/* ── 약관 페이지 ──────────────────────────────── */
.policy{max-width:720px; margin:0 auto}
.policy-nav{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.policy-nav a{
  font-size:.78rem; color:var(--muted); text-decoration:none;
  padding:5px 12px; border:1px solid var(--line); border-radius:99px;
}
.policy-nav a:hover{color:var(--blue); border-color:var(--blue)}

.policy-hero{margin-bottom:22px}
.policy-kicker{margin:0 0 8px; font-size:.72rem; color:var(--muted); letter-spacing:.04em}
.policy h1{margin:0 0 12px; font-size:1.5rem; font-weight:700; color:var(--ink); line-height:1.35}
.policy-lede{margin:0; font-size:.92rem; color:var(--muted); line-height:1.8}

.policy-alert{
  border:1px solid var(--line); border-left:3px solid var(--blue);
  background:var(--card); border-radius:0 12px 12px 0;
  padding:16px 20px; margin-bottom:34px;
}
.pa-title{margin:0 0 10px; font-weight:700; color:var(--ink); font-size:.92rem}
.policy-alert ul{margin:0; padding-left:18px}
.policy-alert li{margin-bottom:7px; font-size:.86rem; line-height:1.75; color:var(--ink)}
.policy-alert li:last-child{margin-bottom:0}

.policy section{margin-bottom:44px}
.policy-h2{
  margin:0 0 20px; padding-bottom:10px; border-bottom:2px solid var(--ink);
  font-size:1.12rem; font-weight:700; color:var(--ink);
}
.policy h3{margin:26px 0 9px; font-size:.98rem; font-weight:700; color:var(--ink)}
.policy h4{margin:18px 0 8px; font-size:.84rem; font-weight:600; color:var(--muted)}
.policy p{margin:0 0 12px; font-size:.88rem; line-height:1.85; color:var(--ink)}
.policy a{color:var(--blue)}

.policy-list{margin:0 0 14px; padding-left:20px}
.policy-list > li{margin-bottom:9px; font-size:.88rem; line-height:1.8; color:var(--ink)}
.policy-list ul{margin:7px 0 0; padding-left:17px}
.policy-list ul li{margin-bottom:5px; font-size:.85rem; color:var(--muted)}

.policy-table{font-size:.82rem}
.policy-table th{
  background:rgba(0,0,0,.03); font-size:.72rem; font-weight:600; color:var(--muted);
  text-align:left; padding:8px 12px; white-space:nowrap; border-bottom:1px solid var(--line);
}
.policy-table td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.7}
.policy-table tr:last-child td{border-bottom:none}

.policy-note{
  background:rgba(0,0,0,.03); border-radius:10px; padding:14px 18px; margin:0 0 16px;
}
.policy-note p{margin:0; font-size:.85rem; line-height:1.8}
.policy-small{font-size:.78rem !important; color:var(--muted) !important; line-height:1.75 !important}
.policy-foot{
  margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.75rem !important; color:var(--muted) !important; text-align:center;
}
.defs-simple{
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--card); margin-bottom:14px;
}
.defs-simple > div{
  padding:10px 16px; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--ink);
}
.defs-simple > div:last-child{border-bottom:none}
.defs-simple b{display:inline-block; min-width:78px; color:var(--muted); font-weight:600; font-size:.78rem}
.policy .mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em}

/* ── 회원 탈퇴 ────────────────────────────────── */
.danger-card{border-color:rgba(179,57,46,.28)}
.set-note{margin:0 0 12px; font-size:.8rem; color:var(--muted); line-height:1.75}
.danger-open summary{
  cursor:pointer; font-size:.82rem; font-weight:600; color:#b3392e;
  padding:8px 0; list-style:none;
}
.danger-open summary::-webkit-details-marker{display:none}
.danger-open summary::before{content:'▸ '}
.danger-open[open] summary::before{content:'▾ '}
.del-form{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.del-check{display:flex; align-items:center; gap:7px; font-size:.84rem; color:var(--ink); cursor:pointer}
.del-check input{margin:0; accent-color:#b3392e}
.del-hint{margin:0 !important; padding-left:22px}
.btn.danger{background:#b3392e; border-color:#b3392e; color:#fff}
.btn.danger:hover{background:#9c3128}

/* 재설정 화면 */
.auth-lead{margin:0 0 14px; font-size:.85rem; color:var(--muted); line-height:1.75}
.auth-msg{margin:12px 0 0; font-size:.82rem; line-height:1.7}
.auth-msg.ok{color:var(--blue)}
.auth-msg.bad{color:#b3392e}
.footer-note a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.footer-note a:hover{color:var(--blue)}

/* ── 별 ───────────────────────────────────────
   채운 별과 빈 별을 함께 그려 "3개 중 몇 개"가 읽히게 한다. */
.stars{display:inline-flex; align-items:center; gap:2px; vertical-align:middle}
.stars .star{width:13px; height:13px; flex:0 0 auto; fill:rgba(0,0,0,.13)}
.stars .star.on{fill:#e8b53c}
.stars.big .star{width:30px; height:30px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* 곡 카드 — 오른쪽에 별 또는 자물쇠 */
.song-card .sb{flex:1; min-width:0; display:flex; flex-direction:column}
.song-card .sx{flex:0 0 auto; display:flex; align-items:center; margin-left:auto; padding-left:10px}
.song-card .lock{width:18px; height:18px}
.song-card .lock rect{fill:var(--muted); stroke:none}
.song-card .lock path{stroke:var(--muted)}
.song-card.locked{opacity:.55; cursor:not-allowed}
.song-card.locked:hover{transform:none; border-color:var(--line)}

/* 결과 화면 */
.done-stars{display:flex; justify-content:center; margin:6px 0 10px}
.done-unlock{
  margin:12px 0 0; text-align:center; font-size:.84rem; font-weight:600; color:#3f9a4e;
}

/* 순위 줄에서 별은 이름과 기록 사이 */
.rank-stars{flex:0 0 auto; display:flex; align-items:center; padding:0 8px}
@media (max-width:560px){
  .rank-stars{padding:0 4px}
  .stars .star{width:11px; height:11px}
}

/* ── 문제 신고 팝업 ───────────────────────────── */
.report-box{max-width:460px; width:100%}
.report-lead{margin:0 0 16px; font-size:.82rem; color:var(--muted); line-height:1.6}
.report-field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.report-field > span{font-size:.72rem; color:var(--muted)}
.report-field .w-in{width:100%; font-size:.86rem}
.report-field textarea.w-in{
  resize:vertical; min-height:150px; line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem;
}
.report-msg{margin:0 0 12px; font-size:.78rem; color:var(--muted)}
.report-msg.bad{color:#b3392e; font-weight:600}

/* ── 로그인 안내 팝업 ─────────────────────────── */
.login-pop .modal-box{max-width:340px; text-align:center}
.login-pop .lp-ico{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin:0 auto 12px; border-radius:50%;
  background:rgba(0,0,0,.05); color:var(--muted);
}
.login-pop .lp-ico svg{width:22px; height:22px}
.login-pop .lp-song{margin:0 0 6px; font-size:1rem; font-weight:600; color:var(--ink)}
.login-pop .lp-sub{margin:0 0 18px; font-size:.82rem; color:var(--muted); line-height:1.6}

/* ── 알림함 ───────────────────────────────────── */
.bell-wrap{position:relative; display:inline-flex}
.bell{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border:none; background:none;
  color:var(--ink-2); cursor:pointer; border-radius:8px;
}
.bell:hover{background:rgba(0,0,0,.05); color:var(--ink)}
.bell svg{width:19px; height:19px}
.bell-dot{
  position:absolute; top:1px; right:0;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:#e5484d; color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
  box-shadow:0 0 0 2px var(--card);
}
.bell-panel{
  position:absolute; top:38px; right:0; z-index:40;
  width:min(320px, calc(100vw - 28px));
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.12); overflow:hidden;
}
.bell-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-bottom:1px solid var(--line);
  font-size:.82rem; font-weight:600; color:var(--ink);
}
.bell-clear{
  border:none; background:none; color:var(--blue);
  font-size:.72rem; cursor:pointer; padding:2px 4px;
}
.bell-empty{margin:0; padding:26px 14px; text-align:center; font-size:.78rem; color:var(--muted)}
.bell-list{list-style:none; margin:0; padding:0; max-height:min(60vh,380px); overflow-y:auto}
.bell-item{border-bottom:1px solid var(--line)}
.bell-item:last-child{border-bottom:none}
.bell-item.unread{background:rgba(0,195,255,.06)}
.bell-body{
  display:flex; flex-direction:column; gap:3px;
  padding:11px 14px; text-decoration:none; color:inherit;
}
a.bell-body:hover{background:rgba(0,0,0,.03)}
.bell-title{font-size:.8rem; font-weight:600; color:var(--ink); line-height:1.45}
.bell-text{font-size:.74rem; color:var(--muted); line-height:1.5}
.bell-time{font-size:.66rem; color:var(--ink-3)}

@media (max-width:560px){
  .topbar{position:relative}
  .bell-wrap{position:static}
  .bell-panel{left:0; right:0; width:auto; top:calc(100% + 6px)}
  .bell-dot{box-shadow:0 0 0 2px #fff}
}

/* ── 관리자 계정 카드 ─────────────────────────── */
.acct-line{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
}
.acct-label{
  flex:0 0 auto; min-width:34px;
  font-size:.7rem; color:var(--muted);
}
.acct-state{flex:1; min-width:90px; font-size:.74rem; color:#3f9a4e}
.acct-state.bad{color:#b3392e; font-weight:600}

/* 관리자 화면 정리 — 카드 사이 간격과 탭 줄 */
.admin-tabs{
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.admin .post{margin-bottom:10px}
.admin .post-head{gap:8px; flex-wrap:wrap; align-items:center}
.admin .post-nick{font-size:.86rem}
.admin .post-time{font-size:.7rem; color:var(--muted)}
.admin .post-body{font-size:.8rem; white-space:pre-wrap; margin:8px 0 0}
.admin .set-card{margin-bottom:14px}
.coin-edit{display:flex; gap:6px; align-items:center; margin-top:10px; flex-wrap:wrap}
.coin-edit .w-in{flex:1 1 100px; min-width:0}

/* 약관 — 시행일과 변경 이력 */
.policy-history{margin-top:26px; padding-top:18px; border-top:1px solid var(--line)}
.policy-history .policy-list{margin-top:6px}
.policy-history .policy-list ul{margin:5px 0 0; padding-left:18px}
.consent-all{
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:4px;
}
.contact-note{line-height:1.7; color:var(--muted)}

/* 상품 상세 팝업 */
.prod-box{max-width:380px; text-align:center}
.prod-box .notice-x{position:absolute; top:10px; right:12px}
.prod-box .mystery-card{width:150px; height:150px; margin:4px auto 16px}
.prod-name{margin:0 0 6px; font-size:1.05rem; font-weight:700; color:var(--ink)}
.prod-box .product-price{margin:0 0 10px}
.prod-stock-left{margin:0 0 8px; font-size:.74rem; font-weight:600; color:#c8922e}
.prod-box .product-stock{margin:0 0 12px; font-size:.76rem; color:var(--muted)}
.prod-box .product-desc{
  margin:0 0 16px; font-size:.8rem; color:var(--ink-2);
  line-height:1.7; text-align:left;
}
.prod-box .fineprint{margin:14px 0 0; text-align:left}
.btn.disabled{opacity:.5; pointer-events:none}

/* 전체 공지 */
.bc-fields{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.bc-fields textarea.w-in{resize:vertical; font-family:inherit}