:root{
  --paper:#fbf8f1;
  --ink:#141210;
  --gray:#6f6a62;
  --red:#c8452f;
  --line:#d8d1c4;
  --white:#ffffff;
  --serif:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}

/* ---------- NAV ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  background:var(--paper);
  z-index:-1;
}
.nav-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--serif);
  font-size:18px;
  letter-spacing:.08em;
  font-weight:700;
}
.brand img{height:32px;width:auto;border-radius:4px;}
.nav-links{display:flex;gap:28px;}
.nav-links a{
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gray);
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
  white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink);border-bottom-color:var(--red);}
.menu-btn{
  display:none;
  background:none;
  border:1px solid var(--ink);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.3em;
  padding:7px 12px;
  cursor:pointer;
  color:var(--ink);
}
.mobile-panel{
  display:none;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.mobile-panel.open{display:block;}
.mobile-panel a{
  display:block;
  padding:14px 32px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink);
}
.mobile-panel a:last-child{border-bottom:none;}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
section{scroll-margin-top:80px;}
.sec{padding:72px 0;border-bottom:1px solid var(--line);}
.kicker{
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:14px;
}
.sec-title{
  font-family:var(--serif);
  font-size:30px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.02em;
}
.sec-sub{color:var(--gray);font-size:14px;margin-top:12px;max-width:620px;}

/* ---------- HERO ---------- */
.hero{padding:64px 0 72px;border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;}
.hero h1{
  font-family:var(--serif);
  font-size:48px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.01em;
  margin:14px 0 22px;
}
.hero h1 em{font-style:normal;color:var(--red);}
.hero-text{
  font-size:15px;
  color:#332f2a;
  line-height:1.9;
}
.hero-text::first-letter{
  float:left;
  font-family:var(--serif);
  font-size:56px;
  line-height:.9;
  padding:6px 12px 0 0;
  color:var(--red);
  font-weight:700;
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--gray);
}
.hero-meta span b{color:var(--ink);font-weight:600;}
.hero-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:13px 30px;
  font-size:13px;
  letter-spacing:.14em;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.figure{
  border:1px solid var(--line);
  padding:14px;
  background:#fff;
}
.figure img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.figcap{
  font-size:11px;
  color:var(--gray);
  letter-spacing:.06em;
  margin-top:10px;
  display:flex;
  justify-content:space-between;
}

