/* 뚜까이드 · 프로토타입 v3.6 의 스타일을 그대로 옮긴 파일입니다.
   색 · 간격 · 폰트를 임의로 바꾸지 않습니다. */
:root{
  --paper:#ffffff;
  --surface:#faf7f9;
  --surface-2:#f3eef1;
  --line:#e9e0e5;
  --line-strong:#d8cbd3;
  --ink:#2a1f27;
  --ink-2:#5d4f58;
  --ink-3:#95848e;
  --accent:#e0407c;
  --accent-ink:#b32a5e;
  --accent-soft:#ffeef4;
  --ok:#2f8f68;
  --ok-soft:#e6f4ed;
  --warn:#b07216;
  --warn-soft:#fdf2df;
  --stop:#c4433c;
  --stop-soft:#fdeceb;
  --bar:#241a21;
  --bar-ink:#f0e6ec;
  --bar-line:#413038;
  --shadow:0 1px 2px rgba(42,31,39,.06), 0 8px 24px -14px rgba(42,31,39,.28);
  --radius:12px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#191319;
    --surface:#201921;
    --surface-2:#2a2029;
    --line:#382c35;
    --line-strong:#4b3b45;
    --ink:#f4eaf0;
    --ink-2:#c3b2bd;
    --ink-3:#8d7b87;
    --accent:#ff6fa0;
    --accent-ink:#ff8fb5;
    --accent-soft:#3a1f2c;
    --ok:#5cc79a;
    --ok-soft:#1d3630;
    --warn:#e2ac5b;
    --warn-soft:#3a2c17;
    --stop:#f0776f;
    --stop-soft:#3b1f1e;
    --bar:#120d12;
    --bar-ink:#efe3ea;
    --bar-line:#2c2029;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#191319; --surface:#201921; --surface-2:#2a2029;
  --line:#382c35; --line-strong:#4b3b45;
  --ink:#f4eaf0; --ink-2:#c3b2bd; --ink-3:#8d7b87;
  --accent:#ff6fa0; --accent-ink:#ff8fb5; --accent-soft:#3a1f2c;
  --ok:#5cc79a; --ok-soft:#1d3630; --warn:#e2ac5b; --warn-soft:#3a2c17;
  --stop:#f0776f; --stop-soft:#3b1f1e;
  --bar:#120d12; --bar-ink:#efe3ea; --bar-line:#2c2029;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -14px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:"IBM Plex Sans KR","Malgun Gothic",system-ui,sans-serif;
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,select{font:inherit; color:inherit}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.jua{font-family:"Jua","IBM Plex Sans KR",sans-serif; font-weight:400; letter-spacing:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ── 프로토타입 바 ───────────────────────────── */
.pbar{
  position:sticky; top:0; z-index:50;
  background:var(--bar); color:var(--bar-ink);
  border-bottom:1px solid var(--bar-line);
}
.pbar-in{max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center}
.pbar-brand{display:flex; align-items:baseline; gap:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#a2909b}
.pbar-brand b{font-size:13px; color:var(--bar-ink); letter-spacing:.02em; text-transform:none; font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:4px; flex:1 1 420px}
.chip{
  display:flex; align-items:center; gap:6px;
  padding:4px 9px; border-radius:999px; font-size:11.5px;
  color:#b6a4af; border:1px solid transparent; white-space:nowrap;
  transition:background .15s, color .15s;
}
.chip:hover{background:#2f232b; color:var(--bar-ink)}
.chip[aria-current="true"]{background:var(--accent); color:#fff; border-color:var(--accent)}
.chip code{font-family:"IBM Plex Mono",monospace; font-size:10px; opacity:.7}
.chip[aria-current="true"] code{opacity:.85}
.authbox{display:flex; align-items:center; gap:9px; font-size:11.5px; color:#b6a4af}
.switch{
  position:relative; width:40px; height:22px; border-radius:999px;
  background:#4a3841; border:1px solid #5c4650; transition:background .18s;
}
.switch[aria-pressed="true"]{background:var(--accent); border-color:var(--accent)}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#fff; transition:transform .18s;
}
.switch[aria-pressed="true"]::after{transform:translateX(18px)}

/* ── 제품 셸 ─────────────────────────────────── */
.stage{max-width:1180px; margin:0 auto; padding:22px 20px 64px}
.app{
  background:var(--paper); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.gnb{
  display:flex; align-items:center; gap:6px;
  padding:0 18px; height:56px;
  border-bottom:1px solid var(--line); background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.logo{display:flex; align-items:center; gap:7px; margin-right:14px}
.logo img{width:30px; height:30px; object-fit:contain}
.logo span{font-family:"Jua",sans-serif; font-size:19px; color:var(--accent-ink); letter-spacing:.01em}
.gnb-link{
  padding:7px 11px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--ink-2);
}
.gnb-link:hover{background:var(--surface-2); color:var(--ink)}
.gnb-link[aria-current="true"]{color:var(--accent-ink); background:var(--accent-soft)}
.gnb-right{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2)}
.gnb-user{display:flex; align-items:center; gap:7px}
.gnb-user img{width:24px; height:24px; object-fit:contain}

.screen{padding:26px 26px 40px; min-height:520px}
.screen[hidden]{display:none !important}
.sc-head{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.sc-head h2{font-family:"Jua",sans-serif; font-size:23px; letter-spacing:.01em}
.sc-head .sid{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:5px; padding:2px 6px; margin-bottom:4px;
}
.sc-head p{color:var(--ink-2); font-size:13px; flex:1 1 240px; margin-bottom:2px}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}
.btn{
  padding:8px 15px; border-radius:9px; font-size:13px; font-weight:500;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--ink);
  transition:background .14s, border-color .14s;
}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn-primary:disabled{background:var(--line); border-color:var(--line); color:var(--ink-3); cursor:not-allowed}
.btn-sm{padding:5px 11px; font-size:12px; border-radius:7px}
.btn-block{width:100%; justify-content:center; text-align:center; padding:12px}

.field{
  width:100%; padding:10px 12px; border-radius:9px;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--ink);
  font-size:13.5px;
}
.field::placeholder{color:var(--ink-3)}
.field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field[readonly]{background:var(--surface-2); color:var(--ink-2)}
.lbl{display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:5px}
.lbl .req{color:var(--accent)}
.hint{font-size:11.5px; color:var(--ink-3); margin-top:5px}
.err{font-size:11.5px; color:var(--stop); margin-top:5px}

.tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:16px}
.tab{
  padding:8px 13px; font-size:13px; font-weight:500; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab[aria-selected="true"]{color:var(--accent-ink); border-bottom-color:var(--accent)}
.tab:hover{color:var(--ink)}

.pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap;
}
.pill-ok{background:var(--ok-soft); color:var(--ok)}
.pill-warn{background:var(--warn-soft); color:var(--warn)}
.pill-off{background:var(--surface-2); color:var(--ink-3)}
.pill-accent{background:var(--accent-soft); color:var(--accent-ink)}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
th{
  background:var(--surface); text-align:left; font-size:11.5px; font-weight:600;
  color:var(--ink-2); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface)}
td.num, th.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
td.ctr, th.ctr{text-align:center}
.rowlink{color:var(--ink); font-weight:500}
.rowlink:hover{color:var(--accent-ink); text-decoration:underline}

.avatar{width:22px; height:22px; object-fit:contain; vertical-align:middle; flex:none}
.author{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.uid{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}

.pager{display:flex; justify-content:center; gap:5px; margin-top:18px}
.pager button{
  min-width:30px; height:30px; border-radius:8px; font-size:12.5px;
  border:1px solid var(--line); color:var(--ink-2);
}
.pager button[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}

.empty{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:46px 20px; text-align:center; color:var(--ink-3);
}
.empty img{width:74px; height:74px; object-fit:contain; opacity:.5; filter:grayscale(.7)}
.empty b{display:block; color:var(--ink-2); font-size:13.5px; font-weight:600}
.empty span{font-size:12.5px}

.notice{
  border:1px solid #f0cdd8; background:var(--accent-soft); color:var(--accent-ink);
  border-radius:10px; padding:11px 13px; font-size:12.5px; line-height:1.55;
}
:root[data-theme="dark"] .notice{border-color:#5a2e3f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .notice{border-color:#5a2e3f}}
.notice b{display:block; margin-bottom:2px; font-weight:600}

/* ── 로그인 · 회원가입 ────────────────────────── */
.authwrap{display:flex; justify-content:center; padding:34px 0 20px}
.authcard{
  width:100%; max-width:392px; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; padding:30px 28px 26px;
  box-shadow:var(--shadow);
}
.authcard .mascot{display:block; width:78px; height:78px; object-fit:contain; margin:0 auto 8px}
.authcard h3{font-family:"Jua",sans-serif; font-size:25px; text-align:center; color:var(--accent-ink)}
.authcard .sub{text-align:center; color:var(--ink-3); font-size:12.5px; margin-top:3px}
.authform{display:flex; flex-direction:column; gap:14px; margin-top:22px}
.checkline{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-2); cursor:pointer}
.checkline input{margin-top:3px; accent-color:var(--accent); flex:none}
.checkline.strong{color:var(--ink); font-weight:500}
.authfoot{text-align:center; font-size:12.5px; color:var(--ink-3); margin-top:16px}
.authfoot button{color:var(--accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.warnbox{
  border:1px solid var(--stop); background:var(--stop-soft); color:var(--stop);
  border-radius:10px; padding:11px 13px; font-size:12px; line-height:1.55;
}
.warnbox b{display:block; font-weight:600; margin-bottom:2px}
.inline-btn{display:flex; gap:8px; align-items:flex-start}
.inline-btn .field{flex:1}

/* ── 메인 ───────────────────────────────────── */
.hero{
  display:grid; grid-template-columns:1.35fr .65fr; gap:20px; align-items:center;
  background:linear-gradient(180deg,var(--accent-soft),var(--paper));
  border:1px solid var(--line); border-radius:16px; padding:26px 28px; margin-bottom:22px;
}
.hero h2{font-family:"Jua",sans-serif; font-size:29px; line-height:1.32; color:var(--ink)}
.hero h2 em{font-style:normal; color:var(--accent-ink)}
.hero p{color:var(--ink-2); font-size:13.5px; margin-top:8px}
.herosearch{display:flex; gap:8px; margin-top:16px; max-width:430px}
.herosearch .field{flex:1 1 auto; min-width:0}
.herosearch .btn{flex:0 0 auto; white-space:nowrap}
.heropets{display:flex; justify-content:flex-end; gap:2px}
.heropets img{width:64px; height:64px; object-fit:contain}
.heropets img:nth-child(2){transform:translateY(10px) scale(.86)}
.heropets img:nth-child(3){transform:translateY(-6px) scale(.78)}
@media (max-width:760px){.hero{grid-template-columns:1fr}.heropets{justify-content:flex-start}}

.quicks{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px}
@media (max-width:760px){.quicks{grid-template-columns:repeat(2,1fr)}}
.quick{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:15px 16px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); text-align:left; transition:border-color .15s, transform .15s;
}
.quick:hover{border-color:var(--accent); transform:translateY(-2px)}
.quick b{font-family:"Jua",sans-serif; font-size:15.5px; font-weight:400}
.quick span{font-size:11.5px; color:var(--ink-3)}
.quick .cnt{margin-top:6px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent-ink)}

.cols2{display:grid; grid-template-columns:1.15fr .85fr; gap:20px}
@media (max-width:860px){.cols2{grid-template-columns:1fr}}
.blk{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.blk-head{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.blk-head h3{font-size:13.5px}
.blk-head .more{margin-left:auto; font-size:11.5px; color:var(--ink-3)}
.blk-head .more:hover{color:var(--accent-ink)}
.feedlist{display:flex; flex-direction:column}
.feed{display:flex; gap:10px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; width:100%}
.feed:last-child{border-bottom:0}
.feed:hover{background:var(--surface)}
.feed img{width:30px; height:30px; object-fit:contain; flex:none}
.feed-b{min-width:0; flex:1}
.feed-b b{display:block; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.feed-b span{font-size:11px; color:var(--ink-3)}
.feed .cnt{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); flex:none}

/* ── 티어표 ─────────────────────────────────── */
.searchbox{position:relative; max-width:400px}
.acmenu{
  position:absolute; z-index:15; top:calc(100% + 5px); left:0; right:0;
  background:var(--paper); border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.acitem{display:flex; align-items:center; gap:10px; padding:8px 12px; width:100%; text-align:left}
.acitem:hover,.acitem.on{background:var(--accent-soft)}
.acitem img{width:28px; height:28px; object-fit:contain}
.acitem .ph{
  width:28px; height:28px; border-radius:6px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--ink-3);
}
.acitem b{font-size:13px; font-weight:500}
.acitem span{font-size:11px; color:var(--ink-3); margin-left:auto}
/* ── 등급 배치형 티어표 ─────────────────────── */
.tierboard{display:flex; flex-direction:column; gap:6px; margin-top:18px;
  border:1px solid var(--line); border-radius:var(--radius); padding:10px; background:var(--surface)}
.tierrow{display:flex; gap:8px; align-items:stretch}
.tiergrade{
  flex:0 0 88px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  border-radius:9px; padding:8px 6px; text-align:center; gap:2px;
}
.tiergrade b{font-family:"Jua",sans-serif; font-size:16px; font-weight:400; line-height:1}
.tiergrade span{font-size:9.5px; line-height:1.3; opacity:.85}
.t-sp{background:#ffd9c2; color:#7a3d13}
.t-s {background:#ffeeb0; color:#7a6100}
.t-a {background:#d6f2b8; color:#3d6115}
.t-b {background:#c4eef2; color:#14595f}
.t-c {background:#cfd4f7; color:#2c357d}
.t-d {background:#f9cfe8; color:#7a1d55}
.t-e {background:#dcdcdc; color:#4a4a4a}
.t-n {background:#e6e2f5; color:#4a3d7a}
:root[data-theme="dark"] .tiergrade{filter:brightness(.72) saturate(1.1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tiergrade{filter:brightness(.72) saturate(1.1)}}
/* 추천 배치도 카드 (쫌웨 배치도 목록 맨 위) */
.bestwrap{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px; padding:12px 14px;
}
.bestcard{
  display:flex; flex-direction:column; gap:5px; text-decoration:none;
  border:1px solid var(--line); border-radius:12px; padding:8px; background:var(--surface);
}
.bestcard:hover{border-color:var(--accent)}
.bestcard b{font-size:13px; color:var(--ink-1); line-height:1.35}
.bestimg{
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-radius:9px; background:var(--surface-2); min-height:150px; max-height:320px;
}
.bestimg img{width:100%; height:auto; max-height:320px; object-fit:contain}
@media (max-width:720px), (max-device-width:820px){
  .bestwrap{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .bestimg{min-height:120px}
}

/* 티어 행 고치기 한 줄 */
.rowedit{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.rowedit input[name="code[]"]{max-width:90px}
.rowedit input[name="memo[]"]{flex:1 1 180px; min-width:140px}
.rowedit select{padding:8px 10px; border-radius:9px; border:1px solid var(--line-strong); background:var(--paper); font-size:13px}

/* 화면마다 붙는 화면 번호는 숨깁니다 */
.sc-head .sid, .sid{display:none}   /* 화면 번호는 숨깁니다 */

.tierslot{
  flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:7px 9px; min-height:60px;
  transition:border-color .12s, background .12s;
}
.editing .tierslot{border-style:dashed}
.tierslot.over{border-color:var(--accent); background:var(--accent-soft); border-style:solid}
.editing .tata{cursor:grab}
.editing .tata:active{cursor:grabbing}
.tata.picked{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent-soft)}
.tata.ghost{opacity:.35}
.tierrow.unassigned .tiergrade{background:var(--surface-2); color:var(--ink-2)}
.tierrow.unassigned{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-strong)}
.edithint{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-top:8px; font-size:11.5px; color:var(--ink-3);
}
.tierempty{font-size:11.5px; color:var(--ink-3)}
.tata{
  display:flex; flex-direction:column; align-items:center; gap:2px; width:56px;
  padding:4px 2px; border-radius:8px; border:1px solid transparent; transition:border-color .14s, background .14s;
}
.tata:hover{border-color:var(--accent); background:var(--accent-soft)}
.tata.hl{border-color:var(--accent); background:var(--accent-soft)}
.tata img{width:38px; height:38px; object-fit:contain}
.tata .noimg{
  width:38px; height:38px; border-radius:50%; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink-3);
}
.tata .nm{font-size:10px; color:var(--ink-2); line-height:1.2; text-align:center}

/* ── 도감 레이어 ────────────────────────────── */
#dexLayer{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px}
.dexbg{position:absolute; inset:0; background:rgba(30,20,26,.62)}
.dexcard{
  position:relative; width:min(430px,92vw); max-height:88vh; display:flex; flex-direction:column;
  background:var(--paper); border-radius:16px; overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
}
.dexhead{display:flex; align-items:flex-start; gap:10px; padding:15px 16px; border-bottom:1px solid var(--line)}
.dexhead b{display:block; font-family:"Jua",sans-serif; font-size:19px; font-weight:400; color:var(--accent-ink)}
.dexhead span{font-size:11.5px; color:var(--ink-3)}
.dexclose{margin-left:auto; width:28px; height:28px; border-radius:8px; border:1px solid var(--line); color:var(--ink-2); flex:none}
.dexclose:hover{background:var(--surface-2)}
.dexbody{overflow-y:auto; padding:14px 16px 18px}
.dexbody img{display:block; width:100%; border-radius:10px}
.dexcap{font-size:11px; color:var(--ink-3); text-align:center; margin-top:9px}
.dexempty{display:flex; flex-direction:column; align-items:center; gap:7px; padding:36px 12px; text-align:center}
.dexempty img{width:84px; height:84px; object-fit:contain}
.dexempty .noimg.big{width:84px; height:84px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--ink-3)}
.dexempty b{font-size:14px}
.dexempty span{font-size:12px; color:var(--ink-2)}

.tiergrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:14px; margin-top:18px}
.tiercard{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  padding:16px 14px 13px; text-align:center; transition:border-color .15s;
}
.tiercard:hover{border-color:var(--accent)}
.tiercard img{width:70px; height:70px; object-fit:contain}
.tiercard .ph{
  width:70px; height:70px; margin:0 auto; border-radius:12px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; color:var(--ink-3);
}
.tiercard b{display:block; font-family:"Jua",sans-serif; font-size:16px; font-weight:400; margin-top:9px}
.tiercard .meta{font-size:11px; color:var(--ink-3); margin-top:2px}
.tiercard .tierbadge{
  display:inline-block; margin-top:8px; padding:2px 9px; border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
}
.t1{background:var(--accent-soft); color:var(--accent-ink)}
.t2{background:var(--ok-soft); color:var(--ok)}
.t3{background:var(--surface-2); color:var(--ink-3)}
.patch{
  display:inline-flex; gap:5px; align-items:center; font-family:"IBM Plex Mono",monospace;
  font-size:11px; color:var(--ink-3); border:1px dashed var(--line-strong);
  border-radius:6px; padding:2px 8px;
}

/* ── 가이드 상세 ────────────────────────────── */
.article{max-width:720px}
.article h3{font-size:21px; line-height:1.4; margin-top:6px}
.article .byline{display:flex; align-items:center; gap:8px; margin-top:12px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-3)}
.article .body{padding:18px 0; font-size:14px; line-height:1.85; color:var(--ink-2)}
.article .body p+p{margin-top:13px}
.article .body strong{color:var(--ink); font-weight:600}
.likebar{display:flex; justify-content:center; padding:8px 0 20px}
.likebtn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:999px;
  border:1px solid var(--line-strong); font-size:13px; font-weight:500;
}
.likebtn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
/* 댓글 폐지 안내 */
.nocomment{
  display:flex; gap:14px; align-items:center; margin-top:6px; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.nocomment img{width:44px; height:44px; object-fit:contain; opacity:.7; flex:none}
.nocomment div{font-size:12.5px; color:var(--ink-2); line-height:1.6}
.nocomment b{display:block; color:var(--ink); font-size:13.5px; font-weight:600; margin-bottom:2px}
.likebar{gap:8px}

/* 진화 라인 패널 */
.evo{
  border:1px solid var(--accent); background:var(--accent-soft);
  border-radius:var(--radius); padding:16px 18px; margin-top:16px;
}
.evo-top{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:12px}
.evo-top b{font-family:"Jua",sans-serif; font-size:18px; font-weight:400; color:var(--accent-ink)}
.evo-top .hit{font-size:12px; color:var(--ink-2)}
.evo-chain{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.evo-step{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 14px; border-radius:10px; background:var(--paper);
  border:1px solid var(--line); min-width:88px;
}
.evo-step.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.evo-step img{width:40px; height:40px; object-fit:contain}
.evo-step .ph{width:40px; height:40px; border-radius:8px; background:var(--surface-2)}
.evo-step b{font-size:12px; font-weight:600}
.evo-step span{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-3)}
.evo-arrow{color:var(--accent); font-size:15px}
.evo-foot{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; font-size:12px; color:var(--ink-2)}
.evo-foot .pill{background:var(--paper)}

.ddays{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3)}
.ddays.warn{color:var(--warn); font-weight:600}
.acitem .stage{font-size:10.5px; color:var(--accent-ink); background:var(--accent-soft); padding:1px 6px; border-radius:999px; margin-left:auto}
.acitem .arrow{font-size:11px; color:var(--ink-3)}

.comments{border-top:1px solid var(--line); padding-top:18px}
.comments h4{font-size:13.5px; margin-bottom:12px}
.comment{display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--line)}
.comment.reply{margin-left:32px}
.comment img{width:28px; height:28px; object-fit:contain; flex:none}
.comment .c-b{flex:1; min-width:0}
.comment .c-top{display:flex; align-items:center; gap:7px; font-size:12px}
.comment .c-top b{font-weight:600}
.comment .c-txt{font-size:13.5px; color:var(--ink-2); margin-top:3px}
.comment .c-act{display:flex; gap:9px; font-size:11px; color:var(--ink-3); margin-top:5px}
.comment .c-act button:hover{color:var(--accent-ink)}
.cwrite{display:flex; gap:9px; align-items:flex-start; margin-top:16px}
.cwrite img{width:28px; height:28px; object-fit:contain; flex:none}
.cwrite .field{flex:1}
.loginwall{
  display:flex; align-items:center; gap:12px; margin-top:16px; padding:16px;
  border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--surface);
}
.loginwall img{width:38px; height:38px; object-fit:contain}
.loginwall div{flex:1; font-size:12.5px; color:var(--ink-2)}
.loginwall b{display:block; color:var(--ink); font-size:13px; font-weight:600}

/* ── 팀 구해요 ──────────────────────────────── */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  padding:14px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); margin-bottom:16px;
}
.filters .fg{display:flex; flex-direction:column; gap:4px}
.filters .fg .lbl{margin:0}
.filters select,.filters input{
  padding:7px 10px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--paper); font-size:12.5px; min-width:120px;
}
.partylist{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.party{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:15px 16px}
.party.done{opacity:.62}
.party-top{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.party-top img{width:30px; height:30px; object-fit:contain}
.party-top b{font-size:13px}
.party-top .pill{margin-left:auto}
.pmeta{display:grid; grid-template-columns:repeat(2,1fr); gap:7px 12px; font-size:12px}
.pmeta div{display:flex; justify-content:space-between; gap:8px; border-bottom:1px dotted var(--line); padding-bottom:4px}
.pmeta dt{color:var(--ink-3)}
.pmeta dd{margin:0; font-weight:500; font-family:"IBM Plex Mono",monospace; font-size:11.5px}
.pnote{font-size:12px; color:var(--ink-2); margin-top:10px}

/* ── 카드 바꿔요 ────────────────────────────── */
.tradeform{
  display:grid; grid-template-columns:170px 1fr 1fr auto; gap:12px; align-items:end;
  padding:16px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); margin-bottom:8px;
}
@media (max-width:820px){.tradeform{grid-template-columns:1fr 1fr}}
.cardchips{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px}
.cardchip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px 2px 3px;
  border-radius:999px; border:1px solid var(--line); background:var(--paper); font-size:11px;
}
.cardchip img{width:19px; height:19px; object-fit:contain}
.cardchip.miss{border-style:dashed; color:var(--stop); border-color:var(--stop)}
/* 내 등록 글 */
.mypost{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface); padding:13px 15px; margin-top:10px;
}
.mypost.done{border-color:var(--ok); background:var(--ok-soft)}
.mypost .lead{display:flex; align-items:center; gap:8px}
.mypost .lead b{font-size:13px}
.mypost .msg{flex:1 1 240px; font-size:12px; color:var(--ink-2); min-width:0}
.mypost .acts{display:flex; gap:6px; margin-left:auto}

/* 1:1 교환 조합 */
.pairbox{
  display:flex; flex-direction:column; gap:5px; flex:0 0 auto;
  border-left:1px dashed var(--line-strong); padding-left:14px; min-width:168px;
}
.pairbox .k{font-size:10.5px; color:var(--ink-3); letter-spacing:.04em}
.pair{display:flex; align-items:center; gap:5px; font-size:11.5px}
.pair img{width:19px; height:19px; object-fit:contain}
.pair .sw{color:var(--accent); font-weight:700}
.pair .me{color:var(--ink-2)}
.pairmore{font-size:10.5px; color:var(--ink-3)}
@media (max-width:820px){.pairbox{border-left:0; padding-left:0; border-top:1px dashed var(--line-strong); padding-top:9px; flex:1 1 100%}}

.matchhead{display:flex; align-items:center; gap:10px; margin:20px 0 10px}
.matchhead h3{font-size:14px}
.trade{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; background:var(--paper);
}
.trade + .trade{margin-top:9px}
.trade.hit{border-color:var(--accent); background:var(--accent-soft)}
.trade .who{display:flex; align-items:center; gap:8px; min-width:150px}
.trade .who img{width:28px; height:28px; object-fit:contain}
.trade .who b{font-size:12.5px; display:block}
.trade .set{flex:1 1 190px; min-width:0}
.trade .set .k{font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; margin-bottom:4px}
.trade .rank{margin-left:auto; text-align:right}

/* ── 공략표 ─────────────────────────────────── */
.stratmeta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px}
.stagechip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  background:var(--surface-2); font-size:11.5px; font-weight:600; color:var(--ink-2);
}
.stagechip.dojo{background:var(--accent-soft); color:var(--accent-ink)}
.shots{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0}
.shot{
  width:132px; height:132px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.shot img{width:78%; height:78%; object-fit:contain}
/* 글에 붙은 화면 캡쳐를 크게 보여 주는 자리 (가이드 상세) */
.shots.big{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin:14px 0 16px;
}
.shots.big .shot{
  width:auto; height:auto; padding:8px; cursor:zoom-in;
  background:var(--surface-2);
}
.shots.big .shot img{width:100%; height:auto; max-height:620px; object-fit:contain}
.shots.big .shot:hover{border-color:var(--accent)}

.shot.add{border-style:dashed; color:var(--ink-3); font-size:20px; cursor:pointer}
.shot.add:hover{border-color:var(--accent); color:var(--accent)}
.shotwrap{position:relative}
.shotdel{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line-strong); font-size:10px; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
}
.shotdel:hover{border-color:var(--stop); color:var(--stop)}
.pickrow{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
.pickrow .fg{display:flex; flex-direction:column; gap:4px}
.pickrow select{
  padding:9px 10px; border-radius:9px; border:1px solid var(--line-strong);
  background:var(--paper); font-size:13px; min-width:110px;
}
.pickrow select:disabled{background:var(--surface-2); color:var(--ink-3); cursor:not-allowed}
.radios{display:flex; gap:6px; flex-wrap:wrap}
.radiopill{
  padding:7px 13px; border-radius:999px; border:1px solid var(--line-strong);
  font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--paper);
}
.radiopill[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.radiopill:hover{border-color:var(--accent)}
.locked{font-size:11px; color:var(--ink-3)}

/* ── 타타 · 카드 도감 ───────────────────────── */
.evorow{display:flex; gap:10px; flex-wrap:wrap}
.evocell{
  display:flex; flex-direction:column; align-items:center; gap:3px; width:86px;
}
.evobox{
  width:86px; height:86px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.evobox.none{border-style:dashed; color:var(--ink-3); font-size:10.5px; text-align:center; line-height:1.3}
.evobox img{width:76%; height:76%; object-fit:contain}
.evocell b{font-size:11px; font-weight:600}
.evocell span{font-size:10px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}

.proplist{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.prop{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:12px 14px;
}
.prop.done{background:var(--ok-soft); border-color:var(--ok)}
.prop.bad{background:var(--stop-soft); border-color:var(--stop)}
.propimg{
  width:58px; height:58px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; font-size:10px; color:var(--ink-3); flex:none; overflow:hidden;
}
.propimg img{width:100%; height:100%; object-fit:cover}
.propimg button{font-size:9.5px; color:var(--accent-ink); text-decoration:underline}
/* 이름 제안은 그림 대신 제안한 이름을 보여 줍니다 */
.propimg.propname{
  background:var(--accent-soft); border-color:var(--accent);
  padding:6px; text-align:center; line-height:1.3;
}
.propimg.propname b{font-size:12.5px; color:var(--accent-ink); word-break:keep-all}
.prop .pb{flex:1 1 240px; min-width:0}
.prop .pb b{display:block; font-size:13px}
.prop .pb span{font-size:11.5px; color:var(--ink-3)}
.prop .pacts{display:flex; gap:5px; align-items:center; margin-left:auto; flex-wrap:wrap}

.cardgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:9px; margin-top:14px;
  align-items:start;
}
.cardcell{display:grid; grid-template-rows:auto auto; justify-items:center; align-content:start; gap:3px}
.cardbox{
  width:100%; aspect-ratio:1; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cardbox.none{border-style:dashed; color:var(--ink-3); font-size:16px; line-height:1}
.cardbox img{width:76%; height:76%; object-fit:contain}
.cardcell span{font-size:10px; color:var(--ink-2); font-family:"IBM Plex Mono",monospace}
.cardcell.on .cardbox{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.progress{height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-top:6px}
.progress i{display:block; height:100%; background:var(--accent)}

.reqrow{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:12px 14px;
}
.reqrow + .reqrow{margin-top:8px}
.reqrow.off{opacity:.6}
.swap{display:flex; align-items:center; gap:7px}
.swap .sw{color:var(--accent); font-weight:700; font-size:14px}

/* ── 광고 슬롯 ──────────────────────────────── */
.adslot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:1px dashed var(--accent); border-radius:10px; background:var(--accent-soft);
  color:var(--accent-ink); text-align:center; padding:14px 12px; margin:16px 0;
}
.adslot b{font-size:12px; font-weight:600}
.adslot span{font-size:10.5px; opacity:.8; font-family:"IBM Plex Mono",monospace}
.adslot.side{margin:0; min-height:320px; padding:18px 10px}
.withside{display:grid; grid-template-columns:1fr 172px; gap:20px; align-items:start}
@media (max-width:900px){.withside{grid-template-columns:1fr}.adslot.side{display:none}}

/* ── 소유 계정 편집 ─────────────────────────── */
.ownerbar{
  display:flex; align-items:center; gap:9px; padding:9px 12px; margin-bottom:12px;
  border:1px dashed var(--line-strong); border-radius:9px; background:var(--surface);
  font-size:11.5px; color:var(--ink-3);
}
.ownerbar b{color:var(--ink-2); font-weight:600}
.ownerbar .spacer{flex:1}

/* ── 토스트 ─────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(8px);
  background:var(--bar); color:var(--bar-ink); padding:11px 18px; border-radius:10px;
  font-size:13px; box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100;
  max-width:min(420px,86vw); text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ── 푸터 ───────────────────────────────────── */
.sitefoot{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  padding:26px 26px 20px;
  display:grid; grid-template-columns:auto 1fr; gap:8px 28px; align-items:center;
}
.foot-brand{display:flex; gap:11px; align-items:center; grid-row:1 / span 2}
.foot-brand img{width:40px; height:40px; object-fit:contain; flex:none}
.foot-brand b{
  display:block; font-family:"Jua",sans-serif; font-weight:400;
  font-size:18px; color:var(--accent-ink); letter-spacing:.01em; line-height:1.2;
}
.foot-brand p{font-size:11.5px; color:var(--ink-3); margin-top:3px}
.foot-links{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-self:end}
.foot-links button{
  font-size:12px; font-weight:500; color:var(--ink-2);
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.foot-links button:hover{color:var(--accent-ink); border-bottom-color:var(--accent)}
.foot-notice{
  grid-column:2; justify-self:end; text-align:right;
  font-size:11px; color:var(--ink-3); line-height:1.7; max-width:70ch;
}
.foot-notice b{color:var(--ink-2); font-weight:600}
.foot-copy{
  grid-column:1 / -1; padding-top:13px; margin-top:5px; border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3);
}

.foot-thanks{
  grid-column:1 / -1; margin-top:-4px;
  font-size:11px; color:var(--ink-3);
}
.foot-thanks b{color:var(--accent-ink); font-weight:600}

/* ══════════════════════════════════════════════
   모바일 (≤ 720px)
   ══════════════════════════════════════════════ */
@media (max-width:720px), (max-device-width:820px){
  body{font-size:15px}

  /* 프로토타입 바 : 칩을 한 줄 가로 스크롤로 */
  .pbar-in{padding:8px 12px; gap:8px 10px}
  .pbar-brand{font-size:11px; flex:1 1 100%}
  .pbar-brand b{font-size:12px}
  .chips{
    flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; gap:5px;
    padding-bottom:3px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none; padding:5px 10px; font-size:12px}
  .authbox{flex:1 1 100%; justify-content:flex-end; font-size:11px; gap:7px}

  /* 제품 셸 */
  .stage{padding:0 0 40px}
  .app{border-radius:0; border-left:0; border-right:0; box-shadow:none}
  .gnb{
    height:auto; min-height:52px; padding:0 12px; gap:2px;
    overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
  }
  .gnb::-webkit-scrollbar{display:none}
  .logo{margin-right:8px; flex:none}
  .logo img{width:26px; height:26px}
  .logo span{font-size:17px}
  .gnb nav{flex:none}
  .gnb-link{padding:7px 9px; font-size:13.5px; white-space:nowrap}
  .gnb-right{position:sticky; right:0; background:var(--paper); padding-left:8px; flex:none}
  .gnb-user .uid{display:none}

  .screen{padding:18px 14px 32px; min-height:auto}
  .sc-head{gap:8px; margin-bottom:14px}
  .sc-head h2{font-size:21px}
  .sc-head p{flex:1 1 100%; font-size:12.5px}

  /* 표 : 카드형으로 전환 (가로 스크롤 없이 읽히도록) */
  .tablewrap{overflow:visible; border:0; border-radius:0}
  .tablewrap table{display:block; width:100%; min-width:0}
  .tablewrap thead{display:none}
  .tablewrap tbody{display:flex; flex-direction:column; gap:8px}
  .tablewrap tbody tr{
    display:block; background:var(--paper);
    border:1px solid var(--line); border-radius:11px; padding:11px 13px;
  }
  .tablewrap tbody tr:hover{background:var(--paper)}
  .tablewrap tbody tr.blank{display:none}
  .tablewrap td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    border:0; padding:4px 0; text-align:right; font-size:13px;
  }
  .tablewrap td::before{
    content:attr(data-label); flex:none; text-align:left;
    font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.01em;
  }
  .tablewrap td:not([data-label])::before{content:none}
  .tablewrap td.num,.tablewrap td.ctr{text-align:right}
  /* 제목 줄은 카드 헤드처럼 크게 */
  .tablewrap td.headline{
    display:block; text-align:left; font-size:15px; font-weight:600;
    padding:2px 0 8px; margin-bottom:4px; border-bottom:1px solid var(--line);
  }
  .tablewrap td.headline::before{content:none}
  .tablewrap td.headline .rowlink{font-weight:600}

  /* 필터·폼 : 1열 */
  .filters{padding:12px; gap:9px}
  .filters .fg{flex:1 1 100%}
  .filters select,.filters input{width:100%; min-width:0}
  .pickrow{gap:9px}
  .pickrow .fg{flex:1 1 100%}
  .pickrow select,.pickrow .field{width:100% !important}
  .locked{flex:1 1 100%}
  .tradeform{grid-template-columns:1fr; gap:10px}
  .tradeform button{width:100%}
  .inline-btn{flex-wrap:wrap}
  .inline-btn .field{flex:1 1 100%}

  /* 카드형 블록 : 세로 스택 */
  .trade{gap:10px}
  .trade .who{min-width:0; flex:1 1 100%}
  .trade .set{flex:1 1 100%}
  .trade .rank{margin-left:0; text-align:left; flex:1 1 100%}
  .pairbox{flex:1 1 100%; border-left:0; padding-left:0;
    border-top:1px dashed var(--line-strong); padding-top:9px}
  .prop{gap:10px}
  .prop .pb{flex:1 1 100%}
  .prop .pacts{margin-left:0; flex:1 1 100%}
  .reqrow{gap:9px}
  .reqrow > div{flex:1 1 100% !important}
  .swap{flex:1 1 100%}
  .mypost .acts{margin-left:0; flex:1 1 100%}
  .party{padding:13px}
  .partylist{grid-template-columns:1fr}

  /* 티어표 : 등급 라벨을 위로 */
  .tierboard{padding:8px}
  .tierrow{flex-direction:column; gap:5px}
  .tiergrade{
    flex:none; flex-direction:row; justify-content:flex-start; gap:8px;
    width:100%; padding:6px 10px;
  }
  .tiergrade b{font-size:15px}
  .tiergrade span{font-size:10.5px}
  .tierslot{min-height:52px; padding:6px}
  .tata{width:52px}
  .tata img{width:34px; height:34px}
  .tata .noimg{width:34px; height:34px; font-size:12px}
  .tata .nm{font-size:9.5px}

  /* 진화 · 첨부 이미지 */
  .evorow{gap:8px}
  .evocell{width:72px}
  .evobox{width:72px; height:72px}
  .shot{width:96px; height:96px}
  .shots.big{grid-template-columns:1fr; gap:10px}
  .shots.big .shot{width:auto; height:auto}
  .shots.big .shot img{max-height:none}
  .cardgrid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:7px}

  /* 상세 · 본문 */
  .article .body{font-size:14px}
  .article h3{font-size:19px}
  .nocomment{padding:13px; gap:10px}
  .nocomment img{width:36px; height:36px}
  .loginwall{flex-wrap:wrap}
  .loginwall div{flex:1 1 100%}
  .hero{padding:20px 16px}
  .hero h2{font-size:24px}
  .cols2{gap:14px}
  .quicks{gap:9px}

  /* 로그인 · 회원가입 */
  .authwrap{padding:14px 0}
  .authcard{padding:24px 18px 20px}

  /* 도감 레이어 : 거의 전체 화면 */
  #dexLayer{padding:12px}
  .dexcard{width:100%; max-height:92vh}
  .dexhead{padding:13px 14px}
  .dexbody{padding:12px 12px 16px}

  /* 광고 */
  .adslot{padding:12px 10px; margin:13px 0}
  .adslot.side{display:none}

  /* 푸터 */
  .sitefoot{grid-template-columns:1fr; gap:14px; padding:22px 14px 18px; text-align:left}
  .foot-brand{grid-row:auto}
  .foot-links{justify-self:start; gap:14px}
  .foot-notice{grid-column:1; justify-self:start; text-align:left; font-size:11.5px}
  .foot-copy{grid-column:1}

  .toast{bottom:16px; font-size:12.5px; padding:10px 14px}
}

/* 아주 좁은 화면 (≤ 400px) */
@media (max-width:400px), (max-device-width:420px){
  .quicks{grid-template-columns:1fr}
  .tata{width:46px}
  .evocell,.evobox{width:64px}
  .evobox{height:64px}
  .shot{width:84px; height:84px}
  .sc-head h2{font-size:19px}
}


/* 티어 단계 배지 · 터치 드래그 */
.tata{position:relative}
.tata .tno{position:absolute; top:3px; right:3px; font-family:"IBM Plex Mono",monospace;
  font-size:9px; line-height:1; padding:2px 3px; border-radius:4px;
  background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line)}
