/* ========== Reset & Base ========== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f4f4f4;
  color: #111827;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== Design Tokens ========== */
:root {
  --ok:#10b981; --warn:#f59e0b; --down:#ef4444; --muted:#6b7280;
  --text:#111827; --bg:#f5f6f8; --card:#ffffff; --border:#e5e7eb;
  --brand:#3b82f6; --brand-dark:#2563eb; --brand-darker:#1d4ed8; --brand-contrast:#ffffff;
  --focus:#4f46e5;
}

@media (prefers-color-scheme: dark){
  :root{
    --text:#e5e7eb; --bg:#0b0c0f; --card:#0f1115; --border:#1f2937; --muted:#9ca3af;
    --brand:#3b82f6; --brand-dark:#2563eb; --brand-darker:#1d4ed8; --brand-contrast:#ffffff;
  }
}

/* ========== Layout ========== */
.container{ max-width:1100px; margin:0 auto; padding:20px; }
.center-box{ display:flex; justify-content:center; align-items:center; min-height:60vh; }

/* ========== Navbar (PHOTO BACKGROUND) ========== */
.nav{
  position: sticky; top: 0; z-index: 1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 24px;
  min-height:64px;
  background: url("/static/images/banners/nav.png") center/cover no-repeat;
  border-bottom: none;
}
.nav::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0.28)
  );
  pointer-events:none;
}
.nav > *{ position:relative; z-index:1; }

.nav .nav-left{ display:flex; align-items:center; gap:10px; }
.nav .right{ display:flex; align-items:center; gap:20px; }

.nav .brand{
  color:#fff; font-size:20px; font-weight:bold;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
}
.nav a{
  text-decoration:none; font-size:16px;
  padding:6px 10px; border-radius:8px;
  color:#fff; transition: background .15s ease, color .15s ease;
}
.nav a:hover{ background: rgba(255,255,255,.16); }
.nav a.active{ background: rgba(255,255,255,.25); font-weight:700; }

/* ========== Buttons (통일) ========== */
.btn-primary,
.btn--primary{
  display:inline-block; text-align:center; padding:10px 14px;
  border-radius:12px; font-weight:700;
  background: var(--brand); color: var(--brand-contrast);
  border:none; cursor:pointer;
  transition: background .2s ease, transform .15s ease;
  text-decoration:none;
}
.btn-primary:hover,
.btn--primary:hover{ background: var(--brand-dark); transform: translateY(-1px); }
.btn-primary:active,
.btn--primary:active{ background: var(--brand-darker); transform: translateY(0); }

