/* TMI뉴스 모바일 화면 (화면 폭 700px 이하에서만 적용, style.css 뒤에 불러옴)
   목표: 얇은 머리글 · 한 줄 말줄임 제목 + 작은 메타줄 · 옆에서 나오는 메뉴 · 넓은 본문 */

html{-webkit-text-size-adjust:100%}
body{font-size:15px;line-height:1.5;padding-bottom:88px;background:var(--paper)}
.wrap{padding:0}
input,select,textarea{font-size:16px !important}

/* ---------- 머리글 ---------- */
.ticker,.mast,.tabs{display:none}
.mhead{display:flex;position:sticky;top:0;z-index:30;height:50px;align-items:center;padding:0 6px 0 14px;background:var(--card);border-bottom:2px solid var(--acc)}
.mlogo{font-weight:700;font-size:21px;letter-spacing:-1px;line-height:1;display:flex;align-items:center}
.mlogo span{background:var(--acc);color:var(--acc-ink);padding:2px 6px;margin-right:3px;border-radius:4px}
.mhead .mr{margin-left:auto;display:flex;align-items:center}
.mic{position:relative;display:grid;place-items:center;width:42px;height:44px;background:none;border:0;color:var(--ink)}
.mic .ic{width:23px;height:23px}
.mic .badge{position:absolute;top:4px;right:2px;min-width:17px;height:17px;line-height:17px;font-size:10px;padding:0 4px}
.mlogin{font-weight:650;font-size:14px;padding:10px 8px;color:var(--acc)}
.msearch{display:none;gap:8px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:50px;z-index:29}
.msearch.open{display:flex}
.msearch input{flex:1;min-width:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:9px 12px;border-radius:4px}
.msearch .btn{min-height:40px;padding:0 16px}

