/* =========================================================
   Дорамагид — страница «С чего начать смотреть дорамы»
   /gaydy/s-chego-nachat/  ·  префикс классов: .dg-sn
   ========================================================= */

.dg-sn{
  --sn-ink:#22142e;
  --sn-muted:#6b5f75;
  --sn-line:#e7dfea;
  --sn-tint:#f8f4fa;
  --sn-tint-2:#f4eef6;
  --sn-violet:#4f1a7e;
  --sn-violet-2:#6c2aa6;
  --sn-pink:#ff3d6a;
  --sn-pink-2:#d92b55;
  --sn-radius:22px;
  --sn-shadow:0 18px 40px -24px rgba(34,20,46,.45);
  color:var(--sn-ink);
  font-size:16px;
  line-height:1.6;
}
.dg-sn *,.dg-sn *::before,.dg-sn *::after{box-sizing:border-box}
.dg-sn p{margin:0}
.dg-sn p + p{margin-top:12px}
.dg-sn a{text-decoration:none}
.dg-sn p a,.dg-sn li > a:not([class]){color:var(--sn-violet);font-weight:700;border-bottom:1px solid rgba(79,26,126,.3)}
.dg-sn p a:hover{color:var(--sn-pink-2);border-color:currentColor}

/* ---------- заголовки ---------- */
.dg-sn-section{margin:56px 0 0;scroll-margin-top:90px}
.dg-sn-eyebrow{
  display:inline-block;margin:0 0 8px!important;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sn-pink-2);
}
.dg-sn h2{
  margin:0 0 20px!important;
  font-size:clamp(24px,3.2vw,30px)!important;line-height:1.2!important;
  font-weight:800;color:var(--sn-ink);letter-spacing:-.01em;
}
.dg-sn h3{margin:0!important;font-size:19px!important;line-height:1.25!important;font-weight:800;color:var(--sn-ink)}
.dg-sn-sub{color:var(--sn-muted);margin:-8px 0 24px!important;max-width:66ch}

/* ---------- кнопки ---------- */
.dg-sn-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  font-size:15px;font-weight:700;line-height:1.2;border-bottom:0!important;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;
}
.dg-sn-btn--main{background:var(--sn-violet);color:#fff!important;box-shadow:0 10px 24px -12px rgba(79,26,126,.7)}
.dg-sn-btn--main:hover{background:var(--sn-violet-2);transform:translateY(-1px)}
.dg-sn-btn--ghost{background:#fff;color:var(--sn-ink)!important;border:1px solid var(--sn-line)!important}
.dg-sn-btn--ghost:hover{border-color:var(--sn-violet-2)!important;color:var(--sn-violet-2)!important}

/* ---------- hero ---------- */
.dg-sn-hero{
  position:relative;overflow:hidden;
  padding:32px 32px 28px;border-radius:28px;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(255,61,106,.18) 0%,rgba(255,61,106,0) 55%),
    radial-gradient(90% 120% at 0% 100%,rgba(108,42,166,.18) 0%,rgba(108,42,166,0) 60%),
    var(--sn-tint);
  border:1px solid var(--sn-line);
}
.dg-sn-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;margin:0 0 18px!important;border-radius:999px;
  background:#fff;border:1px solid var(--sn-line);
  font-size:13px;font-weight:700;color:var(--sn-violet);
}
.dg-sn-badge::before{content:"★";color:var(--sn-pink);font-size:12px}
.dg-sn-hero p{font-size:17px;color:#3b2d47;max-width:70ch}
.dg-sn-hero strong{color:var(--sn-ink)}
.dg-sn-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

.dg-sn-toc{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin:24px 0 0!important;padding:18px 0 0!important;list-style:none!important;counter-reset:sntoc;
  border-top:1px dashed #d9c8e4;
}
.dg-sn-toc li{counter-increment:sntoc;margin:0!important;padding:0!important}
.dg-sn-toc a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;
  font-size:14px;font-weight:700;color:#3b2d47!important;border:0!important;transition:background .2s,color .2s;
}
.dg-sn-toc a::before{
  content:counter(sntoc,decimal-leading-zero);flex:0 0 auto;
  font-size:12px;font-weight:800;color:var(--sn-pink-2);
}
.dg-sn-toc a:hover{background:#fff;color:var(--sn-violet)!important}

/* ---------- что такое дорама ---------- */
.dg-sn-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:stretch}
.dg-sn-intro-text{padding:24px;border-radius:var(--sn-radius);background:#fff;border:1px solid var(--sn-line);color:#3b2d47}
.dg-sn-stats{display:grid;gap:10px;margin:0!important;padding:0!important;list-style:none!important}
.dg-sn-stats li{
  display:flex;align-items:center;gap:14px;margin:0!important;padding:14px 18px!important;border-radius:18px;
  background:var(--sn-tint);border:1px solid var(--sn-line);
}
.dg-sn-stats b{
  flex:0 0 auto;min-width:74px;font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--sn-violet),var(--sn-pink));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.dg-sn-stats span{font-size:14px;font-weight:600;color:var(--sn-muted);line-height:1.35}

