/* ============================================================
   MyCoin 데모 랜딩 — v4 (라이트 테마)
   nav / footer(바깥)는 css/style.css(마이코인소프트 본 사이트)를 그대로 쓰고,
   .demo-frame 안쪽은 이 파일로 스타일링되는 "MyCoinLanding" 샘플 사이트입니다.
   -- 클래스명은 이전 버전(dk- 접두어)과 동일하게 유지해 구조를 재사용했고,
      색상 값만 밝은 톤으로 전면 교체했습니다.
============================================================ */

:root {
  --dk-bg: #FBFDFC;
  --dk-bg-alt: #F1F6F4;
  --dk-panel: #FFFFFF;
  --dk-panel-border: rgba(20, 40, 35, 0.09);
  --dk-line: rgba(20, 40, 35, 0.09);
  --dk-purple: #14A87F;
  --dk-blue: #2F8FE0;
  --dk-cyan: #17B8A6;
  --dk-gold: #C08A1E;
  --dk-text: #16241F;
  --dk-text-mute: #5B6B65;
  --dk-text-faint: #8C9A94;
  --dk-danger: #E5484D;
  --dk-success: #1D9A6C;
}

.demo-notice {
  background: #103B31; color: #D9F5EC; font-size: 12.5px; text-align: center; padding: 9px 16px;
}
.demo-notice b { color: #6FE3C4; }

/* ---------------- Outer frame ---------------- */
.demo-frame-section { background: var(--bg-alt, #FFFBF0); padding: 56px 0; }
.demo-frame-section .demo-caption { text-align: center; font-size: 13px; color: var(--text-faint, #8C7F55); margin: 0 0 20px; }

.demo-frame {
  max-width: 1180px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 30px 60px -30px rgba(30, 20, 5, 0.25);
}
.demo-frame-bar { background: #EDF3F1; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--dk-line); }
.demo-frame-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.demo-frame-bar .dot.r { background: #FF6B6B; }
.demo-frame-bar .dot.y { background: #FFC24B; }
.demo-frame-bar .dot.g { background: #4FE3A1; }
.demo-frame-bar .frame-url {
  margin-left: 8px; font-family: var(--font-display); font-size: 12px; color: var(--dk-text-faint);
  background: #FFFFFF; border: 1px solid var(--dk-line); padding: 4px 12px; border-radius: 100px;
}

.demo-app { background: var(--dk-bg); color: var(--dk-text); font-family: var(--font-kr); }
.demo-wrap-inner { max-width: 980px; margin: 0 auto; padding: 0 28px; }

/* ---------------- Inner nav (MyCoinLanding) ---------------- */
.inner-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--dk-line); flex-wrap: wrap; gap: 12px;
  background: #FFFFFF;
}
.inner-logo { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; display: flex; align-items: center; gap: 8px; }
.inner-logo .dotc { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(100deg, var(--dk-purple), var(--dk-cyan)); }
.inner-menu { display: flex; gap: 20px; font-size: 13px; color: var(--dk-text-mute); flex-wrap: wrap; }
.inner-menu a:hover { color: var(--dk-text); }
.inner-auth { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.inner-auth a, .inner-auth button {
  background: #F1F6F4; border: 1px solid var(--dk-line); color: var(--dk-text);
  padding: 7px 15px; border-radius: 100px; font-size: 12.5px;
}
.inner-auth .primary { background: linear-gradient(100deg, var(--dk-purple), var(--dk-cyan)); border: none; color: #fff; }
.inner-auth span.who { color: var(--dk-text-mute); }

/* ---------------- Hero ---------------- */
.demo-hero { position: relative; overflow: hidden; padding: 66px 0 50px; text-align: center; }
.demo-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 620px 420px at 15% 0%, rgba(20,168,127,0.14), transparent 60%),
    radial-gradient(ellipse 620px 420px at 88% 15%, rgba(47,143,224,0.12), transparent 60%),
    radial-gradient(ellipse 520px 420px at 50% 105%, rgba(23,184,166,0.10), transparent 65%);
  pointer-events: none;
}
.demo-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: radial-gradient(circle, rgba(20,40,35,0.07) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 700px 380px at 50% 30%, black, transparent 70%);
}
.demo-hero .demo-wrap { position: relative; max-width: 640px; margin: 0 auto; padding: 0 24px; }
.demo-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dk-cyan); background: rgba(23,184,166,0.08); border: 1px solid rgba(23,184,166,0.28);
  padding: 6px 14px; border-radius: 100px; margin-bottom: 20px;
}
.demo-hero h1 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 700; line-height: 1.3; margin: 0 0 14px; color: var(--dk-text); }
.demo-hero h1 .grad {
  background: linear-gradient(100deg, var(--dk-purple), var(--dk-blue), var(--dk-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demo-hero p { color: var(--dk-text-mute); font-size: 14.5px; max-width: 460px; margin: 0 auto 26px; }

.demo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 24px; border-radius: 100px; font-size: 14px; font-weight: 700; border: none;
}
.demo-btn-primary { background: linear-gradient(100deg, var(--dk-purple), var(--dk-blue)); color: #fff; }
.demo-btn-primary:hover { filter: brightness(1.05); }
.demo-btn-ghost { background: #F1F6F4; color: var(--dk-text); border: 1px solid var(--dk-line); }
.demo-btn-danger { background: rgba(229,72,77,0.08); color: var(--dk-danger); border: 1px solid rgba(229,72,77,0.28); }
.demo-btn-sm { padding: 8px 16px; font-size: 12.5px; }
.demo-btn-block { width: 100%; }

/* ---------------- Generic section ---------------- */
.demo-section { padding: 44px 0; border-top: 1px solid var(--dk-line); }
.demo-section-head { text-align: center; margin-bottom: 30px; }
.demo-section-head .tag {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dk-text-faint);
}
.demo-section-head h2 { font-size: 22px; margin: 8px 0 6px; color: var(--dk-text); }
.demo-section-head p { color: var(--dk-text-mute); font-size: 13.5px; max-width: 520px; margin: 0 auto; }

.demo-card {
  background: var(--dk-panel); border: 1px solid var(--dk-panel-border);
  box-shadow: 0 10px 26px -20px rgba(20,40,35,0.25);
  border-radius: 18px; padding: 26px 24px;
}

/* ---------------- MyCoin 3-card section ---------------- */
.mycoin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mycoin-card { text-align: center; }
.mycoin-card .ic {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: linear-gradient(145deg, rgba(20,168,127,0.16), rgba(47,143,224,0.06));
  border: 1px solid rgba(20,168,127,0.28);
}
.mycoin-card p { font-size: 13.5px; color: var(--dk-text-mute); margin: 0; line-height: 1.7; }
.mycoin-card b { color: var(--dk-text); }

/* ---------------- 코인정보 ---------------- */
.coin-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 10px; }
.coin-facts .fact { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--dk-line); font-size: 13.5px; }
.coin-facts .fact .k { color: var(--dk-text-faint); }
.coin-facts .fact .v { color: var(--dk-text); font-family: var(--font-display); text-align: right; word-break: break-all; }

.coin-info-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 22px; align-items: start; margin-top: 26px; }

.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.donut { width: 190px; height: 190px; border-radius: 50%; position: relative; }
.donut-hole {
  position: absolute; inset: 26px; border-radius: 50%; background: var(--dk-panel);
  box-shadow: 0 0 0 1px var(--dk-line) inset;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.donut-hole b { font-family: var(--font-display); font-size: 20px; color: var(--dk-text); }
.donut-hole span { font-size: 10.5px; color: var(--dk-text-faint); }

.donut-legend { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.donut-legend .item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dk-text-mute); }
.donut-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend b { color: var(--dk-text); margin-left: auto; font-family: var(--font-display); }
.donut-legend .note { font-size: 11px; color: var(--dk-text-faint); margin-left: 19px; margin-top: -4px; }

.chart-block { margin-top: 22px; }
.chart-block h4 { font-size: 13.5px; margin: 0 0 4px; color: var(--dk-text); }
.chart-block .sub { font-size: 11.5px; color: var(--dk-text-faint); margin: 0 0 12px; }
.chart-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.chart-tooltip {
  position: absolute; pointer-events: none; background: #16241F; border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-size: 11.5px; padding: 5px 10px; border-radius: 8px; transform: translate(-50%, -130%);
  white-space: nowrap; opacity: 0; transition: opacity 0.12s; font-family: var(--font-display); z-index: 5;
}
.chart-tooltip.show { opacity: 1; }
.chart-point { cursor: pointer; }

/* ---------------- 백서 ---------------- */
.book-row { display: flex; justify-content: center; gap: 46px; flex-wrap: wrap; padding: 10px 0 4px; }
.book {
  width: 130px; height: 178px; border-radius: 4px 10px 10px 4px; position: relative;
  display: flex; align-items: flex-end; padding: 16px 14px;
  box-shadow: -6px 0 0 rgba(0,0,0,0.14), 0 18px 34px -14px rgba(20,40,35,0.35);
  transform: perspective(600px) rotateY(-8deg);
  transition: transform 0.25s;
  cursor: pointer;
}
.book:hover { transform: perspective(600px) rotateY(0deg) translateY(-4px); }
.book::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 8px;
  background: rgba(255,255,255,0.3); border-radius: 4px 0 0 4px;
}
.book.kr { background: linear-gradient(160deg, #14A87F, #2F8FE0); }
.book.en { background: linear-gradient(160deg, #17B8A6, #38C98D); }
.book span { color: #fff; font-weight: 700; font-size: 14px; line-height: 1.4; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.book-caption { text-align: center; font-size: 11.5px; color: var(--dk-text-faint); margin-top: 30px; }

/* ---------------- 코인교환 ---------------- */
.exchange-rate-note { margin: 0 auto 22px; display: flex; justify-content: center; }
.exchange-rate-pill {
  background: rgba(192,138,30,0.08); border: 1px solid rgba(192,138,30,0.3); color: var(--dk-gold);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 100px;
}
.exchange-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.exchange-toggle button {
  flex: 1; padding: 10px; border-radius: 100px; border: 1px solid var(--dk-line);
  background: #F1F6F4; color: var(--dk-text-mute); font-weight: 600; font-size: 13px;
}
.exchange-toggle button.active { background: linear-gradient(100deg, var(--dk-purple), var(--dk-blue)); color: #fff; border-color: transparent; }
.exchange-preview {
  background: #F1F6F4; border: 1px dashed var(--dk-line); border-radius: 12px;
  padding: 12px 14px; margin: 14px 0; font-size: 13px; color: var(--dk-text-mute); text-align: center;
}
.exchange-preview b { color: var(--dk-cyan); font-family: var(--font-display); }

.demo-row { margin-bottom: 14px; }
.demo-row label { display: block; font-size: 12.5px; color: var(--dk-text-mute); margin-bottom: 6px; }
.demo-row input, .demo-row select {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--dk-line);
  background: #FBFDFC; color: var(--dk-text); font-size: 14px; font-family: inherit;
}
.demo-row input::placeholder { color: var(--dk-text-faint); }
.demo-row input:focus, .demo-row select:focus { border-color: var(--dk-purple); outline: none; }

.pw-field { position: relative; }
.pw-field input { padding-right: 44px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--dk-text-faint); font-size: 16px; padding: 6px 8px; line-height: 1;
}
.pw-eye:hover { color: var(--dk-text); }

.demo-msg { font-size: 13px; margin-top: 10px; text-align: center; }
.demo-msg.ok { color: var(--dk-success); }
.demo-msg.err { color: var(--dk-danger); }
.demo-caution { font-size: 11.5px; color: var(--dk-text-faint); text-align: center; margin-top: 14px; }

.tx-card-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tx-card {
  background: var(--dk-bg-alt); border: 1px solid var(--dk-line); border-radius: 12px; padding: 12px 14px;
}
.tx-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.tx-card-date { font-size: 11.5px; color: var(--dk-text-faint); white-space: nowrap; }
.tx-card-dir { font-size: 13.5px; font-weight: 700; color: var(--dk-text); margin-bottom: 4px; }
.tx-card-amounts { font-size: 12.5px; color: var(--dk-text-mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tx-card-amounts b { color: var(--dk-text); font-family: var(--font-display); font-weight: 700; }
.tx-card-amounts .sep { color: var(--dk-text-faint); }
.tx-card-empty { text-align: center; color: var(--dk-text-faint); font-size: 13px; padding: 16px 0; }
.demo-badge { padding: 2px 9px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.demo-badge.pending { background: #F1F6F4; color: var(--dk-text-mute); }
.demo-badge.approved { background: rgba(29,154,108,0.1); color: var(--dk-success); }
.demo-badge.rejected { background: rgba(229,72,77,0.08); color: var(--dk-danger); }

/* ---------------- 마이페이지(로그인/대시보드) ---------------- */
.demo-balance { text-align: center; }
.demo-balance .amt {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  background: linear-gradient(100deg, var(--dk-purple), var(--dk-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demo-balance .lbl { font-size: 12.5px; color: var(--dk-text-faint); margin-top: 6px; }
.demo-actions-row { display: flex; gap: 10px; }

/* ---------------- 뉴스레터 ---------------- */
.newsletter-inline-form { display: flex; gap: 8px; flex-wrap: wrap; max-width: 420px; margin: 0 auto; }
.newsletter-inline-form input {
  flex: 1 1 200px; padding: 11px 14px; border-radius: 100px; border: 1px solid var(--dk-line);
  background: #FBFDFC; color: var(--dk-text); font-size: 13.5px; font-family: inherit;
}
.newsletter-inline-form button {
  background: linear-gradient(100deg, var(--dk-purple), var(--dk-blue)); color: #fff; border: none;
  padding: 11px 22px; border-radius: 100px; font-size: 13.5px; font-weight: 700;
}

/* ---------------- 재단정보 (inner footer) ---------------- */
.inner-footer {
  text-align: center; padding: 26px 24px; border-top: 1px solid var(--dk-line);
  font-size: 12.5px; color: var(--dk-text-faint); background: #F1F6F4;
}
.inner-footer b { color: var(--dk-text-mute); font-family: var(--font-display); }

@media (max-width: 760px) {
  .mycoin-grid { grid-template-columns: 1fr; }
  .coin-info-grid { grid-template-columns: 1fr; }
  .coin-facts { grid-template-columns: 1fr; }
  .inner-menu { display: none; }
}

/* ---------------- 페이지 전환 버튼 (사용자페이지 / 관리자페이지) ---------------- */
.page-switch { display: flex; gap: 8px; }
.ps-btn {
  padding: 8px 16px; border-radius: 100px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--dk-line); transition: transform 0.15s, filter 0.15s;
}
.ps-btn:hover { transform: translateY(-1px); }
.ps-btn.active { background: linear-gradient(100deg, var(--dk-purple), var(--dk-blue)); color: #fff; border-color: transparent; cursor: default; }
.ps-btn:not(.active) { background: #F1F6F4; color: var(--dk-text-mute); }
.ps-btn:not(.active):hover { filter: brightness(0.97); }

/* ---------------- 프레임 등장/전환 애니메이션 ---------------- */
@keyframes frameIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.demo-frame { animation: frameIn 0.6s cubic-bezier(0.16, 0.8, 0.3, 1) both; }

@keyframes frameOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.98); }
}
.demo-frame.leaving { animation: frameOut 0.26s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .demo-frame, .demo-frame.leaving { animation: none; }
}