/* ODD MAGAZINE 웹 — 왼쪽 레일 + 가운데 피드 (웹앱) */
:root{
  --bg:#FFFFFF; --bg2:#FAFAFA; --ink:#111214; --ink2:#4A4D52; --ink3:#8B8F96;
  --line:#E6E7E9; --soft:#F4F4F5; --accent:#E5372B; --on-accent:#FFFFFF;
  --dim:rgba(17,18,20,.5); --seg:rgba(17,18,20,.15);
  --serif:'Noto Serif KR',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard',
         'Malgun Gothic',system-ui,sans-serif;
  --col:470px;          /* 가운데 기둥 */
  --rail:72px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C0D0F; --bg2:#131417; --ink:#FFFFFF; --ink2:#B9BBC0; --ink3:#82868E;
    --line:#26282C; --soft:#17181B; --accent:#FF4E3D;
    --dim:rgba(255,255,255,.55); --seg:rgba(255,255,255,.22);
  }
}
:root[data-theme="dark"]{
  --bg:#0C0D0F; --bg2:#131417; --ink:#FFFFFF; --ink2:#B9BBC0; --ink3:#82868E;
  --line:#26282C; --soft:#17181B; --accent:#FF4E3D;
  --dim:rgba(255,255,255,.55); --seg:rgba(255,255,255,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
     line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}

/* ── 왼쪽 레일 ── */
.shell{display:flex;min-height:100vh}
.rail{width:var(--rail);flex:0 0 var(--rail);border-right:1px solid var(--line);
      position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
      padding:22px 0 18px;background:var(--bg);z-index:20}
.rmark{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:1px;
       text-align:center;margin-bottom:26px;line-height:1.1}
.rmark i{display:block;width:16px;height:2.5px;background:var(--accent);
         margin:6px auto 0;font-style:normal}
.rnav{display:flex;flex-direction:column;gap:2px;flex:1}
.ritem{display:flex;align-items:center;gap:14px;padding:12px;border-radius:6px;
       color:var(--ink2);font-size:14px;font-weight:600;white-space:nowrap;
       margin:0 8px;cursor:pointer;background:none;border:0;font-family:inherit;
       text-align:left}
.ritem:hover{background:var(--soft);color:var(--ink)}
.ritem[aria-current="page"]{color:var(--ink);font-weight:800}
.ritem:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ricon{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center}
.ricon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
           stroke-linecap:round;stroke-linejoin:round}
.ritem[aria-current="page"] .ricon svg{stroke-width:2.3}
.rtext{display:none}

@media (min-width:1300px){
  :root{--rail:238px}
  .rail{padding:26px 0 20px;align-items:stretch}
  .rmark{text-align:left;padding-left:20px;font-size:18px;letter-spacing:2px}
  .rmark i{margin-left:0}
  .rtext{display:inline}
}

/* ── 가운데 ── */
.main{flex:1;min-width:0}
.col{max-width:var(--col);margin:0 auto;padding:0 0 60px}
.topline{display:none}

/* ── 편 한 덩어리 (앱 Piece 순서) ── */
.piece{padding:16px 0 26px;border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;gap:10px;padding:0 4px 12px;height:44px}
.magtap{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;
    background:var(--soft);display:grid;place-items:center;
    font-family:var(--serif);font-size:11px;color:var(--ink3)}
.magname{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;
         text-overflow:ellipsis}
.fol{background:var(--accent);color:var(--on-accent);border-radius:999px;
     padding:5px 13px;font-size:10.5px;font-weight:800;flex:0 0 auto}

/* 카드 — 한 장씩 딱딱 넘어가야 한다 */
.frame{position:relative}
.strip{display:flex;overflow-x:auto;aspect-ratio:4/5;background:var(--soft);
       scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
       scrollbar-width:none;-ms-overflow-style:none;border-radius:4px}
.strip::-webkit-scrollbar{display:none}
.strip>*{flex:0 0 100%;width:100%;height:100%;
         scroll-snap-align:center;scroll-snap-stop:always}  /* 한 번에 한 장만 */
.strip img{width:100%;height:100%;object-fit:cover}