/* ---------- 떠 있는 버튼 + 옆 메뉴 ---------- */
.mfab{display:grid;place-items:center;position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));z-index:25;width:54px;height:54px;border-radius:50%;border:0;box-shadow:0 3px 12px rgba(0,0,0,.28)}
.mfab{left:16px;background:var(--ink);color:var(--paper)}
.mfab .ic{width:25px;height:25px}
.mscrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;display:none}
.mdrawer{display:block;position:fixed;top:0;bottom:0;left:0;width:84%;max-width:320px;z-index:50;background:var(--card);color:var(--ink);overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(-105%);transition:transform .22s ease;padding-bottom:40px;box-shadow:4px 0 18px rgba(0,0,0,.25)}
body.mopen{overflow:hidden}
body.mopen .mscrim{display:block}
body.mopen .mdrawer{transform:none}
.mdrawer .dhead{padding:20px 16px 16px;background:var(--hover);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.mdrawer .dhead b{font-size:17px}
.mdrawer .dbtns{display:flex;gap:8px;margin-top:6px}
.mdrawer .dbtns .btn{flex:1;text-align:center;min-height:42px;line-height:26px}
.mdrawer .dsec{padding:14px 16px 5px;font-size:12px;font-weight:650;color:var(--sub);letter-spacing:.03em}
.mdrawer>a{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-size:16px}
.mdrawer>a.on{color:var(--acc);font-weight:650;background:var(--hover);box-shadow:inset 4px 0 0 var(--acc)}
.mdrawer .dlogout{padding:14px 16px}
.mdrawer .dlogout button{width:100%;min-height:42px;border:1px solid var(--line);background:none;color:var(--ink);border-radius:4px;font-weight:600}
.mdrawer .dfoot{padding:18px 16px;font-size:12px;color:var(--sub);line-height:1.9}
.mdrawer .dtitle{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:8px 12px 8px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.mdrawer .dclose{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font-size:26px;line-height:1}
.mdrawer .dhead{padding:14px 16px}
.mdrawer .dprofile{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.dprofile>span{font-size:12px;white-space:nowrap;color:var(--acc)}
.mdrawer .dsec{font-size:12px;padding:16px 16px 8px;display:flex;align-items:center;gap:6px}
.dsec>span{font-size:11px;font-weight:500}
.mdrawer .dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 12px 8px}
.mdrawer .dgrid>a{display:flex;align-items:center;gap:6px;min-height:44px;padding:9px 11px;background:var(--paper);border:1px solid var(--line);border-radius:5px;font-size:14px;overflow-wrap:anywhere}
.mdrawer .dgrid>a.on,.mdrawer .dclubs>a.on{background:var(--hover);color:var(--acc);border-color:var(--acc);font-weight:700}
.mdrawer .dclublist{margin:8px 12px 0;border:1px solid var(--line);border-radius:5px}
.mdrawer .dclublist>summary{min-height:44px;padding:12px;font-size:13px;font-weight:600;cursor:pointer;overflow-wrap:anywhere}
.dclublist>summary>span{font-size:11px;color:var(--sub);font-weight:500;margin-left:4px}
.mdrawer .dclublist .dclubs{border-top:1px solid var(--line);border-bottom:0}
.mdrawer .dclublist .dclubs>a.dclub{display:flex;align-items:center;min-height:44px;padding:9px 10px;font-size:13px;white-space:normal;overflow-wrap:anywhere}
.mdrawer .dclublist .dclubs>a.dclub::before{content:none}
.mdrawer .dclose:focus-visible,.mdrawer a:focus-visible,.mdrawer summary:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

/* ---------- 전체 틀: 좌우 여백 없는 꽉 찬 화면 ---------- */
.page{display:block;margin:0 0 20px}
.page>aside{margin-top:8px}
.panel{border-left:0;border-right:0;border-radius:0}
body:not(.is-home) .page>aside{display:none}
.is-home .side .uinfo{display:none}
.side{gap:8px}
.flash{margin:0;border-left:0;border-right:0;border-radius:0}
.narrow{margin:0;max-width:none}
footer{padding:18px 14px 30px;font-size:11.5px;border-top-width:1px}

/* ---------- 제목줄 ---------- */
.ph{padding:13px 14px;border-bottom:1px solid var(--line)}
.ph h2{font-size:18px}
.ph h2 em{background:none;color:var(--acc);padding:0;margin-right:6px}
.sub{padding:8px 14px;gap:6px}
.sub a{padding:5px 12px}
.sub .sp{font-size:12px}

/* ---------- 글 목록: 제목(한 줄) + 메타줄 ---------- */
.row{grid-template-columns:auto auto 1fr auto;grid-template-areas:"t t t t" "tm hit . w";gap:3px 0;padding:11px 14px 10px;align-items:center}
.row.th{display:none}
.row .no{display:none}
.row .t{grid-area:t;display:flex;align-items:baseline;min-width:0;white-space:nowrap;overflow:hidden;font-size:16px;line-height:1.45;word-break:normal}
.row .t .tt{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.row .t .c,.row .t .bst,.row .t .cm,.row .t .up{flex:none}
.row .t .c{margin-right:6px}
.row .t .cm{margin-left:6px;font-size:13px;color:var(--acc)}
.row .t .up{font-size:12px}
.row .time{grid-area:tm;display:block;text-align:left;font-size:12.5px;color:var(--sub)}
.row .hit{grid-area:hit;display:block;text-align:left;font-size:12.5px;color:var(--sub);margin-left:9px;padding-left:9px;border-left:1px solid var(--line)}
.row .hit::before{content:"조회 "}
.row .who{grid-area:w;justify-content:flex-end;text-align:right;font-size:12.5px;font-weight:600;color:var(--ink);max-width:48vw}
.row.notice{background:var(--hover)}
.row.notice .no{display:block;grid-area:tm;text-align:left;font-size:12px;font-weight:650;color:var(--acc)}
.row.notice .time{grid-area:hit;margin-left:9px;padding-left:9px;border-left:1px solid var(--line)}
.row.notice .hit{display:none}
.row.notice .t{font-weight:650}
.pager{padding:14px 6px;gap:3px;flex-wrap:wrap}
.pager a{min-width:36px;height:38px;line-height:36px}

/* ---------- 홈 ---------- */
.hmain{gap:8px}
.hnotice{border-left:0;border-right:0;border-radius:0;padding:11px 14px}
.hbox .ph{padding:11px 14px;border-bottom:1px solid var(--line)}
.hbox .ph h2{font-size:16px}
.nearby-posts .row{grid-template-areas:"state t t t" "tm hit . w";column-gap:6px}
.nearby-posts .row .nearby-label{display:block;grid-area:state;font-size:11px;text-align:left}
.nearby-posts .row .t{font-size:14px}
.nearby-posts .row .who{max-width:34vw}
.hgrid{gap:8px}
.hrow{display:block;padding:10px 14px 8px}
.hrow .ht{display:flex;align-items:baseline;font-size:15.5px;line-height:1.45;word-break:normal}
.hrow .ht .tt{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.hrow .ht .c,.hrow .ht .cm,.hrow .ht .up{flex:none}
.hrow .hm{max-width:none;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;margin-top:2px;font-size:12.5px}
.hrow .hm .nick{display:inline-flex !important;color:var(--ink);font-weight:600}
.hrow .hm i{text-align:left;min-width:0}
.tmi-today{padding:16px 14px}

/* ---------- 글 보기 ---------- */
article.panel .ph{padding:16px 14px 6px;border:0}
.ptitle{font-size:19px;line-height:1.5;font-weight:650;word-break:keep-all}
.pmeta{gap:4px 12px;padding:2px 14px 12px;font-size:12.5px;border-bottom:1px solid var(--line)}
.pbody{padding:18px 14px 22px;font-size:16px;line-height:1.85;min-height:120px}
.pbody.rich{line-height:1.85}
.pbody.rich img,.pimgs img{max-width:100%;height:auto}
.pimgs{padding:10px 0 0;gap:8px}
.pimgs img{border:0;border-radius:0;width:100%}
.pact{flex-wrap:wrap;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.pact .btn{min-height:42px;padding:0 16px}
#comments{margin-top:8px !important}
#comments .ph{padding:13px 14px}
.cmt{padding:13px 14px}
.cmt.reply{margin-left:0;padding-left:26px}
.cmeta{flex-wrap:wrap;gap:3px 10px;font-size:12.5px;align-items:center;margin-bottom:5px}
.cbody{font-size:15.5px;line-height:1.65}
.rform summary{font-size:13px;padding:6px 0;color:var(--acc);font-weight:600}
.cform{flex-direction:column;align-items:stretch;padding:12px 14px}
.cform textarea{flex:none;width:100%;min-height:92px}
.cform .btn{width:100%;min-height:44px}
.cform.sm{padding:8px 0 0}

/* ---------- 글쓰기·폼 ---------- */
.form .fbody{padding:14px}
.wideform{max-width:none}
.btn{min-height:40px}
.mini{min-height:34px}

/* ---------- 다듬기 ---------- */
.pact .sp{display:none}
.pact .btn,.pact form .btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1 1 auto;min-height:42px;padding:0 14px}
.pact form.inline{flex:1 1 auto;display:flex}
.pact form.inline .btn{width:100%}
.pbody{min-height:70px}
footer{padding-bottom:92px}
.onboard .row .t .c{display:none}
.ph .btn{min-height:36px;padding:0 14px}

.btn,a.btn{display:inline-flex;align-items:center;justify-content:center}

/* ---------- 소모임 ---------- */
.mdrawer>a.dclub{padding-left:28px;font-size:15.5px;justify-content:flex-start}
.mdrawer>a.dclub::before{content:"·";margin-right:8px;color:var(--acc);font-weight:700}
.mdrawer>a.dall{font-size:14px;color:var(--acc);font-weight:600}
.mdrawer .dnone{display:block;padding:12px 28px;color:var(--sub);font-size:14px;border-bottom:1px solid var(--line)}
.club{padding:14px}
.clubhead{padding:10px 14px}

/* ---------- 나의 포인트 · 게임 ---------- */
.is-home .side .uinfo{display:none}
.betrow{grid-template-columns:repeat(5,1fr)}
.chip span{padding:10px 0}
.ball{width:38px;height:38px;font-size:15px}

/* ---------- 모바일 로그아웃: 옆 메뉴 맨 위 오른쪽 + 아래쪽에도 ---------- */
.mdrawer .dhead{position:relative}
.mdrawer .dtoplogout{position:absolute;top:16px;right:14px}
.mdrawer .dtoplogout button{min-height:34px;padding:0 14px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:4px;font-weight:600;font-size:13.5px}

/* ---------- 페이지 이동 · 검색 ---------- */
.pager{gap:5px;padding:14px 10px}
.pager .pn{height:40px;line-height:38px;min-width:38px}
.pager .pn.first,.pager .pn.last{display:none}
.pager .pn.prev,.pager .pn.next{padding:0 14px;font-weight:600}
.msearch{gap:6px}
.snipline{padding:0 14px 9px;margin-top:-4px}

.bsearch{padding:12px 14px 14px}
.bscope .sc span{padding:8px 15px;font-size:14px}
.bq input{padding:11px 12px}
.bq .btn{min-height:44px}
.tier{font-size:10px;padding:0 5px;margin-left:4px}

.ytembed{margin:12px -14px;max-width:none}
.ytbox{border-radius:0}
.ytlink{margin-left:14px}
.ytplay .ytico{width:64px;height:46px}

.mutebar{margin:0;border-left:0;border-right:0;border-radius:0;font-size:13px;padding:9px 14px}

/* 머리글에서 바로 로그아웃 (로그인했을 때만 표시) */
.mlogout{margin:0 4px 0 2px}
.mlogout button{min-height:34px;padding:0 10px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:4px;font-weight:600;font-size:12.5px;white-space:nowrap}

.imgv{padding:0}
.imgv img{border-radius:0}
.pbody.rich img,.pimgs img{cursor:zoom-in}

/* 모바일 로고: 같은 굵은 TMI 상자 */
.mlogo{font-size:23px;letter-spacing:0}
.mlogo span{padding:1px 7px 2px;margin-right:4px;border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.22)}

.dmnew{padding:10px 12px}
.dmnew input{padding:11px 12px}
.dmnew .btn{min-height:44px}

.otpacts{flex-direction:column}
.otpacts .btn{width:100%;min-height:44px}
.otpin{font-size:22px;min-height:48px}

/* 머리글에 로그인한 닉네임을 계속 표시 (어느 화면에서든 어떤 계정인지 보이게) */
.mnick{flex:1 1 0;min-width:0;margin:0 4px 0 8px;font-size:13px;font-weight:600;line-height:1.2;overflow:hidden;white-space:nowrap}
.mnick .nick{max-width:100%}
.mnick .tier{display:none}
.mhead .mr{margin-left:auto;flex:0 0 auto}   /* 로그인 전(닉네임 없음)에도 로그인·검색을 오른쪽 끝으로 */
.mhead .mic{width:38px}
.mhead{padding-right:4px}
.mhead .mic{width:34px}
.mhead .mic .badge{right:0}
.mhead .mlogout{margin:0 2px 0 0}
.mhead .mlogout button{padding:0 8px;font-size:12px}
.mnick{margin:0 2px 0 6px}

/* 머리글 닉네임 칸: 윗줄 닉네임, 아랫줄 나의 포인트 (메인의 별도 둘째 줄을 없애고 모든 화면에서 보이게) */
.mnick{display:flex;flex-direction:column;justify-content:center;gap:1px}
.mnick .nick{font-size:13px;line-height:1.25}
.mnick .mnp{display:block;font-size:11px;font-weight:600;line-height:1.2;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnick .mnp b{color:var(--acc);font-size:12px;font-weight:700}
.mnick .mnp b.neg{color:var(--warn)}

/* 메인 글 줄 둘째 줄: 시간 · 조회 N (게시판 목록과 같은 모양), 닉네임은 오른쪽 */
.hrow .hm .hmt{display:flex;align-items:center;min-width:0}
.hrow .hm .hv{display:inline-block;font-style:normal;white-space:nowrap;margin-left:9px;padding-left:9px;border-left:1px solid var(--line)}

footer .betabtn{padding:11px 20px;font-size:14px;min-height:42px;box-sizing:border-box}

/* 댓글 이미지: 모바일은 한 줄에 크게, 빼기 버튼은 터치하기 쉽게 */
.cthumb{width:76px;height:76px}
.cthumb .cx{width:30px;height:30px;font-size:19px}
.cimgs img{max-width:100%;max-height:300px}
.ctools .mini{min-height:36px}
.cbody .ytembed{margin:10px 0}