/* =========================
   Artkery Guide Theme Vars
   (Light default + Dark override)
========================= */

/* Light (default) */
:root{
  --g-bg: #f7f8fb;
  --g-surface: rgba(10,18,36,0.04);
  --g-surface2: rgba(10,18,36,0.06);
  --g-border: rgba(10,18,36,0.10);
  --g-text: rgba(10,18,36,0.92);
  --g-muted: rgba(10,18,36,0.70);
  --g-soft: rgba(10,18,36,0.55);
  --g-accent: #16c79a;
  --g-accent2: #2f6bff;
  --g-warn: #ffb703;
  --g-radius: 20px;
  --g-radius2: 14px;
  --g-shadow: 0 14px 40px rgba(10,18,36,0.10);
  --g-shadow2: 0 10px 24px rgba(10,18,36,0.08);
  --g-max: 980px;
}

/* Dark (Tailwind-like: .dark or inside .dark) */
:where(.dark, .dark *){
  --g-bg: #0b0f14;
  --g-surface: rgba(255,255,255,0.06);
  --g-surface2: rgba(255,255,255,0.08);
  --g-border: rgba(255,255,255,0.12);
  --g-text: rgba(255,255,255,0.88);
  --g-muted: rgba(255,255,255,0.68);
  --g-soft: rgba(255,255,255,0.52);
  --g-accent: #38f9c0;
  --g-accent2: #7aa8ff;
  --g-warn: #ffd166;
  --g-shadow: 0 12px 40px rgba(0,0,0,0.35);
  --g-shadow2: 0 10px 24px rgba(0,0,0,0.25);
}

/* =========================
   Base
========================= */
.atk-guide{
  color: var(--g-text);
  background: var(--g-bg);
  line-height: 1.75;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.atk-guide a{ color: var(--g-accent2); text-decoration: none; }
.atk-guide a:hover{ text-decoration: underline; }

.atk-guide .container{
  max-width: var(--g-max);
  margin: 0 auto;
  padding: 28px 0 56px;
}

/* =========================
   Hero
========================= */
.atk-hero{
  position: relative;
  border: 1px solid var(--g-border);
  background: linear-gradient(180deg, rgba(22,199,154,0.10), rgba(47,107,255,0.07));
  border-radius: var(--g-radius);
  padding: 26px 22px;
  box-shadow: var(--g-shadow);
  overflow: hidden;
}
:where(.dark, .dark *) .atk-hero{
  background: linear-gradient(180deg, rgba(56,249,192,0.10), rgba(122,168,255,0.06));
}

.atk-hero:before{
  content:"";
  position:absolute;
  inset:-120px -60px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(22,199,154,0.24), rgba(22,199,154,0.00) 70%);
  filter: blur(2px);
}
:where(.dark, .dark *) .atk-hero:before{
  background: radial-gradient(circle at 30% 30%, rgba(56,249,192,0.30), rgba(56,249,192,0.00) 70%);
}

.atk-hero:after{
  content:"";
  position:absolute;
  inset:auto auto -160px -80px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle at 40% 40%, rgba(47,107,255,0.18), rgba(47,107,255,0.00) 70%);
}
:where(.dark, .dark *) .atk-hero:after{
  background: radial-gradient(circle at 40% 40%, rgba(122,168,255,0.26), rgba(122,168,255,0.00) 70%);
}

.atk-badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--g-border);
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(6px);
  color: var(--g-muted);
  font-size: 13px;
  position: relative;
  z-index: 1;
}
:where(.dark, .dark *) .atk-badge{
  background: rgba(0,0,0,0.18);
  backdrop-filter: none;
}

.atk-badge .dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--g-accent);
  box-shadow: 0 0 0 6px rgba(22,199,154,0.16);
}
:where(.dark, .dark *) .atk-badge .dot{
  box-shadow: 0 0 0 6px rgba(56,249,192,0.14);
}

.atk-title{
  margin: 12px 0 10px;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
}
.atk-subtitle{
  margin: 0 0 10px;
  color: var(--g-muted);
  font-size: 18px;
  position: relative;
  z-index: 1;
}
.atk-excerpt{
  margin: 12px 0 0;
  color: var(--g-muted);
  position: relative;
  z-index: 1;
}