/* 카드 위에 얹는 화살표 — 마우스 쓰는 사람용 */
.jump{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;
      border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
      background:rgba(255,255,255,.92);color:#111214;
      box-shadow:0 1px 6px rgba(0,0,0,.22);opacity:0;transition:opacity .14s}
.jump.l{left:9px} .jump.r{right:9px}
.frame:hover .jump,.jump:focus-visible{opacity:1}
.jump[disabled]{display:none}
.jump svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
          stroke-linecap:round;stroke-linejoin:round}
@media (hover:none){.jump{display:none}}

.segs{display:flex;gap:3px;margin:12px 4px 0}
.seg{flex:1;height:2.5px;border-radius:2px;background:var(--seg);transition:background .12s}
.seg.on{background:var(--accent)}

.body{padding:0 4px;margin-top:16px}
.ttl{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.47;margin:0}
.cap{font-family:var(--serif);font-weight:400;font-size:14.5px;line-height:1.59;
     margin:9px 0 0;color:var(--ink);min-height:2.5em}
.meta{display:flex;align-items:center;gap:14px;margin-top:14px}
.meta .n{flex:1;font-size:11px;font-weight:700;color:var(--dim)}
.meta .pg{font-size:10.5px;font-weight:800;color:var(--dim);
          font-variant-numeric:tabular-nums}
.sumline{font-size:13.5px;color:var(--ink3);margin:14px 0 0}

/* 매거진 */
.mhead{padding:32px 4px 22px}
.mrow{display:flex;align-items:center;gap:15px}
.mrow .av{width:62px;height:62px;font-size:18px}
.mname{font-family:var(--serif);font-size:22px;margin:0}
.mdesc{font-size:13px;color:var(--ink3);margin:5px 0 0}
.mstat{font-size:11.5px;font-weight:700;color:var(--ink3);margin:16px 0 0;letter-spacing:.3px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding-bottom:20px}
.tile{aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.tile img{width:100%;height:100%;object-fit:cover}

/* 매거진 목록 */
.mlist{padding:8px 4px 30px;display:flex;flex-direction:column}
.mline{display:flex;align-items:center;gap:13px;padding:14px 0;
       border-bottom:1px solid var(--line)}
.mline:last-child{border-bottom:0}
.mline .av{width:46px;height:46px;font-size:14px}
.mline .t{flex:1;min-width:0}
.mline .t b{font-size:14px;display:block}
.mline .t span{font-size:12px;color:var(--ink3)}
.mline .c{font-size:11.5px;color:var(--ink3);font-weight:700}

.h1{font-family:var(--serif);font-size:24px;margin:34px 4px 0}
.getapp{padding:26px 4px 10px}
.getapp .in{border:1px solid var(--line);border-radius:3px;padding:18px;
            display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.getapp p{margin:0;flex:1;min-width:170px}
.getapp strong{display:block;font-size:14.5px}
.getapp span{font-size:12px;color:var(--ink3)}
.btn{background:var(--accent);color:var(--on-accent);font-size:13.5px;
     font-weight:800;padding:11px 20px;border-radius:3px;white-space:nowrap}

.doc{padding:38px 4px 30px}
.doc h1{font-family:var(--serif);font-size:25px;margin:0 0 8px}
.doc .when{font-size:12.5px;color:var(--ink3);margin:0 0 30px}
.doc pre{white-space:pre-wrap;font-family:var(--sans);font-size:14.5px;
         line-height:1.85;color:var(--ink2);margin:0}
.muted{color:var(--ink3);font-size:14px;padding:50px 4px;text-align:center}

/* 좁은 화면 — 레일이 아래로 내려간다 */
@media (max-width:640px){
  .shell{flex-direction:column}
  .rail{position:fixed;bottom:0;top:auto;left:0;right:0;width:100%;height:54px;
        flex-direction:row;border-right:0;border-top:1px solid var(--line);
        padding:0;align-items:center}
  .rmark{display:none}
  .rnav{flex-direction:row;justify-content:space-around;width:100%;gap:0}
  .ritem{margin:0;padding:10px 16px}
  .main{padding-bottom:54px}
  .topline{display:flex;align-items:center;justify-content:space-between;
           gap:14px;padding:0 16px;height:50px;border-bottom:1px solid var(--line);
           position:sticky;top:0;background:var(--bg);z-index:10}
  .topline .m{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:1.6px}
  .topline .t{font-size:10.5px;color:var(--ink3);text-align:right;line-height:1.35}
  .col{padding-left:12px;padding-right:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── 오른쪽 기둥 — 넓은 화면에서만 ── */
.side{display:none}
@media (min-width:1000px){
  .side{display:block;width:300px;flex:0 0 300px;padding:34px 26px 40px;
        position:sticky;top:0;height:100vh;overflow-y:auto}
  .sh{font-size:12px;font-weight:800;color:var(--ink3);margin:0 0 12px;letter-spacing:.3px}
  .sidemags{display:flex;flex-direction:column;gap:4px}
  .sline{display:flex;align-items:center;gap:11px;padding:7px 0}
  .sline .av{width:40px;height:40px;font-size:12px}
  .sline .t{flex:1;min-width:0}
  .sline .t b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;
              text-overflow:ellipsis}
  .sline .t span{font-size:11.5px;color:var(--ink3);white-space:nowrap;
                 overflow:hidden;text-overflow:ellipsis;display:block}
  .sfoot{font-size:11px;line-height:1.9;color:var(--ink3);margin:26px 0 0}
  .sfoot a{color:var(--ink3)}
  .sfoot a:hover{color:var(--ink2)}
  .sfoot span{display:inline-block;margin-top:6px}
}

/* ── 검색 ── */
.sbar{display:flex;align-items:center;gap:9px;border:1px solid var(--line);
      border-radius:3px;padding:11px 13px;margin:24px 4px 0}
.sbar svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:var(--ink3);
          stroke-width:1.8;stroke-linecap:round}
.sbar input{flex:1;border:0;background:none;font:inherit;font-size:14.5px;
            color:var(--ink);outline:none;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 4px 0}
.chip{font-size:12.5px;font-weight:600;color:var(--ink2);border:1px solid var(--line);
      border-radius:999px;padding:6px 13px;cursor:pointer;background:none;
      font-family:inherit}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);font-weight:800}
