/* Roy — Neo-Hanok Neumorphism (shared) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Serif+KR:wght@500;600;700&display=swap");

:root {
  --bg: #f9f7f2;
  --bg-deep: #f3efe6;
  --surface: #faf7f0;
  --text: #2c2c2c;
  --text-muted: #6a645a;
  --ink: #2c2c2c;
  --ink-muted: #6a645a;
  --accent: #2f7d8c;
  --accent-soft: #5c93a8;
  --jade: #3e8f81;
  --wood: #8b7355;
  /* 단청에서 뽑은 채도 낮은 팔레트 */
  --dan-azur: #4a7eae;
  --dan-vermilion: #b85c5c;
  --dan-amber: #c9a227;
  --dan-teal: #3d8a74;
  --dan-stone: #b8a892;
  --shadow-dark: rgba(168, 156, 134, 0.38);
  --shadow-light: rgba(255, 255, 255, 0.92);
  --radius-lg: 28px;
  --radius-md: 24px;
  --radius-sm: 18px;
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-serif: "Noto Serif KR", "Apple SD Gothic Neo", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--text);
  background-color: var(--bg);
  position: relative;
}

/* 한지: 부드러운 빛 + 아주 옅은 종이 섬유·얼룩 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 255, 255, 0.72), transparent 55%),
    radial-gradient(ellipse 90% 60% at 100% 100%, rgba(62, 143, 129, 0.08), transparent 50%),
    radial-gradient(circle at 18% 42%, rgba(44, 44, 44, 0.028) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 68%, rgba(44, 44, 44, 0.022) 0 1px, transparent 2px),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 55%, #efe9dd 100%);
  background-size:
    auto,
    auto,
    140px 160px,
    200px 220px,
    auto;
}

/* 창호 격자 + 대각 실루엣 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.072;
  background:
    repeating-linear-gradient(90deg, rgba(44, 44, 44, 0.92) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, rgba(44, 44, 44, 0.92) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      rgba(44, 44, 44, 0.06) 14px 15px,
      transparent 15px 28px
    );
}

.page-frame {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding-bottom: 3rem;
}

/* 마당: 좌우로 살짝 어두워지는 둘레 */
.page-frame::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 0 62%, rgba(139, 115, 85, 0.045) 100%);
}

/* 상단: 단청 띠 + 기와 물결 */
.hanok-header {
  position: relative;
  z-index: 2;
  width: 100%;
}

.dancheong-strip {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--dan-azur) 0%,
    var(--dan-azur) 12%,
    var(--dan-vermilion) 12%,
    var(--dan-vermilion) 24%,
    var(--dan-amber) 24%,
    var(--dan-amber) 36%,
    var(--dan-teal) 36%,
    var(--dan-teal) 48%,
    var(--dan-stone) 48%,
    var(--dan-stone) 60%,
    rgba(184, 168, 146, 0.35) 60%,
    rgba(184, 168, 146, 0.2) 100%
  );
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.giwa-scallop {
  height: 20px;
  background-color: #d4c4ae;
  background-image:
    radial-gradient(circle at 50% 0, #e8dfd0 52%, transparent 53%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 26px);
  background-size: 26px 13px, auto;
  background-repeat: repeat-x;
  background-position: center top;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.1),
    0 6px 14px rgba(130, 118, 98, 0.18);
}

.giwa-scallop::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: -1px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.07), transparent);
  pointer-events: none;
}

/* 구버전 단일 띠 */
.giwa-band {
  height: auto;
  background: none;
  opacity: 1;
  box-shadow: none;
}

.shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.35rem 1.25rem 0;
  position: relative;
  z-index: 1;
}

.neu-flat,
.neu-pressed,
.neu-btn {
  position: relative;
  overflow: hidden;
}

.neu-flat::after,
.neu-pressed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.055;
  background:
    repeating-linear-gradient(0deg, rgba(44, 44, 44, 0.95) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(44, 44, 44, 0.95) 0 1px, transparent 1px 20px);
}

.neu-flat {
  background: linear-gradient(155deg, #fdfbf6, #f0ebe0);
  border-radius: var(--radius-lg);
  box-shadow:
    14px 14px 28px var(--shadow-dark),
    -12px -12px 28px var(--shadow-light);
  border: 1px solid rgba(139, 115, 85, 0.12);
}

.neu-pressed {
  background: linear-gradient(155deg, #f5f0e6, #ebe4d8);
  border-radius: var(--radius-md);
  box-shadow:
    inset 7px 7px 16px rgba(168, 156, 134, 0.38),
    inset -6px -6px 16px rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(139, 115, 85, 0.08);
}

.neu-btn {
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--text);
  background: linear-gradient(155deg, #fbf7ef, #ebe4d6);
  border-radius: var(--radius-md);
  box-shadow:
    9px 9px 20px var(--shadow-dark),
    -6px -6px 18px var(--shadow-light);
  transition: box-shadow 0.2s ease, transform 0.15s ease, color 0.15s ease;
  border: 1px solid rgba(139, 115, 85, 0.1);
}

.neu-btn:hover {
  color: var(--accent);
}

.neu-btn:active {
  box-shadow:
    inset 4px 4px 12px rgba(160, 148, 128, 0.4),
    inset -3px -3px 10px rgba(255, 255, 255, 0.9);
  transform: scale(0.985);
}

.neu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.serif {
  font-family: var(--font-serif);
}

.accent-text {
  color: var(--accent);
}

.corner-ornament {
  position: relative;
}

.corner-ornament::before,
.corner-ornament::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  border-radius: 2px;
}

.corner-ornament::before {
  top: 11px;
  left: 11px;
  border-top: 2px solid rgba(139, 115, 85, 0.42);
  border-left: 2px solid rgba(139, 115, 85, 0.42);
  border-right: none;
  border-bottom: none;
  box-shadow:
    5px 5px 0 0 rgba(139, 115, 85, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.corner-ornament::after {
  bottom: 11px;
  right: 11px;
  border-bottom: 2px solid rgba(139, 115, 85, 0.42);
  border-right: 2px solid rgba(139, 115, 85, 0.42);
  border-left: none;
  border-top: none;
  box-shadow:
    -5px -5px 0 0 rgba(139, 115, 85, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.pillar-accent {
  position: relative;
  padding-left: 1.05rem;
}

.pillar-accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--jade), var(--accent));
  opacity: 0.88;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.section-head h2 {
  position: relative;
  padding-bottom: 0.5rem;
}

.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.25rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jade), var(--accent), var(--dan-amber));
  opacity: 0.92;
}

/* 플랫폼 상단 h1 — 섹션과 동일한 강조 */
.title-block h1 {
  position: relative;
  padding-bottom: 0.5rem;
}

.title-block h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.25rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jade), var(--accent), var(--dan-amber));
  opacity: 0.92;
}