/* =========================
   Section
========================= */
.atk-section{
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-border);
  background: var(--g-surface2);
  box-shadow: var(--g-shadow2);
}
.atk-section h3{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.atk-section p{
  margin: 10px 0;
  color: var(--g-muted);
}
.atk-section strong{
  color: var(--g-text);
}

/* =========================
   Cards / Callouts
========================= */
.atk-callout{
  border: 1px solid rgba(22,199,154,0.22);
  background: rgba(22,199,154,0.08);
  border-radius: var(--g-radius2);
  padding: 14px 14px;
  margin-top: 12px;
}
:where(.dark, .dark *) .atk-callout{
  border: 1px solid rgba(56,249,192,0.22);
  background: rgba(56,249,192,0.06);
}

.atk-callout .label{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size: 13px;
  color: rgba(22,199,154,0.95);
  margin-bottom: 6px;
}
:where(.dark, .dark *) .atk-callout .label{
  color: rgba(56,249,192,0.95);
}

.atk-callout .label .icon{
  display: inline-grid;
  place-items: center;

  padding: 4px;              /* ← 아이콘 주변 여백 */
  border-radius: 6px;

  background: rgba(22,199,154,0.14);
  border: 1px solid rgba(22,199,154,0.25);

  font-size: 14px;           /* 이모지 크기 조절 */
  line-height: 1;
}
:where(.dark, .dark *) .atk-callout .label .icon{
  background: rgba(56,249,192,0.14);
  border: 1px solid rgba(56,249,192,0.25);
}

/* =========================
   Lists
========================= */
.atk-list{
  margin: 10px 0 0;
  padding-left: 4px;
  color: var(--g-muted);
}
.atk-list li{ margin: 7px 0; }

/* =========================
   Flow
========================= */
.atk-flow{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.atk-flow .step{
  border: 1px solid var(--g-border);
  background: var(--g-surface);
  border-radius: var(--g-radius2);
  padding: 12px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.atk-flow .n{
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 10px;
  display:grid; place-items:center;
  color: rgba(0,0,0,0.85);
  background: var(--g-accent);
  font-weight: 700;
  font-size: 14px;
}
:where(.dark, .dark *) .atk-flow .n{
  color: rgba(0,0,0,0.85);
}

.atk-flow .t{
  margin: -2px 0 0;
  color: var(--g-text);
  font-weight: 650;
}
.atk-flow .d{
  margin: 2px 0 0;
  color: var(--g-muted);
  font-size: 14px;
}

/* =========================
   Grade grid
========================= */
.atk-grade-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
.atk-grade{
  border: 1px solid var(--g-border);
  background: var(--g-surface);
  border-radius: var(--g-radius2);
  padding: 14px 14px;
}
.atk-grade .tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  color: var(--g-muted);
  margin-bottom: 8px;
}
.atk-grade .tag .pill{
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--g-border);
  background: var(--g-surface2);
  color: var(--g-text);
}
.atk-grade h4{
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--g-text);
}
.atk-grade ul{
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--g-muted);
}

/* =========================
   Step blocks
========================= */
.atk-step{
  margin-top: 14px;
  padding: 16px 16px;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-border);
  background: var(--g-surface2);
}
.atk-step .kicker{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 8px;
}
.atk-step .kicker .chip{
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(22,199,154,0.12);
  border: 1px solid rgba(22,199,154,0.24);
  color: rgba(22,199,154,0.95);
}
:where(.dark, .dark *) .atk-step .kicker .chip{
  background: rgba(56,249,192,0.12);
  border: 1px solid rgba(56,249,192,0.24);
  color: rgba(56,249,192,0.95);
}

.atk-step .kicker .name{
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--g-text);
}
.atk-step h5{
  margin: 12px 0 6px;
  font-size: 14px;
  color: var(--g-text);
  letter-spacing: -0.01em;
}
.atk-step p, .atk-step li{
  color: var(--g-muted);
}

.atk-two-col{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
.atk-box{
  border: 1px solid var(--g-border);
  background: var(--g-surface);
  border-radius: var(--g-radius2);
  padding: 12px 12px;
}

/* =========================
   Quote
========================= */
.atk-quote{
  margin-top: 14px;
  border-left: 3px solid var(--g-accent);
  padding: 10px 12px;
  background: rgba(22,199,154,0.08);
  border-radius: 12px;
  color: var(--g-text);
}
:where(.dark, .dark *) .atk-quote{
  background: rgba(56,249,192,0.06);
}

/* =========================
   CTA
========================= */
.atk-cta{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.atk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(22,199,154,0.28);
  background: rgba(22,199,154,0.12);
  color: var(--g-text);
  font-weight: 650;
  text-decoration: none;
}
.atk-btn:hover{
  background: rgba(22,199,154,0.18);
  text-decoration:none;
}
:where(.dark, .dark *) .atk-btn{
  border: 1px solid rgba(56,249,192,0.28);
  background: rgba(56,249,192,0.14);
}

.atk-btn.secondary{
  border: 1px solid rgba(47,107,255,0.24);
  background: rgba(47,107,255,0.10);
  color: var(--g-text);
}
.atk-btn.secondary:hover{
  background: rgba(47,107,255,0.16);
}
:where(.dark, .dark *) .atk-btn.secondary{
  border: 1px solid rgba(122,168,255,0.28);
  background: rgba(122,168,255,0.14);
}

/* =========================
   Responsive
========================= */
@media (min-width: 860px){
  .atk-hero{ padding: 30px 28px; }
  .atk-title{ font-size: 38px; }
  .atk-flow{ grid-template-columns: 1fr 1fr; }
  .atk-grade-grid{ grid-template-columns: 1fr 1fr 1fr; }
  .atk-two-col{ grid-template-columns: 1fr 1fr; }
}

/* =========================
   Helper classes
========================= */
.text-primary-500{ color: var(--g-accent) !important; }
.btn-xs.btn-green{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(22,199,154,0.24);
  background: rgba(22,199,154,0.12);
  color: rgba(22,199,154,0.98);
  display:inline-block;
}
:where(.dark, .dark *) .btn-xs.btn-green{
  border: 1px solid rgba(56,249,192,0.24);
  background: rgba(56,249,192,0.12);
  color: rgba(56,249,192,0.98);
}