.hits{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:22px 0 30px}

/* ── 둘러보기: 이번 주 추천 매거진 (가로) ── */
.strip2{display:flex;gap:12px;overflow-x:auto;padding:14px 4px 4px;
        scroll-snap-type:x proximity;scrollbar-width:none}
.strip2::-webkit-scrollbar{display:none}
.pick{flex:0 0 150px;scroll-snap-align:start}
.pickimg{width:150px;aspect-ratio:4/5;border-radius:4px;overflow:hidden;
         background:var(--soft);position:relative}
.pickimg img{width:100%;height:100%;object-fit:cover}
.pickshade{position:absolute;inset:auto 0 0 0;height:60%;
           background:linear-gradient(to bottom,transparent,rgba(0,0,0,.72))}
.pickt{position:absolute;left:10px;right:10px;bottom:9px;color:#fff;
       font-family:var(--serif);font-weight:700;font-size:12.5px;line-height:1.42}
.pickmag{display:flex;align-items:center;gap:7px;margin-top:9px}
.pickmag .av{width:18px;height:18px;font-size:8px}
.pickmag b{font-size:11.5px;font-weight:800;color:var(--ink2);
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2{font-family:var(--serif);font-size:18px;margin:30px 4px 0;
    display:flex;align-items:center;gap:9px}
.h2::before{content:'';width:16px;height:2.5px;background:var(--accent)}

/* ── 구독 · 저장 ─────────────────────────────────────── */
.fol{background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;
     padding:6px 14px;font:inherit;font-size:10.5px;font-weight:800;flex:0 0 auto;
     cursor:pointer;line-height:1.5}
.fol.on{background:none;color:var(--ink3);border:1px solid var(--line)}
.fol:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bm{background:none;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
    width:22px;height:22px;color:var(--dim)}
.bm svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
        stroke-linejoin:round}
.bm.on{color:var(--accent)}
.bm.on svg{fill:currentColor}
.bm:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* 매거진 화면의 구독 */
.magfol{background:var(--accent);color:var(--on-accent);border:0;border-radius:3px;
        padding:11px 26px;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;
        margin:18px 4px 0}
