/* =========================================================
   OWL GUARD 아울가드 · 서브 페이지
   ========================================================= */

/* ---------- 서브 비주얼 ---------- */
.subvis{position:relative;height:340px;overflow:hidden;background:#000;isolation:isolate}
.subvis-bg{position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;background-size:cover;background-position:right 12%;transform-origin:right center;animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.06) translateX(-1%)}}
.subvis::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,6,7,.96) 0%,rgba(2,6,7,.62) 34%,transparent 58%),linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.subvis::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),var(--silver),var(--teal),transparent);background-size:200%;animation:silverMove 4s linear infinite}
.subvis-in{position:absolute;left:32px;bottom:38px;right:32px}
.crumb{font-size:12px;color:var(--mute);margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:#fff}
.crumb i{font-style:normal;color:var(--teal)}
.subvis .eb{font-family:'Russo One',sans-serif;font-size:13px;letter-spacing:.26em;color:var(--silver)}
.subvis h1{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:52px;line-height:1.1;margin:4px 0 6px;
  background:linear-gradient(180deg,#fff 0%,#c9fbf4 45%,#18d6c0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #02302b) drop-shadow(0 0 18px rgba(24,214,192,.45))}
.subvis p.desc{color:#d2dfe0;font-size:15px;max-width:640px}
.bg-rooms{background-image:url(../images/sub-rooms.jpg)}
.bg-write{background-image:url(../images/sub-write.jpg)}
.bg-guide{background-image:url(../images/sub-guide.jpg)}
.bg-qna{background-image:url(../images/sub-qna.jpg)}
.bg-help{background-image:url(../images/sub-help.jpg)}
.bg-notice{background-image:url(../images/sub-notice.jpg)}
.bg-my{background-image:url(../images/sub-my.jpg)}

/* ---------- 레이아웃 도우미 ---------- */
.page{padding:28px 32px 0;display:flex;flex-direction:column;gap:22px}
.row{display:grid;gap:18px}
.r2{grid-template-columns:1fr 1fr}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.r-side{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;position:relative;overflow:hidden;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2,.panel-h h3{font-size:17px;font-weight:900;display:flex;align-items:center;gap:8px}
.panel-h h2 .ic,.panel-h h3 .ic{color:var(--teal);text-shadow:0 0 8px var(--teal)}
.panel-h .more{font-size:12.5px;color:var(--mute)}
.panel-h .more:hover{color:#fff}
.panel-b{padding:20px}
.panel.hl::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--silver),var(--teal))}
.muted{color:var(--mute)}
.num{font-family:'Russo One',sans-serif}
.note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:rgba(24,214,192,.07);border:1px solid rgba(24,214,192,.3);font-size:13.5px;color:#d6e3e3}
.note::before{content:"!";flex:none;width:20px;height:20px;border-radius:50%;background:var(--teal);color:var(--ink);display:grid;place-items:center;font-weight:900;font-size:12px;margin-top:1px}
.note b{color:#fff}
.note.silver{background:rgba(219,228,230,.05);border-color:rgba(219,228,230,.32)}
.note.silver::before{background:var(--silver)}

/* 스탯 타일 */
.stat{padding:18px 20px;border-radius:14px;background:linear-gradient(160deg,#0f2628,#0a1517);border:1px solid #17302f;position:relative;overflow:hidden;min-width:0}
.stat span{font-size:12.5px;color:var(--mute)}
.stat b{display:block;font-family:'Russo One',sans-serif;font-weight:400;font-size:28px;margin-top:4px;text-shadow:0 0 14px rgba(24,214,192,.3)}
.stat b small{font-size:13px;color:var(--mute);margin-left:4px;font-family:'Noto Sans KR';text-shadow:none}

/* 세그먼트 탭 */
.seg{display:inline-flex;background:#071012;border:1px solid var(--line);border-radius:10px;padding:4px;gap:2px;flex-wrap:wrap}
.seg button{min-height:34px;padding:0 14px;border-radius:7px;font-size:13.5px;color:var(--mute);font-weight:500;transition:.2s}
.seg button:hover{color:#fff}
.seg button.on{background:linear-gradient(180deg,#3fe9d5,#12b3a0);color:var(--ink);font-weight:700;box-shadow:0 4px 14px rgba(24,214,192,.3)}

/* 테이블 */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:12.5px;font-weight:500;color:var(--mute);text-align:left;padding:12px 16px;background:#081113;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(24,214,192,.05)}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl a:hover{color:var(--teal-l)}
.tbl-wrap{overflow-x:auto}

/* 배지 */
.bd{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:5px;font-size:11.5px;font-weight:700;white-space:nowrap}
.bd-teal{background:rgba(24,214,192,.14);color:var(--teal-l);border:1px solid rgba(24,214,192,.4)}
.bd-silver{background:rgba(219,228,230,.09);color:var(--silver);border:1px solid rgba(219,228,230,.36)}
.bd-gray{background:#111c1e;color:var(--mute);border:1px solid #223437}
.bd-solid{background:var(--teal);color:var(--ink)}

/* 페이지네이션 */
.pager{display:flex;justify-content:center;gap:6px;padding:20px;flex-wrap:wrap}
.pager a{min-width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);font-size:13px;color:var(--mute)}
.pager a:hover{border-color:var(--teal);color:#fff}
.pager a.on{background:var(--teal);border-color:var(--teal);color:var(--ink);font-weight:700;box-shadow:var(--glow)}

/* 폼 */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label,.fld .lb{font-size:13px;color:#cfdcdd;font-weight:500}
.fld label em,.fld .lb em{font-style:normal;color:var(--teal);margin-left:2px}
.inp,.sel,.txa{
  width:100%;height:48px;padding:0 16px;border-radius:10px;background:#071113;border:1px solid #20383b;color:#fff;font:inherit;font-size:15px;outline:none;transition:.2s
}
.sel option{background:#0c1517;color:#fff}
.txa{height:auto;min-height:150px;padding:14px 16px;resize:vertical;line-height:1.7}
.inp:focus,.sel:focus,.txa:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(24,214,192,.16),0 0 18px rgba(24,214,192,.18)}
.inp::placeholder,.txa::placeholder{color:#5c7477}
.inp.err,.sel.err,.txa.err{border-color:var(--silver);box-shadow:0 0 0 3px rgba(219,228,230,.14)}
.chk{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#cfdcdd;cursor:pointer;line-height:1.5}
.chk input{flex:none;width:18px;height:18px;accent-color:var(--teal);margin-top:1px}
.btn-block{width:100%;height:52px;font-size:16px}
.help{font-size:12px;color:var(--mute)}
.help.err{color:#fff;font-weight:700}
.help.err::before{content:"● ";color:var(--silver)}
.help.ok{color:var(--teal-l)}
.pii{padding:10px 14px;border-radius:10px;background:rgba(219,228,230,.08);border:1px dashed rgba(219,228,230,.5);font-size:13px;color:#fff}
.pii[hidden]{display:none}

/* 아코디언 */
.acc{border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:0}
.acc-q{width:100%;display:flex;align-items:center;gap:12px;padding:16px 20px;text-align:left;font-size:15px;font-weight:500}
.acc-q::after{content:"＋";margin-left:auto;color:var(--mute);transition:.3s}
.acc.open .acc-q::after{transform:rotate(45deg);color:var(--teal)}
.acc-a{display:none;padding:0 20px 18px;color:#c3d2d4;font-size:14px;line-height:1.75}
.acc.open .acc-a{display:block;animation:fadeD .3s}
@keyframes fadeD{from{opacity:0;transform:translateY(-6px)}}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:300;padding:14px 22px;border-radius:12px;background:#0b1e20;border:1px solid var(--teal);box-shadow:var(--glow);font-size:14px;font-weight:500;animation:toastIn .3s;max-width:calc(100vw - 32px)}
.toast.out{opacity:0;transition:opacity .4s}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}}

/* 빈 상태 */
.empty{padding:44px 20px;text-align:center;color:var(--mute);font-size:14px}
.empty[hidden]{display:none}
.empty b{display:block;color:var(--txt);font-size:16px;margin-bottom:4px}

/* =========================================================
   토론방 목록
   ========================================================= */
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.room{display:flex;gap:14px;align-items:flex-start;padding:18px;text-align:left;border-radius:14px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);transition:.2s;min-width:0}
.room:hover{border-color:rgba(24,214,192,.5);transform:translateY(-2px)}
.room.on{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal),0 0 20px rgba(24,214,192,.16)}
.room-ic{flex:none;width:46px;height:40px;border-radius:50% 50% 50% 8px;display:grid;place-items:center;background:rgba(24,214,192,.12);border:1px solid rgba(24,214,192,.45);color:var(--teal-l);font-weight:900;font-size:15px}
.room.on .room-ic{background:var(--teal);color:var(--ink)}
.room-tx{min-width:0;display:block}
.room-tx b{display:block;font-size:15.5px;font-weight:900;line-height:1.35}
.room-tx small{display:block;font-size:12.5px;color:var(--mute);margin:3px 0 6px;line-height:1.45}
.room-tx i{font-style:normal;font-size:12px;color:var(--teal-l)}
.list-bar{display:flex;gap:10px 14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.list-bar .lb-count{font-size:13.5px;color:var(--mute)}
.list-bar .lb-count b{color:#fff;font-family:'Russo One',sans-serif;font-weight:400}
.search{position:relative;flex:1 1 220px;max-width:340px;min-width:0}
.search .inp{height:40px;padding-left:38px;font-size:14px}
.search::before{content:"";position:absolute;left:14px;top:13px;width:11px;height:11px;border:2px solid var(--mute);border-radius:50%}
.search::after{content:"";position:absolute;left:25px;top:24px;width:6px;height:2px;background:var(--mute);transform:rotate(45deg)}
.post-list>li{border-bottom:1px solid var(--line2)}
.post-list>li:last-child{border-bottom:0}
.post-list>li[hidden]{display:none}
.post-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:16px 20px;transition:background .2s}
.post-item>div,.qna-item>div{min-width:0}
.post-item:hover{background:rgba(24,214,192,.05)}
.pi-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.pi-title{display:block;font-size:15.5px;font-weight:700;line-height:1.4}
.pi-ex{display:block;font-size:13px;color:#9db0b2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-meta{display:block;font-size:12px;color:var(--mute);margin-top:6px}
.pi-num{display:flex;gap:14px;text-align:center}
.pi-num span{display:flex;flex-direction:column;font-size:11px;color:var(--mute);min-width:40px}
.pi-num b{font-family:'Russo One',sans-serif;font-weight:400;font-size:16px;color:#fff}
.pi-num .hl b{color:var(--teal)}

/* =========================================================
   글 상세
   ========================================================= */
.view-h{padding:24px 26px 18px;border-bottom:1px solid var(--line)}
.view-h .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.view-h h2{font-size:25px;font-weight:900;line-height:1.35}
.view-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--mute)}
.view-meta .ava{width:30px;height:30px;font-size:12px}
.view-meta b{color:#fff}
.ava{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;background:#132528;border:1px solid #274245;color:var(--silver)}
.ava.pro{background:var(--teal);color:var(--ink);border-color:var(--teal)}
.stage{padding:16px 26px;border-bottom:1px solid var(--line);background:rgba(24,214,192,.035)}
.stage>p{font-size:12.5px;color:var(--mute);margin-bottom:10px}
.stage-track{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.stage-track li{position:relative;padding-top:12px;font-size:12px;color:var(--dim);line-height:1.35}
.stage-track li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:3px;background:#17292c}
.stage-track li.done{color:var(--silver)}
.stage-track li.done::before{background:var(--teal2)}
.stage-track li.now{color:#fff;font-weight:700}
.stage-track li.now::before{background:var(--teal);box-shadow:0 0 10px var(--teal)}
.view-b{padding:24px 26px;font-size:15.5px;line-height:1.9;color:#dfe9e9}
.view-b p+p{margin-top:14px}
.view-b .alias{padding:0 5px;border-radius:4px;background:rgba(219,228,230,.12);color:#fff;font-size:.94em}
.view-b .mask{padding:0 6px;border-radius:4px;background:#26393c;color:var(--silver);font-size:.86em}
.view-ask{margin:0 26px 22px;padding:14px 16px;border-left:3px solid var(--teal);background:rgba(24,214,192,.06);border-radius:0 10px 10px 0;font-size:14.5px;color:#e3eeee}
.view-ask b{display:block;font-size:12px;color:var(--teal-l);margin-bottom:3px}
.react{display:flex;gap:8px;flex-wrap:wrap;padding:0 26px 22px}
.react button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:30px;border:1px solid #274245;background:#0a1517;font-size:13.5px;transition:.2s}
.react button b{font-family:'Russo One',sans-serif;font-weight:400;font-size:13px;color:var(--teal-l)}
.react button:hover{border-color:var(--teal)}
.react button.on{background:rgba(24,214,192,.18);border-color:var(--teal);box-shadow:0 0 14px rgba(24,214,192,.2)}
.view-foot{display:flex;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:14px 26px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.view-foot a{color:var(--silver)}
.view-foot a:hover{color:#fff}
.cmt{display:flex;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line2)}
.cmt:last-child{border-bottom:0}
.cmt.reply{padding-left:64px;background:rgba(255,255,255,.012)}
.cmt.pro{background:linear-gradient(90deg,rgba(24,214,192,.09),transparent 70%)}
.cmt-b{min-width:0;flex:1}
.cmt-who{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;font-weight:700}
.cmt-who time{font-weight:400;font-size:12px;color:var(--mute)}
.cmt-b p{font-size:14.5px;color:#d5e1e1;margin:4px 0 6px;line-height:1.7}
.cmt-b .mask{padding:0 6px;border-radius:4px;background:#26393c;color:var(--silver);font-size:.86em}
.cmt-act{display:flex;gap:12px;font-size:12px;color:var(--mute)}
.cmt-act button{font-size:12px;color:var(--mute);min-height:24px}
.cmt-act button:hover{color:#fff}
.cmt-act button.on{color:var(--teal-l);font-weight:700}
.cmt-write{padding:18px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:rgba(0,0,0,.18)}
.cmt-write .txa{min-height:96px}
.cmt-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.anon-toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.anon-toggle input{position:absolute;opacity:0;width:0;height:0}
.anon-toggle .sw{flex:none;position:relative;width:40px;height:22px;border-radius:11px;background:#1c3235;transition:.2s}
.anon-toggle .sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--silver);transition:.2s}
.anon-toggle input:checked+.sw{background:var(--teal)}
.anon-toggle input:checked+.sw::after{left:21px;background:#fff}
.anon-toggle input:focus-visible+.sw{outline:2px solid var(--teal);outline-offset:2px}
.anon-toggle small{color:var(--mute);font-size:12px}

.rule-list li{position:relative;padding:0 0 10px 18px;font-size:13.5px;color:#cbd9da;line-height:1.55}
.rule-list li:last-child{padding-bottom:0}
.rule-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.rule-list li b{color:#fff}
.mini-link{display:flex;flex-direction:column;gap:2px;padding:12px 20px;border-bottom:1px solid var(--line2);font-size:14px;font-weight:500;transition:background .2s}
.mini-link:last-child{border-bottom:0}
.mini-link:hover{background:rgba(24,214,192,.06)}
.mini-link small{font-size:12px;color:var(--mute);font-weight:400}
.side-call{display:flex;align-items:center;gap:14px;padding:18px 20px}
.side-call p{font-size:13px;color:#c5d3d5;line-height:1.5}
.side-call p b{display:block;color:#fff;font-size:15px}

/* =========================================================
   글쓰기
   ========================================================= */
.form-b{padding:22px;display:flex;flex-direction:column;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alias-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.alias-bar button{min-height:30px;padding:0 10px;border-radius:6px;border:1px solid #274245;background:#0a1517;font-size:12.5px;color:var(--silver)}
.alias-bar button:hover{border-color:var(--teal);color:#fff}
.txa-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.confirm{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.confirm .chk{padding:12px 14px;border-bottom:1px solid var(--line2)}
.confirm .chk:last-child{border-bottom:0}
.form-btn{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.preview-card{padding:16px 20px}
.preview-card .pi-title{word-break:break-word}
.done-panel{padding:44px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.done-panel[hidden]{display:none}
.done-panel img{width:112px;border-radius:50%;filter:drop-shadow(0 0 22px rgba(24,214,192,.45))}
.done-panel h2{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:30px}
.done-panel p{color:#c6d4d6;font-size:14.5px;max-width:480px}
.done-panel .btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* =========================================================
   회복 단계 가이드
   ========================================================= */
.step-nav{position:sticky;top:calc(var(--top) + 8px);z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;border-radius:14px;background:rgba(7,16,18,.92);backdrop-filter:blur(10px);border:1px solid var(--line)}
.step-nav a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:700;transition:.2s;min-width:0}
.step-nav a i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:'Russo One',sans-serif;font-size:12px;background:#17292c;color:var(--silver)}
.step-nav a:hover{background:rgba(24,214,192,.1)}
.step-nav a.on{background:rgba(24,214,192,.16)}
.step-nav a.on i{background:var(--teal);color:var(--ink)}
.step-block{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);scroll-margin-top:calc(var(--top) + 76px)}
.step-block:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.step-block:nth-of-type(even) .step-img{order:2}
.step-img{position:relative;min-height:320px;background:#000}
.step-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.step-img em{position:absolute;left:18px;top:12px;font-style:normal;font-family:'Russo One',sans-serif;font-size:64px;line-height:1;color:#fff;text-shadow:var(--glow)}
.step-tx{padding:24px 26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.step-tx small{font-family:'Russo One',sans-serif;font-size:12px;letter-spacing:.2em;color:var(--teal)}
.step-tx h2{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:30px;line-height:1.2}
.step-tx>p{font-size:14.5px;color:#c9d7d8}
.do-list{display:flex;flex-direction:column;gap:8px}
.do-list .chk{padding:10px 12px;border-radius:10px;background:#091416;border:1px solid var(--line2);transition:.2s}
.do-list .chk:hover{border-color:rgba(24,214,192,.4)}
.do-list .chk:has(input:checked){border-color:rgba(24,214,192,.5);background:rgba(24,214,192,.07);color:#fff}
.dont{padding:12px 14px;border-radius:10px;border:1px dashed rgba(219,228,230,.4);font-size:13.5px;color:#d2dfe0;background:rgba(219,228,230,.04)}
.dont b{color:#fff}
.step-cta{display:flex;gap:8px;flex-wrap:wrap}
.chk-count{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mute);flex-wrap:wrap}
.chk-count b{font-family:'Russo One',sans-serif;font-weight:400;color:#fff;font-size:16px}
.chk-bar{height:6px;border-radius:6px;background:#17292c;overflow:hidden;flex:1 1 120px;min-width:80px}
.chk-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal2),var(--teal));box-shadow:0 0 8px var(--teal);transition:width .4s}
.scam-compare .tbl td:first-child{font-weight:700}
.scam-compare .tbl td:last-child{color:#c7d6d7}

/* =========================================================
   전문가 Q&A
   ========================================================= */
.pro-card{display:flex;gap:14px;padding:18px;min-width:0}
.pro-card .ava{width:52px;height:52px;font-size:17px}
.pro-card b{display:block;font-size:15.5px}
.pro-card small{display:block;font-size:12px;color:var(--teal-l);margin:1px 0 5px}
.pro-card p{font-size:13px;color:#b9c9cb;line-height:1.55}
.qna-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px 20px;transition:background .2s}
.qna-item:hover{background:rgba(24,214,192,.05)}
.qna-q{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-family:'Russo One',sans-serif;font-size:17px;color:var(--teal);background:rgba(24,214,192,.1);border:1px solid rgba(24,214,192,.34)}
.q-card{padding:24px 26px}
.q-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.q-card h2{font-size:23px;font-weight:900;line-height:1.4}
.q-card p{font-size:15px;color:#d4e0e0;line-height:1.85;margin-top:12px}
.q-card .q-meta{font-size:12.5px;color:var(--mute);margin-top:12px}
.a-card{padding:22px 26px;border-top:1px solid var(--line)}
.a-card:first-of-type{border-top:0}
.a-who{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.a-who .ava{width:46px;height:46px;font-size:15px}
.a-who b{display:block;font-size:15.5px}
.a-who small{font-size:12px;color:var(--mute)}
.a-b{font-size:15px;line-height:1.85;color:#dbe6e6}
.a-b p+p,.a-b ol+p,.a-b p+ol{margin-top:10px}
.a-b ol{counter-reset:a}
.a-b ol li{counter-increment:a;position:relative;padding:0 0 8px 30px}
.a-b ol li::before{content:counter(a);position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(24,214,192,.16);color:var(--teal-l);font-family:'Russo One',sans-serif;font-size:11.5px}
.a-note{margin-top:14px;padding:10px 14px;border-radius:10px;background:rgba(219,228,230,.06);border:1px solid rgba(219,228,230,.26);font-size:12.5px;color:#d0dcdd}
.a-note b{color:#fff}
.a-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--mute)}

/* =========================================================
   도움 기관 안내
   ========================================================= */
.gamble-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 26px;align-items:center;padding:24px 28px;border-radius:18px;background:linear-gradient(120deg,rgba(24,214,192,.26),rgba(24,214,192,.04) 70%),var(--panel);border:2px solid var(--teal);box-shadow:0 0 30px rgba(24,214,192,.22);scroll-margin-top:calc(var(--top) + 16px)}
.gamble-hero .gh-n{font-family:'Russo One',sans-serif;font-size:64px;line-height:1;color:#fff;text-shadow:var(--glow)}
.gamble-hero h2{font-size:21px;font-weight:900;margin-bottom:4px}
.gamble-hero p{font-size:14px;color:#d6e3e3}
.gamble-hero .btns{display:flex;gap:8px;flex-wrap:wrap}
.sit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 20px}
.sit-grid button{min-height:48px;padding:8px 14px;border-radius:10px;border:1px solid #223b3e;background:#091416;font-size:14px;font-weight:500;text-align:left;transition:.2s}
.sit-grid button:hover{border-color:var(--teal)}
.sit-grid button.on{background:var(--teal);border-color:var(--teal);color:var(--ink);font-weight:700}
.sit-hint{padding:0 20px 16px;font-size:13.5px;color:var(--teal-l)}
.sit-hint:empty{display:none}
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.org{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:14px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);transition:.25s;min-width:0}
.org.dim{opacity:.34}
.org.pick{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal),0 0 22px rgba(24,214,192,.2)}
.org-n{font-family:'Russo One',sans-serif;font-size:32px;line-height:1.1;color:var(--teal)}
.org-n.tx{font-size:26px}
.org h3{font-size:15.5px;font-weight:900;line-height:1.4}
.org p{font-size:13.5px;color:#bccccd;flex:1}
.org .btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.org .btns .btn{height:36px;padding:0 14px;font-size:13px}

/* =========================================================
   공지
   ========================================================= */
.nt-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;align-items:start}
.nt-list button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;width:100%;padding:14px 18px;text-align:left;border-bottom:1px solid var(--line2);transition:background .2s}
.nt-list li:last-child button{border-bottom:0}
.nt-list button:hover{background:rgba(24,214,192,.05)}
.nt-list button.on{background:rgba(24,214,192,.12);box-shadow:inset 3px 0 0 var(--teal)}
.nt-list b{font-size:14.5px;font-weight:700;line-height:1.4}
.nt-list time{grid-column:2;font-size:12px;color:var(--mute)}
.nt-view article{padding:24px 26px}
.nt-view article[hidden]{display:none}
.nt-view h2{font-size:21px;font-weight:900;line-height:1.4;margin:8px 0 4px}
.nt-view time{font-size:12.5px;color:var(--mute)}
.nt-view .nt-b{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.85;color:#d6e2e2}
.nt-view .nt-b p+p,.nt-view .nt-b ul+p,.nt-view .nt-b p+ul{margin-top:10px}

/* =========================================================
   마이페이지
   ========================================================= */
.profile{display:flex;align-items:center;gap:18px;padding:22px 24px;flex-wrap:wrap}
.profile img{width:76px;height:76px;border-radius:50%;filter:drop-shadow(0 0 14px rgba(24,214,192,.45))}
.profile-tx{flex:1 1 200px;min-width:0}
.profile-tx b{font-size:21px;font-weight:900}
.profile-tx p{font-size:13.5px;color:var(--mute)}
.check-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.check-col{padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.check-col:last-child{border-right:0}
.check-col h3{font-size:14.5px;font-weight:900;display:flex;align-items:center;gap:6px}
.check-col h3 i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:'Russo One',sans-serif;font-size:11px;background:var(--teal);color:var(--ink)}
.check-col .chk{font-size:13px;padding:7px 0;border-top:1px solid var(--line2)}
.mood{display:flex;gap:6px;flex-wrap:wrap}
.mood button{flex:1 1 72px;min-height:40px;padding:0 10px;border-radius:8px;border:1px solid #223b3e;background:#091416;font-size:13.5px}
.mood button:hover{border-color:var(--teal)}
.mood button.on{background:rgba(24,214,192,.18);border-color:var(--teal);color:#fff;font-weight:700}

/* =========================================================
   로그인 / 회원가입 (단독 화면)
   ========================================================= */
.is-auth .side{transform:translateX(-100%);transition:transform .35s}
.is-auth .side.open{transform:none}
.is-auth .side-x{display:block}
.is-auth .side-dim{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.3s;display:block}
.is-auth .side-dim.open{opacity:1;pointer-events:auto}
.auth{min-height:100vh;display:grid;grid-template-columns:1.25fr 1fr;background:#000}
.auth-menu{position:fixed;left:16px;top:16px;z-index:20;display:flex;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:0 11px;border-radius:10px;background:rgba(5,11,12,.72);border:1px solid var(--line);backdrop-filter:blur(8px)}
.auth-menu i{display:block;height:2px;background:#fff;border-radius:2px}
.auth-vis{position:relative;overflow:hidden;isolation:isolate;min-height:280px}
.auth-vis img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:-2}
.auth-vis::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.3),transparent 40%,rgba(5,10,11,.92)),linear-gradient(0deg,rgba(0,0,0,.88),transparent 48%)}
.auth-vis .hero-fx{z-index:0}
.auth-copy{position:absolute;left:48px;bottom:48px;right:24%;z-index:2}
.auth-copy .hero-title{font-size:clamp(44px,5.6vw,88px);margin:0 0 12px}
.auth-copy p{color:#dbe6e6;font-size:17px}
.auth-copy p b{color:var(--teal-l)}
.auth-box{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(20px,5vw,80px);background:radial-gradient(600px 400px at 100% 0,rgba(24,214,192,.14),transparent 60%),var(--bg);position:relative;min-width:0}
.auth-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--teal),transparent)}
.auth-in{width:100%;max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.auth-brand img{width:60px;border-radius:50%;filter:drop-shadow(0 0 12px rgba(24,214,192,.5))}
.auth-in h1,.auth-in h2{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:34px;line-height:1.2}
.auth-in h1 em,.auth-in h2 em{font-style:normal;color:var(--teal);text-shadow:0 0 16px rgba(24,214,192,.5)}
.auth-in .sub{color:var(--mute);font-size:14px;margin-top:-8px}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.auth-links{display:flex;justify-content:center;gap:16px;font-size:13px;color:var(--mute);flex-wrap:wrap}
.auth-links a:hover{color:#fff}
.auth-foot{font-size:12px;color:#7f9598;padding-top:14px;border-top:1px solid var(--line);line-height:1.6}
.auth-foot a{color:var(--silver);font-weight:700}
.stepper{display:flex;gap:6px}
.stepper div{flex:1;text-align:center;font-size:12px;color:#5f777a;padding-top:10px;border-top:3px solid #17292c;transition:.3s}
.stepper div.on{color:#fff;border-top-color:var(--teal);box-shadow:0 -6px 14px -8px var(--teal)}
.stepper div.done{color:var(--mute);border-top-color:var(--teal-dk)}
.jstep{display:flex;flex-direction:column;gap:16px}
.jstep[hidden]{display:none}
.agree{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.agree .chk{padding:12px 14px;border-bottom:1px solid var(--line2)}
.agree .chk:last-child{border-bottom:0}
.agree .chk.all{background:#0b1a1c;font-weight:700;color:#fff}
.done-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.done-box img{width:120px;border-radius:50%;filter:drop-shadow(0 0 22px rgba(24,214,192,.45))}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:1280px){
  .r4{grid-template-columns:repeat(2,1fr)}
  .room-grid,.org-grid,.sit-grid{grid-template-columns:repeat(2,1fr)}
  .r-side{grid-template-columns:minmax(0,1fr) 300px}
  .check-grid{grid-template-columns:repeat(2,1fr)}
  .check-col:nth-child(2){border-right:0}
  .check-col:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .step-block{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .step-block:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
}
@media (max-width:1024px){
  .r-side{grid-template-columns:1fr}
  .r3{grid-template-columns:1fr}
  .nt-wrap{grid-template-columns:1fr}
  .gamble-hero{grid-template-columns:auto minmax(0,1fr)}
  .gamble-hero .btns{grid-column:1/-1}
  .auth{grid-template-columns:1fr}
  .auth-vis{height:300px;min-height:0}
  .auth-copy{left:24px;right:24px;bottom:22px}
  .auth-box{padding:30px 20px 44px}
  .auth-box::before{display:none}
}
@media (max-width:720px){
  .subvis{height:280px}
  .subvis-bg{background-position:72% 12%}
  .subvis::before{background:linear-gradient(0deg,rgba(2,6,7,.96) 0%,rgba(2,6,7,.68) 56%,rgba(2,6,7,.1) 100%)}
  .subvis-in{left:16px;right:16px;bottom:22px}
  .subvis h1{font-size:34px}
  .subvis p.desc{font-size:13.5px}
  .page{padding:20px 16px 0;gap:16px}
  .r2,.r4,.room-grid,.org-grid,.sit-grid,.f2{grid-template-columns:1fr}
  .stat b{font-size:24px}
  .r4.keep2{grid-template-columns:1fr 1fr}
  .list-bar{padding:12px 14px}
  .search{max-width:none;flex-basis:100%}
  .post-item{grid-template-columns:minmax(0,1fr);padding:14px}
  .pi-num{justify-content:flex-start;text-align:left}
  .pi-num span{flex-direction:row;gap:4px;align-items:baseline;min-width:0}
  .pi-num b{font-size:14px}
  .view-h,.view-b,.stage,.q-card,.a-card{padding-left:16px;padding-right:16px}
  .view-h h2{font-size:21px}
  .view-ask{margin:0 16px 18px}
  .react{padding:0 16px 18px}
  .react button{flex:1 1 auto;justify-content:center}
  .view-foot{padding:14px 16px}
  .cmt{padding:14px}
  .cmt.reply{padding-left:30px}
  .cmt .ava{width:32px;height:32px;font-size:11px}
  .cmt-write{padding:14px}
  .form-b{padding:16px}
  .form-btn .btn{flex:1}
  .step-nav{grid-template-columns:1fr 1fr;position:static}
  .step-nav a{font-size:13px;padding:8px}
  .step-block,.step-block:nth-of-type(even){grid-template-columns:1fr}
  .step-block:nth-of-type(even) .step-img{order:0}
  .step-img{min-height:190px}
  .step-tx{padding:18px 16px}
  .step-tx h2{font-size:25px}
  .qna-item{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .qna-item .pi-num{grid-column:2}
  .gamble-hero{grid-template-columns:1fr;padding:20px 18px}
  .gamble-hero .gh-n{font-size:52px}
  .gamble-hero .btns .btn{flex:1}
  .sit-grid{padding:14px}
  .sit-hint{padding:0 14px 14px}
  .nt-view article{padding:18px 16px}
  .check-grid{grid-template-columns:1fr}
  .check-col{border-right:0;border-bottom:1px solid var(--line)}
  .check-col:last-child{border-bottom:0}
  .profile{padding:18px 16px}
  .profile .btn{flex:1}
  .auth-vis{height:240px}
  .auth-copy .hero-title{font-size:clamp(34px,11vw,50px)}
  .auth-copy .hero-title span{display:inline;margin-right:.2em}
  .auth-copy p{font-size:14px}
  .auth-in h1,.auth-in h2{font-size:28px}
}