/* ---------- страны ---------- */
.dg-sn-countries{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.dg-sn-country{
  --c:#6c2aa6;
  position:relative;display:flex;flex-direction:column;
  padding:22px 20px 20px;border-radius:var(--sn-radius);
  background:#fff;border:1px solid var(--sn-line);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.dg-sn-country::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:22px 22px 0 0;background:var(--c)}
.dg-sn-country:hover{transform:translateY(-3px);box-shadow:var(--sn-shadow);border-color:transparent}
.dg-sn-country-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dg-sn-flag{
  flex:0 0 44px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--c);color:#fff;font-size:14px;font-weight:800;
}
.dg-sn-country h3 a{color:var(--sn-ink)}
.dg-sn-country h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.dg-sn-country p{font-size:14.5px;color:#4a3d56}
.dg-sn-country p a{position:relative;z-index:2}
.dg-sn-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px!important}
.dg-sn-facts div{padding:8px 10px;border-radius:12px;background:var(--sn-tint-2)}
.dg-sn-facts dt{margin:0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sn-muted)}
.dg-sn-facts dd{margin:0!important;font-size:15px;font-weight:800;color:var(--c)}
.dg-sn-label{
  position:absolute;top:-11px;right:16px;padding:2px 10px;border-radius:999px;
  background:var(--sn-pink);color:#fff;font-size:11px;font-weight:800;white-space:nowrap;z-index:2;
}
.dg-sn-country--kr{--c:#d92b55;border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--sn-pink),var(--sn-violet-2)) border-box}
.dg-sn-country--kr::before{display:none}
.dg-sn-country--cn{--c:#c4161c}
.dg-sn-country--jp{--c:#6c2aa6}
.dg-sn-country--th{--c:#1f4fa8}

/* ---------- шаги ---------- */
.dg-sn-steps{list-style:none!important;margin:0!important;padding:0!important;counter-reset:snstep;display:grid;gap:12px}
.dg-sn-steps li{
  counter-increment:snstep;position:relative;
  margin:0!important;padding:18px 20px 18px 78px!important;border-radius:18px;
  background:#fff;border:1px solid var(--sn-line);color:#4a3d56;font-size:15px;
}
.dg-sn-steps li::before{
  content:counter(snstep);position:absolute;left:18px;top:16px;
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sn-violet),var(--sn-pink));color:#fff;font-weight:800;font-size:18px;
}
.dg-sn-steps li strong{display:block;margin-bottom:2px;color:var(--sn-ink);font-size:17px}

/* ---------- настроение ---------- */
.dg-sn-moods{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.dg-sn-mood{
  display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;
  padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--sn-line);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.dg-sn-mood:hover{transform:translateY(-2px);box-shadow:var(--sn-shadow);border-color:transparent}
.dg-sn-mood-ico{
  grid-row:1 / 3;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:var(--sn-tint-2);color:var(--sn-violet);font-size:22px;font-weight:800;
  transition:background .2s,color .2s;
}
.dg-sn-mood:hover .dg-sn-mood-ico{background:var(--sn-violet);color:#fff}
.dg-sn-mood strong{font-size:16px;color:var(--sn-ink);line-height:1.25}
.dg-sn-mood span:last-child{font-size:14px;color:var(--sn-muted)}

/* ---------- 12 дорам ---------- */
.dg-sn-picks{
  display:grid;gap:14px;grid-template-columns:repeat(3,1fr);
  margin:0!important;padding:0!important;list-style:none!important;counter-reset:snpick;
}
.dg-sn-pick{
  counter-increment:snpick;position:relative;display:flex;flex-direction:column;
  margin:0!important;padding:20px 20px 18px!important;border-radius:var(--sn-radius);
  background:#fff;border:1px solid var(--sn-line);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.dg-sn-pick::after{
  content:counter(snpick,decimal-leading-zero);position:absolute;right:18px;top:14px;
  font-size:30px;font-weight:800;line-height:1;color:var(--sn-tint-2);
}
.dg-sn-pick:hover{transform:translateY(-3px);box-shadow:var(--sn-shadow);border-color:transparent}
.dg-sn-pick-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;padding-right:44px;font-size:13px;font-weight:700;color:var(--sn-muted)}
.dg-sn-pick-meta > span:not(.dg-sn-chip){padding:2px 9px;border-radius:999px;border:1px solid var(--sn-line);font-size:12px;line-height:1.5}
.dg-sn-chip{padding:3px 10px;line-height:1.5;border-radius:999px;font-size:12px;font-weight:800;color:#fff}
.dg-sn-chip--kr{background:#d92b55}
.dg-sn-chip--cn{background:#c4161c}
.dg-sn-chip--jp{background:#6c2aa6}
.dg-sn-chip--th{background:#1f4fa8}
.dg-sn-pick h3{margin-bottom:6px!important;font-size:18px!important}
.dg-sn-pick h3 a{color:var(--sn-ink);border:0!important;font-weight:800}
.dg-sn-pick h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.dg-sn-pick:hover h3 a{color:var(--sn-violet)}
.dg-sn-pick p{font-size:14.5px;color:#4a3d56;flex:1 1 auto}
.dg-sn-pick p a{position:relative;z-index:2}
.dg-sn-more-row{margin-top:20px!important;text-align:center}

/* ---------- тёмный блок ---------- */
.dg-sn-dark{
  padding:32px;border-radius:28px;
  background:linear-gradient(135deg,#2a1240 0%,#4f1a7e 55%,#8a2a8f 100%);color:#efe6f5;
}
.dg-sn-dark h2{color:#fff!important}
.dg-sn-dark .dg-sn-eyebrow{color:#ffb3c4}
.dg-sn-features{
  display:grid;gap:12px;margin:0!important;padding:0!important;list-style:none!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.dg-sn-features li{
  margin:0!important;padding:16px 16px 16px 50px!important;border-radius:16px;position:relative;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:14px;color:#e6d9ef;
}
.dg-sn-features li strong{display:block;margin-bottom:2px;color:#fff;font-size:15px}
.dg-sn-features li a{color:#ffd0dc!important;font-weight:700;border-bottom:1px solid rgba(255,208,220,.5)!important}
.dg-sn-features li::before{
  content:"✓";position:absolute;left:16px;top:17px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--sn-pink);color:#fff;font-size:12px;font-weight:800;
}

/* ---------- ошибки ---------- */
.dg-sn-mistakes{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.dg-sn-mistake{
  position:relative;padding:18px 20px 18px 62px;border-radius:18px;
  background:#fff6f8;border:1px solid #f7d4dd;
}
.dg-sn-mistake::before{
  content:"✕";position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;background:#ffe1e8;color:var(--sn-pink-2);font-size:14px;font-weight:800;
}
.dg-sn-mistake strong{display:block;margin-bottom:4px;font-size:16px;color:var(--sn-ink)}
.dg-sn-mistake p{font-size:14.5px;color:#4a3d56}

/* ---------- что дальше ---------- */
.dg-sn-next{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
.dg-sn-next a{
  position:relative;display:block;padding:18px 18px 18px;border-radius:18px;
  background:var(--sn-tint);border:1px solid var(--sn-line);transition:all .2s;
}
.dg-sn-next a::after{content:"→";position:absolute;right:16px;top:16px;color:var(--sn-violet);font-weight:800;transition:transform .2s}
.dg-sn-next a:hover{background:#fff;box-shadow:var(--sn-shadow);border-color:transparent}
.dg-sn-next a:hover::after{transform:translateX(4px)}
.dg-sn-next strong{display:block;padding-right:20px;margin-bottom:4px;font-size:16px;color:var(--sn-ink)}
.dg-sn-next span{display:block;font-size:14px;color:var(--sn-muted);line-height:1.4}

/* ---------- FAQ ---------- */
.dg-sn-faq{display:grid;gap:10px}
.dg-sn-faq details{border-radius:18px;background:#fff;border:1px solid var(--sn-line);transition:box-shadow .25s,border-color .25s}
.dg-sn-faq details[open]{border-color:#d9c8e4;box-shadow:0 14px 30px -22px rgba(34,20,46,.4)}
.dg-sn-faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:18px 56px 18px 20px;font-size:17px;font-weight:700;color:var(--sn-ink);
}
.dg-sn-faq summary::-webkit-details-marker{display:none}
.dg-sn-faq summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--sn-tint-2);color:var(--sn-violet);font-size:20px;font-weight:700;line-height:1;
  transition:transform .25s,background .25s,color .25s;
}
.dg-sn-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--sn-violet);color:#fff}
.dg-sn-faq summary:hover{color:var(--sn-violet-2)}
.dg-sn-faq details p{padding:0 20px 18px;color:#4a3d56}

/* ---------- смотрите также ---------- */
.dg-sn-also{margin-top:40px;padding:22px 24px;border-radius:22px;background:var(--sn-tint);border:1px solid var(--sn-line)}
.dg-sn-also-title{display:block;margin-bottom:12px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--sn-muted)}
.dg-sn-chips{display:flex;flex-wrap:wrap;gap:8px}
.dg-sn-chips a{
  display:inline-block;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--sn-line);
  font-size:14px;font-weight:700;color:var(--sn-ink)!important;transition:all .2s;
}
.dg-sn-chips a:hover{background:var(--sn-violet);border-color:var(--sn-violet);color:#fff!important}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .dg-sn-countries{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .dg-sn-picks{grid-template-columns:repeat(2,1fr)}
  .dg-sn-next{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .dg-sn-intro{grid-template-columns:1fr}
  .dg-sn-moods{grid-template-columns:1fr 1fr}
  .dg-sn-mistakes{grid-template-columns:1fr}
  .dg-sn-toc{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .dg-sn-section{margin-top:44px}
  .dg-sn-hero{padding:24px 20px 20px;border-radius:22px}
  .dg-sn-hero p{font-size:16px}
  .dg-sn-btn{flex:1 1 auto;justify-content:center}
  .dg-sn-toc{grid-template-columns:1fr}
  .dg-sn-countries,.dg-sn-picks,.dg-sn-moods,.dg-sn-next{grid-template-columns:1fr}
  .dg-sn-intro-text{padding:20px}
  .dg-sn-steps li{padding:16px 16px 16px 72px!important}
  .dg-sn-steps li::before{left:14px}
  .dg-sn-dark{padding:24px 20px;border-radius:22px}
  .dg-sn-faq summary{font-size:16px;padding:16px 52px 16px 16px}
  .dg-sn-faq details p{padding:0 16px 16px}
}
@media (prefers-reduced-motion:reduce){
  .dg-sn *{transition:none!important}
}