.magfol.on{background:none;color:var(--ink);border:1px solid var(--line)}

/* ── 오른쪽 기둥의 계정 ─────────────────────────────── */
.acct{display:flex;align-items:center;gap:11px;padding-bottom:20px;margin-bottom:20px;
      border-bottom:1px solid var(--line)}
.acct .av{width:40px;height:40px;font-size:12px}
.acct .t{flex:1;min-width:0}
.acct .t b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;
           text-overflow:ellipsis}
.acct .t span{font-size:11.5px;color:var(--ink3);display:block;white-space:nowrap;
              overflow:hidden;text-overflow:ellipsis}
.alogin{background:var(--accent);color:var(--on-accent);border:0;border-radius:3px;
        padding:8px 15px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.mlink{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:800;
       color:var(--accent);cursor:pointer}

/* ── 서재 ────────────────────────────────────────────── */
.newrow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;
        color:var(--accent);margin:16px 4px 6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 7px}
.librow{display:flex;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line)}
.librow.seen{opacity:.5}
.libcover{width:86px;flex:0 0 86px;aspect-ratio:4/5;background:var(--soft);
          border-radius:3px;overflow:hidden}
.libcover img{width:100%;height:100%;object-fit:cover}
.libt{flex:1;min-width:0;padding-top:2px}
.libmag{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800}
.libt b{font-family:var(--serif);font-size:16px;line-height:1.5;display:block;margin-top:7px}
.libmeta{font-size:11.5px;color:var(--ink3);display:block;margin-top:7px}
.empty{padding:60px 4px;text-align:center}
.eh{font-family:var(--serif);font-size:19px;margin:0 0 10px}
.esub{font-size:13.5px;color:var(--ink3);margin:0 0 26px;line-height:1.7}
.empty .mbtn{max-width:220px;margin:0 auto}

/* ── 로그인 창 ───────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.mbg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.mcard{position:relative;background:var(--bg);border-radius:6px;width:100%;
       max-width:390px;padding:34px 30px 26px;max-height:92vh;overflow-y:auto;
       box-shadow:0 12px 40px rgba(0,0,0,.3)}
.mx{position:absolute;top:10px;right:12px;background:none;border:0;font-size:24px;
    line-height:1;color:var(--ink3);cursor:pointer;padding:4px 8px}
.mlogo{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:2px;
       margin:0;text-align:center}
.mlogo i{display:block;width:18px;height:2.5px;background:var(--accent);
         margin:7px auto 0;font-style:normal}
.mh{font-family:var(--serif);font-size:19px;line-height:1.5;margin:22px 0 8px;
    text-align:center}
.mp{font-size:12.5px;color:var(--ink3);margin:0 0 22px;text-align:center;line-height:1.7}
.socials{display:flex;flex-direction:column;gap:8px}
.soc{border:0;border-radius:3px;padding:12px;font:inherit;font-size:13.5px;
     font-weight:800;cursor:pointer;width:100%}
.soc.kakao{background:#FEE500;color:#191600}
.soc.google{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.soc:disabled{opacity:.55;cursor:default}
.orrow{display:flex;align-items:center;gap:12px;margin:20px 0}
.orrow span{flex:1;height:1px;background:var(--line)}
.orrow em{font-size:11.5px;color:var(--ink3);font-style:normal}
.minput{width:100%;border:1px solid var(--line);border-radius:3px;padding:12px 13px;
        font:inherit;font-size:14.5px;color:var(--ink);background:var(--bg);
        margin-bottom:8px}
.minput:focus{outline:none;border-color:var(--ink3)}
.merr{font-size:12.5px;color:var(--accent);margin:4px 0 8px;line-height:1.6}
.mbtn{width:100%;background:var(--accent);color:var(--on-accent);border:0;border-radius:3px;
      padding:13px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;
      margin-top:6px}
.mbtn:disabled{opacity:.55;cursor:default}
.mswap{text-align:center;margin:18px 0 0}
.mfine{font-size:11px;color:var(--ink3);text-align:center;margin:18px 0 0;line-height:1.8}
.mfine a{color:var(--ink2);text-decoration:underline}