/* =========================================
   Culture Detail ? Soft & Airy
   (same class names, softer type & spacing)
   ========================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg:#f7f8fc;
  --panel:#ffffff;
  --panel-weak:#fbfcff;
  --text:#0f172a;
  --text-dim:#6b7280;
  --border:#e8ecf3;
  --primary:#3b82f6;    /* Á» ´õ ¹à°í °æÄèÇÑ ºí·ç */
  --primary-600:#2563eb;
  --ring:rgba(59,130,246,.18);
  --shadow:0 14px 34px rgba(15,23,42,.06), 0 2px 10px rgba(15,23,42,.04);
  --radius:18px;
  --radius-sm:14px;
}

/* OS ´ÙÅ©¸ðµå ´ëÀÀ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --panel:#0f172a;
    --panel-weak:#0e1526;
    --text:#e5e7eb;
    --text-dim:#a3b0c2;
    --border:#1b2433;
    --shadow:0 16px 40px rgba(0,0,0,.45), 0 3px 12px rgba(0,0,0,.28);
    --ring:rgba(59,130,246,.28);
  }
}

/* ---------- Global Type (ºÎµå·¯¿î ÆùÆ® ´À³¦) ---------- */
.cd-page, .cd-card, .cd-hero, .btn, .kv-val, .cd-prose{
  font-family: "Pretendard Variable","Inter","Noto Sans KR","Apple SD Gothic Neo",
               system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:-0.2px;  /* ÀÚ°£ »ì¦ Á¼Çô¼­ µüµüÇÔ ¿ÏÈ­ */
}

/* ---------- Page ---------- */
.cd-page{
  max-width:1080px;
  margin:28px auto 80px;
  padding:0 18px;
  color:var(--text);
  background:var(--bg);
}

/* ---------- Buttons (µÕ±Û°í °¡º­¿î ´À³¦) ---------- */
/* ---------- Buttons (µÕ±Û°í °¡º­¿î ´À³¦) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:12px;
  background:var(--panel-weak); color:var(--text-dim);   /* ±ÛÀÚ»ö ¿¬ÇÏ°Ô */
  border:1px solid var(--border);
  font-weight:600; font-size:.85rem;  /* Á¶±Ý ÀÛ°Ô */
  text-decoration:none; cursor:pointer; transition:.2s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  position : relative;
  top:5px;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.04); }

.btn.primary{
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#fff; border-color:transparent;
  box-shadow:0 10px 22px rgba(59,130,246,.24);
  font-size:.9rem; font-weight:700;   /* °­Á¶ ¹öÆ°Àº Á¶±Ý ´õ Å©°í ¼±¸íÇÏ°Ô */
}


/* ---------- Top / Bottom actions ---------- */
.cd-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:6px 0 14px;
}
.cd-actions{ display:flex; gap:8px; }

/* ---------- Hero (´õ °ø±â°¨ ÀÖ°Ô) ---------- */
.cd-hero{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow);
}
.cd-hero__bg{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:420px;
  background:
    radial-gradient(900px 420px at 70% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg,#fafdff, var(--panel));
}
.cd-hero__bg img{
  max-width:min(540px,90%); max-height:400px; object-fit:contain; border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  animation:floatIn .6s ease both;
}
@keyframes floatIn{
  from{ transform:translateY(6px) scale(.985); opacity:.0 }
  to  { transform:translateY(0)   scale(1);     opacity:1  }
}

.cd-hero__body{
  padding:18px 20px 22px; border-top:1px solid var(--border);
  background:linear-gradient(180deg, var(--panel), var(--panel-weak));
}
.cd-hero__sub{
  color:var(--text-dim); font-weight:700; letter-spacing:.1px; margin-bottom:6px;
}
.cd-hero__title{
  font-size:1.9rem; line-height:1.28; letter-spacing:-.3px; margin:0;
  font-weight:800;  /* ŸÀÌƲÀº ±½Áö¸¸ µÕ±Ù ÆùÆ®¶ó ºÎµå·´°Ô º¸ÀÓ */
}

/* ---------- Card ---------- */
.cd-card{
  margin-top:14px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.cd-card__head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:linear-gradient(180deg,var(--panel-weak), var(--panel));
  border-bottom:1px solid var(--border);
}
.cd-card__title{ margin:0; font-size:1.04rem; }

/* º»¹® Æеù »ì¦ ´Ã·Á ¿©¹é°¨ */
.cd-detail{ padding:20px; }

/* ---------- Key/Value Grid (´õ ºÎµå·¯¿î Ĩ ´À³¦) ---------- */
.cd-detail__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width:760px){ .cd-detail__grid{ grid-template-columns:1fr; } }

.cd-kv{
  padding:14px; border:1px solid var(--border); border-radius:14px;
  background:
    linear-gradient(180deg, rgba(148,163,184,.07), transparent 70%),
    linear-gradient(180deg, #f7fbff, var(--panel-weak));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.kv-key{
  font-weight:800; color:var(--text-dim); margin-bottom:6px;
  letter-spacing:.1px;
}
.kv-val{
  color:var(--text); word-break:keep-all; line-height:1.7;
}

/* ---------- Prose (¹®´Ü °¡µ¶¼º ¾÷) ---------- */
.cd-prose{
  white-space:pre-line; line-height:1.85; font-size:1.02rem; color:var(--text);
}

/* ---------- Links ---------- */
.cd-link, .cd-prose a, .kv-val a{
  color:var(--primary); text-decoration:underline; text-underline-offset:2px;
}
.cd-link:hover, .cd-prose a:hover, .kv-val a:hover{ color:var(--primary-600); }

/* ---------- Empty ---------- */
.cd-empty{
  max-width:960px; margin:40px auto; padding:24px;
  border:1px dashed var(--border); border-radius:14px; color:var(--text-dim);
  background:var(--panel);
}