.tata.picked .tno,.tata.hl .tno{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent)}
.tata.dragghost{position:fixed; z-index:999; margin:0; transform:translate(-50%,-50%);
  pointer-events:none; opacity:.92; box-shadow:0 10px 24px rgba(0,0,0,.22)}
.tierboard.editing .tata{touch-action:none}
.tierboard.editing .tierslot{min-height:56px}


/* 소유 계정 · 초대 코드 */
.invitebox{
  border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent-ink);
  border-radius:10px; padding:11px 13px; font-size:12.5px; line-height:1.55; margin-top:9px;
}
.invitebox b{display:block; margin-bottom:2px; font-weight:600}
.ownerentry{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--accent); border-radius:var(--radius);
  background:var(--accent-soft); padding:11px 14px; margin-bottom:13px;
}
.ownerentry b{font-size:13px; color:var(--accent-ink)}
.ownerentry span{font-size:12px; color:var(--ink-2)}
.tablewrap tr.off{opacity:.55}


/* GNB 내 계정 → 내 활동 */
button.gnb-user{cursor:pointer; border:1px solid transparent; background:none;
  border-radius:99px; padding:3px 9px 3px 4px; font:inherit}
button.gnb-user:hover{border-color:var(--line); background:var(--surface-2)}


/* ── 좁은 화면 방어 : 미디어쿼리가 안 먹는 브라우저에서도 줄바꿈으로 깨지지 않게 ── */
.gnb{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.gnb::-webkit-scrollbar{display:none}
.gnb > nav{flex:none; display:flex; flex-wrap:nowrap; gap:2px}
.logo{flex:none}
.logo span{white-space:nowrap}
.gnb-link{flex:none; white-space:nowrap}
.gnb-right{flex:none; white-space:nowrap}
.gnb-user b,.gnb-user .uid{white-space:nowrap}
.pbar-brand{white-space:nowrap}
.sc-head h2{white-space:nowrap}
.btn{white-space:nowrap}


@media (max-width:720px), (max-device-width:820px){
  /* GNB 우측 고정 영역이 메뉴 위를 덮을 때 경계가 보이도록 */
  .gnb-right{padding-left:10px; box-shadow:-10px 0 10px -8px rgba(0,0,0,.16)}
  .gnb-user img{display:none}
  button.gnb-user{padding:3px 8px}
}


/* ── 모바일 GNB : 계정을 윗줄로 빼고 메뉴는 아랫줄 전체를 써서 가로 스크롤 ── */
@media (max-width:720px), (max-device-width:820px){
  .gnb{
    flex-wrap:wrap; overflow:visible; height:auto; min-height:0;
    padding:7px 12px 0; gap:0 8px; align-items:center;
  }
  .logo{order:1; margin-right:auto}
  .gnb-right{
    order:2; position:static; margin-left:0; padding-left:0;
    background:none; box-shadow:none;
  }
  .gnb-user img{display:inline-block; width:22px; height:22px}
  .gnb > nav{
    order:3; flex:1 1 100%; width:100%; margin-top:7px;
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:2px;
    border-top:1px solid var(--line); padding:4px 0 3px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .gnb > nav::-webkit-scrollbar{display:none}
  .gnb-link{padding:7px 10px}
}


/* ── 화면별 사용 안내 ───────────────────────── */
.howto{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--surface); border-radius:10px; margin:-4px 0 18px;
}
.howto > summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  padding:10px 14px; font-size:12.5px; color:var(--ink-2);
}
.howto > summary::-webkit-details-marker{display:none}
.howto > summary::after{
  content:"▾"; margin-left:auto; font-size:11px; color:var(--ink-3);
  transition:transform .15s;
}
.howto[open] > summary::after{transform:rotate(180deg)}
.howto > summary b{font-size:12.5px; font-weight:600; color:var(--accent-ink)}
.howto > summary span{font-size:11px; color:var(--ink-3)}
.howto ol{
  margin:0; padding:0 16px 13px 34px; display:flex; flex-direction:column; gap:5px;
  font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
.howto li::marker{color:var(--accent); font-weight:600}

/* ── 질의응답 답변 ──────────────────────────── */
.answers{display:flex; flex-direction:column; gap:10px}
.answer{
  display:flex; gap:10px; padding:12px 13px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
}
.answer.best{border-color:var(--ok); background:var(--ok-soft)}
.answer .a-b{flex:1; min-width:0}
.answer .a-top{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12px}
.answer .a-top b{font-weight:600}
.answer .a-txt{font-size:13.5px; color:var(--ink-2); margin-top:5px; line-height:1.7; white-space:pre-wrap}
.answer .a-act{display:flex; gap:10px; font-size:11.5px; color:var(--ink-3); margin-top:7px; flex-wrap:wrap}
.answer .a-act button{color:var(--ink-3)}
.answer .a-act button:hover{color:var(--accent-ink); text-decoration:underline}
.awrite{display:flex; gap:9px; align-items:flex-start; margin-top:14px; flex-wrap:wrap}
.awrite .field{flex:1 1 260px}
.awrite .btn{flex:none}

/* ── 도감 캡쳐 화면 ─────────────────────────── */
.dexpage{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:16px}
.dexpage-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px}
.dexpage-head b{font-size:19px; color:var(--accent-ink)}
.dexpage-head .hint{display:block}
.dexshot{display:block; max-width:392px; width:100%; margin:0 auto; border-radius:12px; border:1px solid var(--line)}
.dexnone{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:38px 16px; text-align:center; border:1px dashed var(--line-strong); border-radius:12px;
}
.dexnone img{width:86px; height:86px; object-fit:contain}
.dexnone .noimg.big{width:86px; height:86px; border-radius:50%; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--ink-3)}
.dexnone b{font-size:14px}
.dexnone span{font-size:12.5px; color:var(--ink-2)}