/* 보조 버튼 */
.btn--ghost{
  display:inline-block; padding:10px 14px; border-radius:12px; font-weight:600;
  background:#fff; color:var(--brand); border:1px solid var(--brand);
  transition: background .2s ease, color .2s ease; text-decoration:none;
}
.btn--ghost:hover{ background:#f1f5ff; color:#1e40af; }

/* ========== Card (전역) ========== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.card--link{
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#111; font-weight:bold;
  transition:.2s; background:#f9f9f9; border-color:#ddd;
}
.card--link:hover{ background:#eee; }

/* ========== Forms ========== */
.form-card{
  width:100%; max-width:420px; background:var(--card);
  padding:20px; border-radius:10px; border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="number"]{
  width:100%; padding:10px; border:1px solid var(--border);
  border-radius:8px; background:#fff; color:var(--text);
}
.form-card input:focus-visible{
  outline:none; border-color:var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}

/* ========== Features ========== */
.features{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px; padding:40px 20px; background:#f5f5f5;
}
.feature{ max-width:320px; margin:0 auto; text-align:center; }

/* ========== Status Card (간단 요약용) ========== */
.status-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.status-summary{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:16px;
}
.kv{
  background:color-mix(in srgb, var(--border) 20%, transparent);
  border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
}
.kv .label{ color:var(--muted); font-weight:600; }
.kv .value{ font-weight:700; color:var(--text); }

/* ========== Wallet (페이지 전용) ========== */
.wallet-container{
  max-width:600px; margin:30px auto;
  background:#fff; border-radius:12px; padding:20px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.wallet-container h2{
  font-size:20px; margin-bottom:16px;
  color:#222; text-align:center;
}
.wallet-table{ width:100%; border-collapse:collapse; }
.wallet-table th,.wallet-table td{
  border:1px solid #ddd; padding:12px; text-align:center;
}
.wallet-table th{ background:#f9fafb; font-weight:bold; }

/* ========== Shared footer frame ========== */
.footer{
  box-sizing:border-box;
  width:min(1200px,calc(100% - 40px));
  min-height:108px;
  margin:28px auto 20px;
  padding:30px 34px!important;
  display:grid;
  place-items:center;
  border:1px solid #d9c8b2!important;
  border-radius:18px;
  background:repeating-linear-gradient(3deg,rgba(151,108,64,.025) 0 1px,transparent 1px 10px),linear-gradient(145deg,#fff 0%,#fdfaf4 62%,#f6ecde 100%)!important;
  box-shadow:0 12px 30px rgba(101,74,44,.1),inset 0 0 0 5px rgba(255,255,255,.72),inset 0 0 0 6px rgba(159,118,74,.14);
  color:#655746!important;
}
.footer-copy{width:100%;max-width:960px;margin:0;text-align:center;white-space:pre-line;overflow-wrap:anywhere;line-height:1.75;letter-spacing:.01em}

/* ========== Home: HERO (배너 + 소개) ========== */
.hero{ margin:20px 0; background:none; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.banner{
  background:#fff; border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.05); position:relative;
}
.banner-cinematic{width:100%;min-height:clamp(420px,48vw,620px);isolation:isolate;background:#068eb2}
.hero-scene{position:absolute;inset:-4%;z-index:0;background-position:center;background-size:cover;will-change:transform,opacity}
.hero-scene-aerial{background-image:url("/static/images/banners/maridia-aerial-v1.png");animation:maridiaAerial 32s cubic-bezier(.35,0,.2,1) infinite}
.hero-scene-surface{background-image:url("/static/images/banners/maridia.png");opacity:0;animation:maridiaSurface 32s cubic-bezier(.35,0,.2,1) infinite}
.hero-scene-underwater{background-image:url("/static/images/banners/maridia-territory-flight-v2.png");opacity:0;animation:maridiaUnderwater 32s cubic-bezier(.18,.72,.22,1) infinite;transform-origin:50% 58%}
.hero-territory-grid{position:absolute;z-index:1;left:-35%;right:-35%;bottom:-72%;height:118%;opacity:0;transform-origin:50% 100%;transform:perspective(420px) rotateX(63deg) scale(1.35);background-image:linear-gradient(rgba(69,231,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(69,231,255,.42) 1px,transparent 1px);background-size:62px 62px;filter:drop-shadow(0 0 6px rgba(0,221,255,.65));mix-blend-mode:screen;animation:maridiaTerritoryFlight 32s linear infinite;pointer-events:none}
.hero-scan-beam{position:absolute;z-index:1;inset:0;opacity:0;background:linear-gradient(180deg,transparent 14%,rgba(92,241,255,.08) 38%,rgba(92,241,255,.48) 49%,rgba(92,241,255,.08) 52%,transparent 76%);mix-blend-mode:screen;animation:maridiaScan 32s ease-in-out infinite;pointer-events:none}
.hero-data-lights{position:absolute;z-index:1;inset:35% 5% 4%;opacity:0;background:radial-gradient(circle at 12% 68%,#8ffaff 0 2px,transparent 4px),radial-gradient(circle at 30% 42%,#55eaff 0 3px,transparent 6px),radial-gradient(circle at 51% 74%,#d3ffff 0 2px,transparent 5px),radial-gradient(circle at 68% 38%,#62eeff 0 3px,transparent 6px),radial-gradient(circle at 85% 66%,#96f8ff 0 2px,transparent 5px);filter:drop-shadow(0 0 7px #36e8ff);animation:maridiaDataFlight 32s linear infinite;pointer-events:none}
.hero-wave-light{position:absolute;inset:45% -15% -15%;z-index:1;opacity:.2;background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 14px,#d8ffff80 16px 18px,transparent 21px 34px);mix-blend-mode:screen;filter:blur(1px);animation:maridiaWaves 16s linear infinite;pointer-events:none}
@keyframes maridiaAerial{0%,11%{opacity:1;transform:scale(1.03) translate3d(0,-1%,0)}23%{opacity:0;transform:scale(1.4) translate3d(0,7%,0)}94%,100%{opacity:1;transform:scale(1.03) translate3d(0,-1%,0)}}
@keyframes maridiaSurface{0%,9%{opacity:0;transform:scale(1.08)}19%,27%{opacity:1;transform:scale(1.3) translate3d(0,7%,0)}36%,100%{opacity:0;transform:scale(1.58) translate3d(0,13%,0)}}
@keyframes maridiaUnderwater{0%,22%{opacity:0;transform:scale(1) translate3d(0,-6%,0)}34%{opacity:1;transform:scale(1.08) translate3d(0,-2%,0)}78%{opacity:1;transform:scale(1.78) translate3d(0,11%,0)}91%,100%{opacity:0;transform:scale(2.25) translate3d(0,17%,0)}}
@keyframes maridiaTerritoryFlight{0%,32%{opacity:0;background-position:0 0}42%{opacity:.3;background-position:0 0}52%,76%{opacity:.82;background-position:0 430px}84%,100%{opacity:0;background-position:0 820px}}
@keyframes maridiaScan{0%,38%{opacity:0;transform:translateY(-45%)}48%,76%{opacity:.75;transform:translateY(38%)}85%,100%{opacity:0;transform:translateY(85%)}}
@keyframes maridiaDataFlight{0%,37%{opacity:0;transform:scale(.75) translateY(-18%)}48%{opacity:.65}76%{opacity:1;transform:scale(1.75) translateY(16%)}85%,100%{opacity:0;transform:scale(2.2) translateY(25%)}}
@keyframes maridiaWaves{from{transform:translate3d(-3%,0,0) scale(1.05)}50%{transform:translate3d(3%,2%,0) scale(1.1)}to{transform:translate3d(-3%,0,0) scale(1.05)}}
.banner img{
  display:block; width:100%; height:260px; object-fit:cover; background:#f9fafb;
}
.banner-title{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  margin:0; color:#ffffff; text-shadow:0 2px 8px rgba(0,0,0,0.45);
  font-weight:800; letter-spacing:2px;
  font-size: clamp(28px, 5vw, 56px);
  z-index:2;
  will-change:transform,opacity,letter-spacing;
  animation:maridiaTitlePan 32s cubic-bezier(.35,0,.2,1) infinite;
}
@keyframes maridiaTitlePan{
  0%,66%{transform:translate3d(0,10%,0) scale(.72);opacity:0;letter-spacing:2px}
  76%{transform:translate3d(0,0,0) scale(1);opacity:1;letter-spacing:8px}
  86%{transform:translate3d(0,-2%,0) scale(1.12);opacity:1;letter-spacing:12px}
  96%,100%{transform:translate3d(0,-12%,0) scale(1.42);opacity:0;letter-spacing:18px}
}
@media(prefers-reduced-motion:reduce){.hero-scene,.hero-wave-light,.hero-territory-grid,.hero-scan-beam,.hero-data-lights,.banner-title{animation:none}.hero-scene-aerial{opacity:1}.hero-scene-surface,.hero-scene-underwater,.hero-territory-grid,.hero-scan-beam,.hero-data-lights{opacity:0}}

.intro-card{
  position:relative;
  background:
    repeating-linear-gradient(3deg,rgba(151,108,64,.025) 0 1px,transparent 1px 10px),
    linear-gradient(145deg,#fff 0%,#fdfaf4 62%,#f6ecde 100%)!important;
  color:#1e293b; border:1px solid #d9c8b2;
  border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 14px 32px rgba(101,74,44,.11),inset 0 0 0 5px rgba(255,255,255,.72),inset 0 0 0 6px rgba(159,118,74,.14);
}
.intro-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(166,125,79,.22);border-radius:10px;pointer-events:none}
.intro-card>*{position:relative;z-index:1}
.intro-card h2{ color:#111827; }
.intro-card p{ color:#334155; }
.intro-list li{ color:#475569; }
.intro-actions{ display:flex; gap:10px; margin-top:4px; }
.intro-actions a{ text-decoration:none; }

/* ========== About: premium framed content ========== */
.about-frame{
  position:relative;
  padding:clamp(24px,4vw,48px);
  border:1px solid #b7d4dc;
  border-radius:18px;
  background:linear-gradient(145deg,#ffffff 0%,#f8fcfd 52%,#eef8fa 100%);
  box-shadow:0 18px 45px rgba(10,75,94,.12),inset 0 0 0 6px #fff,inset 0 0 0 7px rgba(55,145,166,.22);
}
.about-frame::before{
  content:"";position:absolute;inset:12px;border:1px solid rgba(77,155,174,.3);
  border-radius:11px;pointer-events:none;
}
.about-frame> *{position:relative;z-index:1}
.about-register-action{margin-top:22px}
.about-register-btn{width:auto!important;min-width:0!important;padding:7px 13px!important;border-radius:8px!important;font-size:13px!important;line-height:1.25!important}

/* ========== Board preview (공지/자유) ========== */
.board-section{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.board{
  border:1px solid #ddd; border-radius:10px;
  padding:16px; background:#fff;
}
.board h2{ margin-bottom:10px; }
.board ul{ list-style:none; padding:0; margin:0; text-align:left; }
.board ul li{ margin:6px 0; }
.board ul li a{ text-decoration:none; color:#333; }
.board ul li a:hover{ text-decoration:underline; }
.board-more{ display:inline-block; margin-top:6px; font-size:12px; color:var(--brand); }

/* ========== Responsive ========== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .board-section{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .nav{ min-height:56px; }
}

/* ========== 실사 네비게이션 ===== */
.nav--photo {
  position: relative;
  background: url("/static/images/banners/nav.png") center/cover no-repeat;
  min-height: 64px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px; color: #ffffff; border-bottom: none;
}
.nav--photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.48) 0%,
    rgba(15, 23, 42, 0.44) 100%
  );
  z-index: 0;
}.nav--photo > * { position: relative; z-index: 1; }
.nav--photo .brand {
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.nav--photo a {
  color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 8px;
}
.nav--photo a:hover { background: rgba(255,255,255,0.15); }
/* ====== 전역 버튼 공통 스타일 ====== */
button,
.btn,
.btn-primary,
.btn--primary {
  background-image: url("/static/images/banners/nav.png");
  background-size: cover;
  background-position: center;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  transition: filter .15s ease, transform .15s ease;
}

/* 호버/클릭 효과 */
button:hover,
.btn:hover,
.btn-primary:hover,
.btn--primary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
button:active,
.btn:active,
.btn-primary:active,
.btn--primary:active {
  filter: brightness(0.9);
  transform: translateY(0);
}
/* ===== 공통 버튼 스타일 (모든 버튼/링크버튼 적용) ===== */
button,
input[type="submit"],
a.btn,
.btn,
.btn-primary,
.btn--primary {
  display: inline-block;
  background-image: url("/static/images/banners/nav.png");
  background-size: cover;
  background-position: center;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  transition: filter .15s ease, transform .15s ease;
  text-decoration: none; /* a 태그 밑줄 제거 */
}
/* ===== [FINAL OVERRIDE] 공통 버튼: 실사(nav.png) 강제 적용 ===== */
/* a.btn, .btn, .btn-primary, button, submit 모두 한 번에 */
button,
input[type="submit"],
a.btn,
.btn,
.btn-primary {
  display: inline-block;
  background-image: url("/static/images/banners/nav.png") !important;
  background-size: cover !important;
  background-position: center !important;
  /* 이전 배경/색 지정 무력화 */
  background-color: transparent !important;
  color: #fff !important;

  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: filter .15s ease, transform .12s ease;
}

button:hover,
input[type="submit"]:hover,
a.btn:hover,
.btn:hover,
.btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* ===== 중앙 정렬 유틸 ===== */
.text-center { text-align: center !important; }

/* QnA 잠금 섹션: 안내문/버튼 중앙 정렬 */
.qna-locked { text-align: center !important; }
.qna-locked .btn { display: inline-block; min-width: 120px; }

.btn-link{
  display:inline-block; padding:6px 10px; border-radius:8px;
  text-decoration:none; border:1px solid #e5e7eb;
}
.btn-link:hover{ background:#f9fafb; }
/* ── Toolbar: photo(실사) 배경만 톤 조정 ───────────────────────── */
/* 텍스트/링크/버튼 스타일은 그대로 두고, 사진 위에만 얇게 색 필름을 올립니다. */
.nav.nav--photo {
  position: sticky; /* 기존 레이아웃 영향 X */
  background: transparent; /* 배경 이미지는 바깥에서 깔린다고 가정 */
}
.nav.nav--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  /* ▼ 여기만 조절하면 됩니다 (색/진하기) */
  /* 살짝 블루 네이비 계열로 덮기: 진하기는 마지막 a값(0.38~0.55 추천) */
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.64) 0%,
    rgba(15, 23, 42, 0.60) 100%
  );
  /* 살짝 선명하게 */
  backdrop-filter: saturate(120%);
  z-index: 0;
}
/* 내용은 오버레이 위로 */
.nav.nav--photo > * {
  position: relative;
  z-index: 1;
}
.nav--photo::before {
  content:""; position:absolute; inset:0; z-index:0;

  /* 버튼색을 그대로 쓰되, 사진 위에서 보이도록 살짝 어둡게 + 반투명 */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 82%, black) 0%,
    color-mix(in srgb, var(--accent) 78%, black) 100%
  );
  opacity: .88; /* 진하기 조절: .80 ~ .92에서 미세조정 */
}
.nav--photo > * { position:relative; z-index:1; }
/* === NAV 텍스트 선명도 강화 (배경/레이아웃 건드리지 않음) === */
.nav .brand,
.nav a {
  color: #fff !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 로고 더 또렷하게 */
.nav .brand {
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 0 1px rgba(0,0,0,.85);
  -webkit-text-stroke: 0.35px rgba(0,0,0,.35); /* 지원 브라우저에서만 가볍게 윤곽 */
}

/* 메뉴 텍스트 선명도 업 */
.nav a {
  font-weight: 700;
  text-shadow:
    0 1px 3px rgba(0,0,0,.55),
    0 0 8px rgba(0,0,0,.28);
}

/* 선택(활성) 항목은 아주 살짝 더 도드라지게 */
.nav a.active {
  text-shadow:
    0 1px 3px rgba(0,0,0,.65),
    0 0 10px rgba(0,0,0,.32);
}