/* ---------- TOC ---------- */
.toc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:34px;}
.toc-item{
  display:grid;
  grid-template-columns:36px 36px 1fr auto;
  align-items:center;
  gap:16px;
  padding:14px 12px;
  border-bottom:1px solid var(--line);
  transition:background .2s,padding .2s;
}
.toc-item:hover{background:#fff;padding-left:20px;padding-right:20px;}
.toc-num{font-family:var(--serif);font-size:14px;color:var(--red);}
.toc-thumb{position:relative;width:36px;height:48px;}
.toc-thumb img{width:36px;height:48px;object-fit:cover;border:1px solid var(--line);}
.toc-name{font-size:14px;font-weight:600;}
.toc-name small{display:block;font-weight:400;font-size:11px;color:var(--gray);letter-spacing:.04em;margin-top:2px;}
.toc-page{font-family:var(--serif);font-size:13px;color:var(--gray);}
.tag{
  position:absolute;
  top:0;
  right:0;
  font-size:9px;
  line-height:1;
  padding:3px 4px;
  letter-spacing:.04em;
}
.tag-sub{background:rgba(20,18,16,.78);color:#fff;}
.tag-raw{background:var(--red);color:#fff;}

/* ---------- RANK ---------- */
.rank-table{width:100%;border-collapse:collapse;margin-top:30px;font-size:14px;}
.rank-table th,.rank-table td{
  text-align:left;
  padding:14px 12px;
  border-bottom:1px solid var(--line);
  transition:background .2s,padding .2s;
}
.rank-table th{
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gray);
  font-weight:400;
  border-bottom:1px solid var(--ink);
}
.rank-table tr:hover td{background:#fff;padding-left:20px;padding-right:20px;}
.rank-no{font-family:var(--serif);font-size:16px;color:var(--red);width:52px;}
.rank-thumb{width:44px;}
.rank-thumb img{width:44px;height:58px;object-fit:cover;border:1px solid var(--line);}
.rank-heat{
  display:inline-block;
  width:90px;
  height:5px;
  background:#ebe5d9;
  position:relative;
  vertical-align:middle;
}
.rank-heat i{position:absolute;left:0;top:0;height:5px;background:var(--red);}
.rank-heat-txt{font-size:11px;color:var(--gray);margin-left:10px;}

/* ---------- FEATURE ---------- */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:34px;}
.feature-img{border:1px solid var(--line);padding:12px;background:#fff;}
.feature-img img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.feature-quote{
  font-family:var(--serif);
  font-size:32px;
  line-height:1.4;
  margin:14px 0 20px;
}
.feature-p{color:#3a362f;font-size:15px;margin-bottom:14px;}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;border-top:1px solid var(--line);padding-top:22px;}
.stat-num{font-family:var(--serif);font-size:34px;color:var(--red);line-height:1;}
.stat-label{font-size:11px;color:var(--gray);letter-spacing:.14em;margin-top:8px;}

/* ---------- CHANNEL ---------- */
.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px;}
.channel-card{border:1px solid var(--line);padding:10px;background:#fff;position:relative;}
.channel-card figure{position:relative;}
.channel-card img{width:100%;aspect-ratio:9/16;object-fit:cover;}
.channel-cap{padding:12px 6px 6px;font-size:13px;}
.channel-cap b{display:block;font-family:var(--serif);font-size:16px;font-weight:700;}
.channel-cap span{font-size:11px;color:var(--gray);}
.channel-card .tag{top:6px;right:6px;}

/* ---------- OST ---------- */
.ost-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.thai-note{font-size:13px;color:var(--gray);letter-spacing:.08em;}
.ost-list{margin-top:30px;border-top:1px solid var(--ink);}
.ost-item{
  display:grid;
  grid-template-columns:52px 1.2fr 1.6fr auto;
  gap:18px;
  align-items:center;
  padding:16px 12px;
  border-bottom:1px solid var(--line);
  transition:background .2s,padding .2s;
}
.ost-item:hover{background:#fff;padding-left:20px;padding-right:20px;}
.ost-no{font-family:var(--serif);font-size:14px;color:var(--red);}
.ost-name{font-size:15px;font-weight:600;}
.ost-use{font-size:12px;color:var(--gray);}
.ost-time{font-size:12px;color:var(--gray);font-family:var(--serif);}

/* ---------- GUIDE ---------- */
.guide-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;margin-top:34px;}
.guide-steps{counter-reset:step;}
.guide-step{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.guide-step:first-child{border-top:1px solid var(--line);}
.guide-step-no{font-family:var(--serif);font-size:20px;color:var(--red);line-height:1.2;}
.guide-step h3{font-size:15px;margin-bottom:4px;}
.guide-step p{font-size:13px;color:var(--gray);}
.guide-step p b{color:var(--ink);font-weight:600;}
.note-box{
  margin-top:28px;
  border-left:3px solid var(--red);
  padding:14px 20px;
  background:#fff;
  font-size:13px;
  color:#3a362f;
}

/* ---------- FAQ ---------- */
.faq-groups{margin-top:34px;display:grid;gap:44px;}
.faq-group h3{
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--red);
  padding-bottom:12px;
  border-bottom:1px solid var(--ink);
  margin-bottom:6px;
}
.faq-item{border-bottom:1px solid var(--line);padding:20px 0;}
.faq-q{display:flex;gap:12px;font-size:15px;font-weight:600;align-items:baseline;}
.faq-q i{font-style:normal;color:var(--red);font-family:var(--serif);}
.faq-a{font-size:13px;color:#3a362f;margin-top:8px;padding-left:24px;max-width:760px;}
.faq-extra{margin-top:14px;padding-left:24px;}
.faq-img{max-width:320px;border:1px solid var(--line);}
.cap-table{width:100%;max-width:420px;border-collapse:collapse;font-size:12px;margin-top:10px;}
.cap-table th,.cap-table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;}
.cap-table th{color:var(--gray);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;}

/* ---------- END ---------- */
.ending{padding:88px 0;text-align:center;border-bottom:1px solid var(--line);}
.ending blockquote{
  font-family:var(--serif);
  font-size:30px;
  line-height:1.6;
  max-width:720px;
  margin:0 auto 34px;
}
.ending-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
.site-footer{padding:40px 0 48px;font-size:11px;color:#968f84;line-height:1.9;}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:flex-end;}
.site-footer a{color:#968f84;border-bottom:1px solid #cfc7b8;}
.site-footer a:hover{color:var(--ink);}
.footer-meta{display:flex;flex-direction:column;gap:4px;}

/* ---------- SKIN CAPSULE ---------- */
.skin-cap{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:120;
  border:1px solid var(--ink);
  background:var(--paper);
  padding:5px;
  display:flex;
  gap:4px;
}
.skin-cap button{
  border:none;
  background:none;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.14em;
  padding:5px 9px;
  cursor:pointer;
  color:var(--gray);
}
.skin-cap button.on{background:var(--ink);color:var(--paper);}
.skin-atmo{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:110;
  display:none;
}
.skin-atmo.show{display:block;}
.atmo-msg{
  position:absolute;
  left:50%;
  top:84px;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:.16em;
  padding:7px 16px;
  border:1px solid currentColor;
  background:rgba(251,248,241,.92);
  white-space:nowrap;
}
body.skin-songkran .skin-atmo{
  background:
    radial-gradient(circle at 15% 25%,rgba(130,190,225,.30),transparent 45%),
    radial-gradient(circle at 80% 70%,rgba(240,160,190,.28),transparent 48%);
}
body.skin-songkran .atmo-msg{color:#2e6f94;}
body.skin-loy .skin-atmo{
  background:
    radial-gradient(circle at 25% 80%,rgba(245,170,80,.34),transparent 42%),
    radial-gradient(circle at 75% 20%,rgba(240,150,60,.26),transparent 40%);
  animation:breathe 4.5s ease-in-out infinite;
}
body.skin-loy .atmo-msg{color:#a35a12;}
@keyframes breathe{0%,100%{opacity:.55;}50%{opacity:1;}}

/* ---------- RESPONSIVE 1024 ---------- */
@media(max-width:1024px){
  .wrap,.nav-inner{padding-left:24px;padding-right:24px;}
  .hero h1{font-size:40px;}
  .hero-grid{gap:36px;}
  .sec-title{font-size:26px;}
  .feature-quote{font-size:26px;}
  .ending blockquote{font-size:24px;}
}

/* ---------- RESPONSIVE 900 (菜单) ---------- */
@media(max-width:900px){
  .nav-links{display:none;}
  .menu-btn{display:block;}
  .toc-grid{grid-template-columns:1fr;gap:0;}
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .hero-figure{order:2;}
  .feature-grid,.guide-grid{grid-template-columns:1fr;gap:28px;}
  .channel-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .channel-grid .channel-card:last-child{grid-column:1 / -1;max-width:320px;}
  .ost-item{grid-template-columns:36px 1fr auto;gap:12px;}
  .ost-use{grid-column:2 / 4;margin-top:2px;}
  .rank-table .col-heat{display:none;}
}

/* ---------- RESPONSIVE 768 ---------- */
@media(max-width:768px){
  .wrap,.nav-inner{padding-left:18px;padding-right:18px;}
  .sec{padding:52px 0;}
  .hero{padding:40px 0 52px;}
  .hero h1{font-size:32px;}
  .hero-text{font-size:14px;}
  .hero-text::first-letter{font-size:44px;}
  .sec-title{font-size:24px;}
  .channel-grid{grid-template-columns:1fr;}
  .channel-grid .channel-card:last-child{max-width:100%;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .stat-row .stat:last-child{grid-column:1 / -1;}
  .rank-table th,.rank-table td{padding:11px 8px;font-size:13px;}
  .rank-no{width:36px;font-size:14px;}
  .rank-thumb img{width:34px;height:46px;}
  .toc-item{grid-template-columns:28px 34px 1fr auto;gap:12px;}
  .ending blockquote{font-size:21px;}
  .skin-cap{left:12px;bottom:12px;padding:4px;}
  .skin-cap button{font-size:9px;padding:4px 7px;}
  .atmo-msg{top:70px;font-size:10px;letter-spacing:.1em;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
}