@media (max-width:720px), (max-device-width:820px){
  .howto{margin:-2px 0 14px}
  .howto ol{padding-left:30px}
  .answer{padding:11px}
  .awrite .btn{width:100%}
  .dexpage{padding:12px}
}


/* ── 모바일 광고 ────────────────────────────── */
.adfix{display:none}

@media (max-width:720px), (max-device-width:820px){
  /* ③ 사이드 고정 광고 → 모바일에서는 본문 아래 가로 배너로 */
  .adslot.side{
    display:flex; min-height:0; margin:16px 0 0; padding:14px 12px;
  }
  .adslot.side span{white-space:normal}
  .withside{gap:0}

  /* ④ 하단 고정(앵커) 배너 */
  .adfix{
    display:flex; align-items:center; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--paper); border-top:1px solid var(--accent);
    box-shadow:0 -6px 18px -12px rgba(0,0,0,.35);
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .adfix-in{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; min-height:50px; border:1px dashed var(--accent); border-radius:8px;
    background:var(--accent-soft); color:var(--accent-ink); text-align:center;
  }
  .adfix-in b{font-size:11.5px; font-weight:600}
  .adfix-in span{font-size:10px; opacity:.85; font-family:"IBM Plex Mono",monospace}
  .adfix-x{
    flex:none; width:26px; height:26px; border-radius:50%;
    border:1px solid var(--line-strong); color:var(--ink-3); font-size:11px;
  }
  /* 하단 배너에 가리지 않게 */
  .stage{padding-bottom:104px}
  .toast{bottom:88px}
}


