/* LIFENOLOGY LAB — 매거진형 레이아웃
   골격: 상단 KPI 스트립 → 3열 카드 그리드 → (기사) 히어로 리더 + 하단 가로 캐러셀
   색 규칙: REAL = 청록, FAKE = 코랄 */

:root{
  --bg:#0f1116;
  --bg-2:#151822;
  --paper:#ffffff;
  --ink:#12141a;
  --ink-2:#555c6b;
  --muted:#8d95a5;
  --line:#e7eaf0;
  --line-2:#f1f3f7;

  --real:#0d9488; --real-1:#e6f6f4; --real-2:#0f766e;
  --fake:#f4623a; --fake-1:#fdeee9; --fake-2:#d94a24;

  --gold:#f0b429;

  --r:16px;
  --r-sm:12px;
  --shadow:0 1px 2px rgba(12,16,26,.05), 0 6px 20px rgba(12,16,26,.06);
  --shadow-h:0 4px 10px rgba(12,16,26,.08), 0 18px 40px rgba(12,16,26,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#f7f8fa; color:var(--ink);
  font:14px/1.6 "Pretendard","Apple SD Gothic Neo","Malgun Gothic",
       system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
::selection{background:#cdeeea}

/* ── 상단바 : 어두운 바 ─────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:14px 26px 11px; background:var(--bg); color:#e9ecf3;
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid #232734;
}
.home{
  width:30px; height:30px; flex:none; border:0; border-radius:8px;
  background:var(--real); color:#fff; font-size:13px; cursor:pointer;
}
.home:hover{background:var(--real-2)}
.brand{
  font-weight:300; font-size:15px; letter-spacing:.22em; white-space:nowrap; color:#aeb6c6;
}
.brand b{font-weight:800; color:#fff; letter-spacing:.16em}

/* 모델 선택 — 진위 필터 유무로 두 무리를 테두리로 구분 */
.modeltabs{display:flex; gap:10px; margin-left:10px; align-items:flex-end}
.mt-group{position:relative; border:1px solid #2f3546; border-radius:11px; padding:9px 7px 6px}
.mt-group.guard{border-color:#1d5f57; background:rgba(13,148,136,.07)}
.mt-group.plain{border-color:#4a3b33; background:rgba(244,98,58,.06)}
.mt-cap{
  position:absolute; top:-7px; left:9px; padding:0 6px;
  background:var(--bg); font-size:8.5px; font-weight:800; letter-spacing:.1em;
  white-space:nowrap;
}
.mt-group.guard .mt-cap{color:#3fbfae}
.mt-group.plain .mt-cap{color:#f4834f}
.mt-btns{display:flex; gap:3px}

.modeltabs button{
  border:0; background:none; color:#98a1b3; cursor:pointer;
  padding:5px 12px; border-radius:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.03em; white-space:nowrap; transition:background .14s, color .14s;
  line-height:1.2;
}
.modeltabs button:hover{color:#dfe4ee; background:rgba(255,255,255,.05)}
.mt-group.guard button.on{background:var(--real); color:#fff}
.mt-group.plain button.on{background:var(--fake); color:#fff}
.modeltabs button.on .mt-sub{color:rgba(255,255,255,.78)}
.mt-sub{display:block; font-size:8.5px; font-weight:600; letter-spacing:.07em; color:#6b7688; margin-top:1px}

.searchbox{display:flex; flex:1; max-width:280px; margin-left:auto}
.searchbox input{
  flex:1; min-width:0; padding:7px 12px; border:1px solid #2b3040; border-right:0;
  border-radius:8px 0 0 8px; background:#1a1e2a; color:#e9ecf3;
  outline:none; font-size:12.5px;
}
.searchbox input::placeholder{color:#6c7488}
.searchbox input:focus{border-color:var(--real)}
.searchbox button{
  border:0; padding:0 12px; border-radius:0 8px 8px 0; cursor:pointer;
  background:#2b3040; color:#cfd6e4; font-size:15px;
}
.searchbox button:hover{background:var(--real); color:#fff}

/* 사용자 버튼 + 팝오버 */
.userwrap{position:relative}
.userbtn{
  display:flex; align-items:center; gap:8px;
  border:1px solid #2b3040; background:#1a1e2a; color:#e9ecf3;
  border-radius:9px; padding:5px 10px 5px 6px; cursor:pointer; font-size:12px;
  transition:border-color .14s, background .14s;
}
.userbtn:hover{border-color:#3a4256}
.userbtn.on{border-color:var(--real); background:#16261f}
.uavatar{
  width:22px; height:22px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,var(--real),#0b7f74);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff;
}
.uname{font-weight:700; letter-spacing:.02em; white-space:nowrap}
.ucaret{font-size:9px; color:#8d95a5}

.userpop{
  position:absolute; right:0; top:calc(100% + 10px); z-index:50;
  width:320px; background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(8,12,22,.28);
  padding:14px; animation:pop-in .16s cubic-bezier(.2,.7,.3,1);
}
@keyframes pop-in{from{opacity:0; transform:translateY(-6px)}}
.pop-head{margin-bottom:12px}
.upersona{margin:8px 2px 0; font-size:11.5px; color:var(--muted); letter-spacing:.02em}
.pop-kpis{display:flex; flex-direction:column; gap:9px}
.pop-kpis .kpi{padding:12px 13px 13px; border-radius:var(--r-sm); box-shadow:none}

.userpick{
  width:100%; padding:7px 26px 7px 10px; border:1px solid var(--line); border-radius:9px;
  background:#fbfcfe url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' fill='none' stroke='%238d95a5' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 10px center;
  color:var(--ink); font-size:12.5px; font-weight:600; cursor:pointer;
  appearance:none; -webkit-appearance:none;
}
.logout{
  border:1px solid #2b3040; background:none; color:#98a1b3;
  border-radius:8px; padding:6px 11px; cursor:pointer; font-size:11.5px;
}
.logout:hover{background:#1d2130; color:#dfe4ee}

/* ── 본문 래퍼 : 사이드바 없음, 전폭 ────────────────────── */
.wrap{max-width:1460px; margin:0 auto; padding:24px 26px 60px; animation:fade .22s ease}
@keyframes fade{from{opacity:0; transform:translateY(5px)}}

/* ── 상단 KPI 스트립 ────────────────────────────────────── */
.kpis{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:30px;
}
@media (max-width:820px){ .kpis{grid-template-columns:1fr} }
.kpi{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 18px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi.accent{border-color:#cfe9e5; background:linear-gradient(180deg,#f4fbfa,#fff 60%)}
.kpi h4{
  margin:0 0 11px; font-size:9.5px; font-weight:800; letter-spacing:.18em; color:var(--muted);
}
.kpi-lead{display:flex; align-items:baseline; gap:9px; margin-bottom:9px}
.kpi-num{font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1}
.kpi-num.real{color:var(--real)}
.kpi-num.fake{color:var(--fake)}
.kpi-cap{font-size:10.5px; color:var(--muted); letter-spacing:.06em; font-weight:700}
.kpi-detail{font-size:10.5px; color:var(--muted); margin-top:7px; letter-spacing:.03em}

/* 얇은 분할 막대 */
.split{display:flex; height:7px; border-radius:99px; overflow:hidden; background:var(--line-2)}
.split .s-real{background:var(--real)}
.split .s-fake{background:var(--fake)}
.split div{transition:width .4s cubic-bezier(.2,.7,.3,1)}

/* ── 섹션 헤더 ──────────────────────────────────────────── */
.rowhead{display:flex; align-items:center; gap:14px; margin:0 0 14px}
.rowhead h2{
  margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em;
}
.rowhead h2::after{
  content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--real); margin-top:6px;
}
.legend{
  display:flex; gap:13px; margin-left:auto;
  font-size:9.5px; font-weight:800; letter-spacing:.12em; color:var(--muted);
}
.legend i{display:inline-block; width:8px; height:8px; border-radius:3px; margin-right:5px; vertical-align:middle}
.legend .l-real i{background:var(--real)}
.legend .l-fake i{background:var(--fake)}

/* ── 카드 그리드 : 이미지가 카드 위 ─────────────────────── */
.cards{
  list-style:none; margin:0 0 38px; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
}
.cards li{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s;
}
.cards li{position:relative}
.cards li:hover{transform:translateY(-4px); box-shadow:var(--shadow-h)}
.cards .ph-wrap{position:relative; aspect-ratio:16/10; background:#eef1f5; overflow:hidden}
.cards .ph-wrap img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s}
.cards li:hover .ph-wrap img{transform:scale(1.05)}
.cards .ph-wrap.ph{background:linear-gradient(135deg,#eef1f5,#dfe4ec)}
/* 라벨 = 카드 상단 색 바 + 코너 점 */
.cards li::before{
  content:""; position:absolute; z-index:2; top:0; left:0; right:0; height:4px;
  background:var(--real);
}
.cards li.fake::before{background:var(--fake)}
.cards .dot{
  position:absolute; z-index:2; top:12px; right:12px;
  width:9px; height:9px; border-radius:50%; background:var(--real);
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
}
.cards li.fake .dot{background:var(--fake)}
.cards .c-body{padding:12px 14px 14px; flex:1; display:flex; align-items:flex-start}
.cards .c-title{
  font-size:13.5px; font-weight:700; line-height:1.5; letter-spacing:-.006em; word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* 최근 읽은 기사 : 더 작은 카드 */
.cards.mini{grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:13px}
.cards.mini .ph-wrap{aspect-ratio:16/9}
.cards.mini .c-body{padding:9px 11px 11px}
.cards.mini .c-title{font-size:12px; -webkit-line-clamp:2}
.cards.mini .dot{width:7px; height:7px; top:9px; right:9px}

/* ── 기사 리더 : 히어로 + 좁은 본문단 ───────────────────── */
.back{
  border:0; background:none; color:var(--real-2); cursor:pointer;
  font-size:12.5px; font-weight:700; padding:0; margin-bottom:14px;
}
.back:hover{text-decoration:underline}
.reader{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); margin-bottom:40px;
}
.hero{width:100%; max-height:340px; overflow:hidden; background:#eef1f5}
.hero img{width:100%; height:340px; object-fit:cover; display:block}
.reader-inner{padding:28px clamp(20px, 6vw, 88px) 44px; max-width:920px; margin:0 auto}
.art-meta{font-size:11px; color:var(--muted); letter-spacing:.08em; font-weight:700}
#art-title{
  font-size:clamp(22px, 2.6vw, 31px); font-weight:800; line-height:1.35;
  letter-spacing:-.018em; margin:9px 0 22px; word-break:keep-all;
}

/* 판정 : 원형 링 게이지 */
.verdict{
  display:flex; align-items:center; gap:18px;
  padding:16px 18px; border-radius:var(--r-sm);
  background:var(--real-1); border:1px solid #cfe9e5; margin:0 0 28px;
}
.verdict.is-fake{background:var(--fake-1); border-color:#f8d5c9}
.ring{flex:none; width:74px; height:74px; position:relative}
.ring svg{transform:rotate(-90deg); display:block}
.ring circle{fill:none; stroke-width:9; stroke-linecap:round}
.ring .track{stroke:rgba(255,255,255,.85)}
.ring .val{stroke:var(--real); transition:stroke-dasharray .6s cubic-bezier(.2,.7,.3,1)}
.verdict.is-fake .ring .val{stroke:var(--fake)}
.ring b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:var(--real-2); letter-spacing:-.02em;
}
.verdict.is-fake .ring b{color:var(--fake-2)}
.v-text h5{
  margin:0 0 4px; font-size:9.5px; font-weight:800; letter-spacing:.18em; color:var(--muted);
}
.v-label{font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--real-2)}
.verdict.is-fake .v-label{color:var(--fake-2)}
.v-note{font-size:11.5px; color:var(--ink-2); margin-top:3px}

.art-body{font-size:15.5px; line-height:1.92; color:#2a2f3a; white-space:pre-wrap; word-break:keep-all}
.keywords{display:flex; gap:7px; flex-wrap:wrap; margin:30px 0 0}
.keywords span{
  background:#f2f4f8; color:var(--ink-2); border-radius:7px;
  padding:5px 11px; font-size:11.5px; font-weight:600;
}

/* ── 관련 기사 : 하단 가로 캐러셀 ───────────────────────── */
.rail{
  list-style:none; margin:0; padding:4px 4px 16px; display:flex; gap:15px;
  overflow-x:auto; scroll-snap-type:x proximity;
}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:#d7dce6; border-radius:99px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail li{
  flex:none; width:224px; scroll-snap-align:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; cursor:pointer; position:relative;
  box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s;
}
.rail li:hover{transform:translateY(-4px); box-shadow:var(--shadow-h)}
.rail li::before{
  content:""; position:absolute; z-index:2; top:0; left:0; right:0; height:4px; background:var(--real);
}
.rail li.fake::before{background:var(--fake)}
.rail .ph-wrap{aspect-ratio:16/9; background:#eef1f5; overflow:hidden}
.rail .ph-wrap img{width:100%; height:100%; object-fit:cover; display:block}
.rail .r-title{
  padding:10px 12px 13px; font-size:12px; font-weight:600; line-height:1.5; word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.rail .dot{
  position:absolute; z-index:2; top:11px; right:11px;
  width:8px; height:8px; border-radius:50%; background:var(--real);
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
}
.rail li.fake .dot{background:var(--fake)}

/* ── 토스트 ─────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:var(--bg); color:#fff; padding:10px 18px;
  border-radius:10px; font-size:12.5px; z-index:60;
  box-shadow:0 10px 34px rgba(0,0,0,.3);
  animation:toast-in .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes toast-in{from{opacity:0; transform:translate(-50%,10px)}}
.hint{font-size:11.5px; color:var(--muted)}