/* 질의응답 첨부 이미지 (답변은 조금 작게) */
.shots.sm .shot{width:92px; height:92px}
@media (max-width:720px), (max-device-width:820px){ .shots.sm .shot{width:76px; height:76px} }


/* 티어 편집 : 패치 기준일 */
.patchfield{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2)}
.patchfield input[type="date"]{
  padding:4px 8px; border-radius:7px; border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink); font-size:12px;
  font-family:"IBM Plex Mono",monospace;
}
.patchfield input[type="date"]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
@media (max-width:720px), (max-device-width:820px){
  .patchfield{flex:1 1 100%; justify-content:space-between}
  .patchfield input[type="date"]{flex:1; max-width:160px}
}


/* 신규 타타 등록 대기 : 선택 */
.prop.sel{border-color:var(--accent); background:var(--accent-soft)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}


/* ══════════════════════════════════════════════
   서버 렌더 전환에 따른 최소 보정
   프로토타입은 화면 이동을 button 으로 했지만
   실제 사이트는 a 태그를 씁니다. 색 · 간격 · 폰트는 그대로 두고
   a 가 button 과 같은 상자로 보이게만 맞춥니다.
   ══════════════════════════════════════════════ */
a{text-decoration:none}
a.logo,a.gnb-link,a.btn,a.tab,a.chip,a.quick,a.feed,a.more,a.acitem,a.tata,a.cardcell,a.radiopill{
  text-decoration:none; cursor:pointer;
}
a.btn{display:inline-flex; align-items:center; justify-content:center; gap:5px}
a.btn.btn-block{display:flex; width:100%}
a.gnb-link{display:inline-flex; align-items:center}
a.tab{display:inline-flex; align-items:center}
a.rowlink,.foot-links a{text-decoration:none}
.foot-links a{
  font-size:12px; font-weight:500; color:var(--ink-2);
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.foot-links a:hover{color:var(--accent-ink); border-bottom-color:var(--accent)}
.blk-head .more{margin-left:auto; font-size:11.5px; color:var(--ink-3)}

/* 페이저 : 프로토타입의 button 규칙을 a 에도 같은 값으로 */
.pager a{
  display:flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; border-radius:8px; font-size:12.5px;
  border:1px solid var(--line); color:var(--ink-2);
}
.pager a[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.pager a:hover{background:var(--surface-2)}

/* 폼 : 서버 렌더에서 쓰는 최소 상자 */
form.inlineform{display:contents}
.formrow{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.formrow .row{gap:8px}
.f-half{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px), (max-device-width:820px){.f-half{grid-template-columns:1fr}}
textarea.field{min-height:220px; resize:vertical; line-height:1.7; font-family:inherit}
.charcount{font-size:11px; color:var(--ink-3); text-align:right; margin-top:4px}
.filelist{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.sc-head .spacer{flex:1}

/* 도감 레이어 : 프로토타입의 #dexLayer 규칙을 클래스로 옮긴 것.
   값은 그대로이고, 한 화면에 여러 개를 둘 수 있게만 바꿨습니다. */
[hidden]{display:none !important}
.dexlayer{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
@media (max-width:720px), (max-device-width:820px){
  .dexlayer{padding:12px}
}

/* 목록 표 안의 광고행.
   모바일에서 표가 카드형으로 바뀌어도 광고는 계속 보여야 합니다. */
.tablewrap tbody tr.adrow{background:none}
@media (max-width:720px), (max-device-width:820px){
  .tablewrap tbody tr.adrow{border:0; padding:0; background:none}
  .tablewrap tbody tr.adrow td{display:block; padding:0}
  .tablewrap tbody tr.adrow td::before{content:none}
}