@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nanum+Myeongjo:wght@400;700;800&display=swap");

:root{
  --bg:#fbf7ef;
  --surface:#fffdf8;
  --ink:#161616;
  --graphite:#69645d;
  --line:#e7ded0;
  --dahong:#C2410C;
  --seal:#B83A2E;
  --soft:#f3efe8;
  --blue:#8fb7c9;
  --blue-dark:#456f83;
  --gold:#c8a765;
  --green:#9fbf94;
  --fire:#d9957f;
  --metal:#b9b9b9;
  --paper:#fffdf8;
  --radius:20px;
  --card-surface:rgba(255,255,255,.84);
  --card-surface-strong:rgba(255,255,255,.90);
  --card-border:rgba(255,255,255,.68);
  --card-warm-border:rgba(231,222,208,.62);
  --shadow:0 16px 42px rgba(44,31,12,.08);
  --shadow-soft:0 14px 36px rgba(46,32,10,.07);
  --shadow-premium:0 18px 46px rgba(44,31,12,.085), inset 0 1px 0 rgba(255,255,255,.68);
  --space-card-gap-mobile:18px;
  --space-section-gap-mobile:30px;
  --space-card-padding-mobile:21px;
  --bottom-nav-safe-padding:96px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  position:relative;
  isolation:isolate;
  margin:0;
  min-width:320px;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 4%, rgba(255,206,128,.24), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(115,158,255,.16), transparent 32%),
    radial-gradient(circle at 48% 58%, rgba(159,191,148,.11), transparent 42%),
    radial-gradient(circle at 82% 86%, rgba(232,163,134,.10), transparent 36%),
    linear-gradient(180deg,#fff8ec 0%,#f7f1e7 48%,#eef5fb 100%);
  font-family:Pretendard,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif;
  font-size:16px;
  line-height:1.58;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.038;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  background-size:90px 90px;
}
main,footer{
  position:relative;
  z-index:1;
}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
h1{font-size:40px;line-height:1.04;font-weight:800;letter-spacing:0;margin-bottom:16px}
h2{font-size:24px;line-height:1.22;font-weight:600;letter-spacing:0;margin-bottom:12px}
h3{font-size:19px;line-height:1.28;font-weight:600;margin-bottom:8px}
button,input,select,textarea{font:inherit}
.wrap{width:min(720px,calc(100vw - 32px));margin:0 auto}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.muted{color:var(--graphite)}
.micro{font-size:13px;line-height:1.45;color:var(--graphite)}
.label,.info-label{
  display:block;
  color:var(--graphite);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:uppercase;
  margin-bottom:6px;
}

.nav{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(251,247,239,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(231,222,208,.62);
  box-shadow:0 8px 26px rgba(44,31,12,.035);
}
.nav-inner{display:flex;align-items:center;gap:14px;min-height:58px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.mark{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ink),#4a4a48);color:var(--bg);
  font-weight:900;
}
.nav-version{margin-left:auto;color:var(--graphite);font-size:12px}
.nav-link{font-size:13px;color:var(--graphite)}
.nav-short{display:none}
.nav-language{
  margin-left:auto;
  display:flex;
  align-items:center;
}
.nav-language select{
  width:auto;
  min-height:38px;
  border-radius:999px;
  padding:8px 30px 8px 12px;
  font-size:12px;
  font-weight:700;
  color:var(--ink);
  background:rgba(255,255,255,.74);
}

body:not(.debug-mode) .debug-only{display:none!important}

section{padding:44px 0}
main{padding-bottom:var(--bottom-nav-safe-padding)}
.hero{padding:46px 0 30px}
.hero-shell{display:grid;gap:22px}
.home-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  color:var(--graphite);
  font-weight:650;
  margin-bottom:18px;
}
.home-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--gold);
}
.subhead{font-size:17px;color:#3d3934;max-width:34rem;margin-bottom:14px}
.home-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.home-tags span{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fff9ef);
  border-radius:999px;
  padding:8px 11px;
  font-size:13px;
  font-weight:720;
  color:#34302b;
}
.home-tags span:nth-child(1){border-color:rgba(143,183,201,.55)}
.home-tags span:nth-child(2){border-color:rgba(200,167,101,.55)}
.home-tags span:nth-child(3){border-color:rgba(159,191,148,.55)}
.home-tags span:nth-child(4){border-color:rgba(217,149,127,.55)}
.preview-copy{max-width:34rem;margin-top:0}
.home-visual-stack{display:grid;gap:14px}
.saju-preview-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.70);
  border-radius:28px;
  padding:24px;
  background:
    radial-gradient(circle at 8% 4%, rgba(143,183,201,.20), transparent 34%),
    radial-gradient(circle at 96% 12%, rgba(200,167,101,.20), transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,250,241,.88));
  box-shadow:0 24px 58px rgba(61,48,24,.105), inset 0 1px 0 rgba(255,255,255,.72);
}
.saju-preview-card::after{
  content:"";
  position:absolute;
  inset:auto -26px -38px auto;
  width:130px;
  height:130px;
  border-radius:999px;
  background:rgba(159,191,148,.16);
  pointer-events:none;
}
.saju-preview-card > *{position:relative;z-index:1}
.saju-preview-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.saju-preview-kicker{
  color:var(--blue-dark);
  font-size:12px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.saju-preview-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  border:1px solid rgba(200,167,101,.42);
  border-radius:999px;
  padding:5px 9px;
  background:rgba(255,255,255,.68);
  color:#6e5930;
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
}
.saju-preview-card h3{
  font-size:25px;
  line-height:1.16;
  margin-bottom:8px;
  color:#201d19;
}
.saju-preview-card p{
  color:#5f584f;
  margin-bottom:18px;
}
.calculation-confidence{
  display:grid;
  gap:6px;
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid rgba(143,183,201,.34);
  border-radius:18px;
  background:rgba(255,255,255,.58);
}
.calculation-confidence span{
  width:max-content;
  max-width:100%;
  border:1px solid rgba(200,167,101,.34);
  border-radius:999px;
  padding:5px 9px;
  background:rgba(255,250,241,.78);
  color:#6e5930;
  font-size:12px;
  font-weight:850;
  line-height:1.1;
}
.calculation-confidence p{
  margin:0;
  color:#5f584f;
  font-size:13px;
  line-height:1.45;
}
.saju-anchor-line{
  margin:14px 0 18px;
  padding:14px 16px;
  border:1px solid rgba(200,167,101,.24);
  border-radius:18px;
  background:rgba(255,253,248,.62);
  color:var(--graphite);
  font-size:14px;
  line-height:1.5;
}
.saju-preview-chart{display:grid;gap:10px;margin-bottom:18px}
.saju-preview-element{
  display:grid;
  grid-template-columns:minmax(64px,.34fr) 1fr;
  align-items:center;
  gap:12px;
}
.saju-preview-element-label{
  color:#3f3933;
  font-size:14px;
  font-weight:750;
  overflow-wrap:anywhere;
}
.saju-preview-track{
  display:block;
  height:10px;
  border-radius:999px;
  background:#eee5d7;
  overflow:hidden;
}
.saju-preview-fill{
  display:block;
  width:var(--value);
  height:100%;
  border-radius:999px;
}
.saju-preview-fill.wood{background:#9fbe95}
.saju-preview-fill.fire{background:#df927d}
.saju-preview-fill.earth{background:#d7b46a}
.saju-preview-fill.metal{background:#bab7b0}
.saju-preview-fill.water{background:#8fb7c9}
.saju-preview-name-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.saju-preview-name-pills span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid rgba(231,222,208,.95);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  padding:8px 11px;
  color:#4e4740;
  font-size:13px;
  font-weight:700;
}
.saju-preview-name-pills strong{
  font-family:"Nanum Myeongjo",serif;
  color:var(--ink);
  font-size:15px;
}
.home-feature-actions{display:grid;gap:12px;margin-top:4px}
.home-action-card{
  display:grid;
  gap:10px;
  border:1px solid var(--card-warm-border);
  border-radius:22px;
  padding:16px;
  background:var(--card-surface);
  box-shadow:var(--shadow-soft);
}
.home-action-card h2{
  margin-bottom:0;
  font-size:22px;
}
.home-action-card p{margin-bottom:0}
.home-action-match{
  border-color:rgba(200,167,101,.50);
  background:
    radial-gradient(circle at 12% 10%, rgba(143,183,201,.20), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(200,167,101,.22), transparent 34%),
    rgba(255,255,255,.84);
}
.hero-begin{margin-top:0}
.home-saved-link{
  min-height:48px;
  border-color:rgba(143,183,201,.75);
  color:var(--blue-dark);
  background:rgba(255,255,255,.78);
}
.home-match-link{
  min-height:56px;
  border-color:var(--ink);
  color:#fff;
  background:var(--ink);
  border-radius:28px;
  box-shadow:0 14px 35px rgba(22,22,22,.16);
}
.home-note-card,
.notice,
.panel,
.form-card,
.name-card,
.k-name-card,
.language-panel,
.result-source-panel{
  background:var(--card-surface);
  border:1px solid var(--card-warm-border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
}
.energy-match-section{padding-top:30px}
.energy-match-form{margin-bottom:18px}
.match-gate-card{display:grid;gap:12px}
.energy-match-result{display:grid;gap:18px}
.energy-match-result,
.energy-match-result > .panel,
.match-card-panel,
.match-score-panel,
.match-dynamics-panel,
.match-energy-profiles,
.match-score-grid,
.match-dynamics-grid,
.match-profile-card,
.match-score-card,
.match-dynamics-grid article{
  min-width:0;
  max-width:100%;
}
.match-card-panel,.match-score-panel,.match-dynamics-panel{display:grid;gap:16px;width:100%}
.match-energy-profiles,.match-score-grid,.match-dynamics-grid{width:auto}
.energy-match-result p,
.energy-match-result h3,
.energy-match-result strong{
  overflow-wrap:anywhere;
}
.match-safety-note{
  border:1px solid rgba(200,167,101,.42);
  background:rgba(255,249,239,.78);
  border-radius:14px;
  padding:10px 12px;
}
.energy-match-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(231,222,208,.86);
  border-radius:34px;
  padding:clamp(16px,4.4vw,24px);
  width:min(100%,360px);
  max-width:360px;
  margin:0 auto;
  min-width:0;
  aspect-ratio:4/5;
  min-height:auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(circle at 15% 13%, rgba(143,183,201,.26), transparent 31%),
    radial-gradient(circle at 88% 18%, rgba(232,163,134,.20), transparent 28%),
    linear-gradient(155deg,#fffdf8 0%,#fff5e8 54%,#f2f7f2 100%);
  box-shadow:0 24px 54px rgba(45,35,20,.14);
}
.energy-match-card::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
  pointer-events:none;
}
.energy-match-card::after{
  content:"";
  position:absolute;
  inset:22px 24px auto auto;
  width:72px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(143,183,201,.58),rgba(200,167,101,.52),rgba(232,163,134,.42));
  pointer-events:none;
}
.energy-match-card.k-profile{
  background:
    linear-gradient(90deg,rgba(143,183,201,.28),transparent 8%,transparent 92%,rgba(200,167,101,.26)),
    radial-gradient(circle at 88% 14%,rgba(232,163,134,.20),transparent 30%),
    linear-gradient(180deg,#fffdf8,#fff8ee);
  border-color:rgba(231,222,208,.96);
  box-shadow:0 20px 46px rgba(34,28,18,.12);
}
.energy-match-card.k-profile::before{
  background:rgba(255,255,255,.34);
  border-color:rgba(235,228,212,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}
.energy-match-card.k-profile::after{
  width:76px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(184,58,46,.36),rgba(143,183,201,.22));
}
.match-card-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
  z-index:1;
  padding:0;
  flex:0 0 auto;
}
.match-card-topline .card-label{
  text-transform:none;
  letter-spacing:0;
}
.match-card-mini-note{
  color:var(--graphite);
  font-size:clamp(10px,2.8vw,12px);
  font-weight:700;
  text-align:right;
  max-width:44%;
  line-height:1.2;
}
.match-card-names{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:100%;
  margin:12px auto 6px;
  color:var(--ink);
  font-size:clamp(18px,4.7vw,23px);
  font-weight:850;
  line-height:1.08;
  letter-spacing:0;
  text-align:center;
  text-wrap:balance;
  white-space:nowrap;
  flex:0 0 auto;
}
.match-card-names.is-stacked{
  display:grid;
  gap:0;
  white-space:normal;
  font-size:clamp(19px,5.2vw,25px);
}
.match-card-name-part{
  min-width:0;
  max-width:100%;
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none;
}
.match-card-x{
  color:var(--blue-dark);
  font-weight:800;
  line-height:1;
}
.match-score-badge{
  position:relative;
  z-index:1;
  width:min(224px,72%);
  min-height:84px;
  margin:0 auto 7px;
  border-radius:999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:7px 18px 9px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.78), transparent 58%),
    linear-gradient(145deg,rgba(255,255,255,.26),rgba(143,183,201,.16) 45%,rgba(200,167,101,.18));
  border:0;
  box-shadow:none;
  flex:0 0 auto;
  overflow:visible;
}
.k-profile .match-score-badge{
  background:
    linear-gradient(150deg,rgba(255,255,255,.66),rgba(247,242,232,.58)),
    radial-gradient(circle at 84% 18%,rgba(143,183,201,.12),transparent 44%);
  box-shadow:none;
}
.match-score-badge > span:not(.score-number):not(.score-percent){
  color:var(--blue-dark);
  font-weight:800;
  font-size:clamp(10px,2.6vw,12px);
  letter-spacing:.02em;
  line-height:1.1;
}
.match-overall-score{
  position:relative;
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  line-height:.86;
  font-weight:800;
  color:var(--ink);
  margin:0;
}
.match-overall-score .score-number{
  display:block;
  color:var(--ink);
  font-size:clamp(48px,12.4vw,66px);
  font-weight:850;
  letter-spacing:-.01em;
  line-height:.88;
}
.match-overall-score .score-percent{
  position:absolute;
  left:100%;
  top:.05em;
  color:var(--ink);
  font-size:clamp(21px,5.3vw,30px);
  font-weight:850;
  line-height:1;
  margin-left:3px;
}
.match-top-rhythms{
  position:relative;
  z-index:1;
  border:1px solid rgba(255,255,255,.52);
  background:rgba(255,255,255,.34);
  border-radius:18px;
  padding:8px;
  margin:0 0 6px;
  flex:0 0 auto;
}
.match-top-rhythms span{
  display:block;
  color:var(--graphite);
  font-size:11px;
  font-weight:700;
  margin-bottom:4px;
}
.match-card-rhythm-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
}
.match-rhythm-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  border-radius:999px;
  padding:5px 9px;
  background:rgba(143,183,201,.24);
  color:var(--ink);
  font-size:clamp(10px,2.7vw,12px);
  font-weight:800;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  overflow-wrap:normal;
  word-break:keep-all;
}
.match-rhythm-pill:nth-child(2){background:rgba(200,167,101,.28)}
#match-card-dynamic{
  position:relative;
  z-index:1;
  color:var(--ink);
  font-size:clamp(15px,4.1vw,19px);
  line-height:1.16;
  font-weight:800;
  letter-spacing:0;
  margin:0 0 4px;
  min-height:2.28em;
  flex:0 0 auto;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  text-wrap:balance;
}
.energy-match-card > .micro{
  position:relative;
  z-index:1;
  color:var(--graphite);
  font-size:clamp(10px,2.6vw,12px);
  line-height:1.16;
  font-weight:700;
  margin:0;
}
.energy-match-card .card-mark{
  display:block;
  position:relative;
  z-index:1;
  margin-top:2px;
  color:var(--blue-dark);
  font-size:11px;
  font-weight:800;
}
.match-card-style-toggle{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.match-card-style-toggle span{
  color:var(--graphite);
  font-size:13px;
  font-weight:700;
}
.match-style-button{
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  color:var(--graphite);
  border-radius:999px;
  padding:7px 11px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.match-style-button.is-active{
  border-color:rgba(69,111,131,.38);
  background:rgba(143,183,201,.20);
  color:var(--ink);
}
.match-energy-profiles{
  display:grid;
  gap:14px;
}
.match-profile-card{
  display:grid;
  gap:8px;
}
.match-profile-card h3{margin-bottom:0}
.match-profile-card strong{font-size:17px}
.match-profile-card p{margin-bottom:0;color:var(--graphite)}
.match-summary-headline{
  display:inline-flex;
  width:auto;
  justify-self:start;
  max-width:100%;
  border:1px solid rgba(143,183,201,.58);
  background:rgba(255,255,255,.72);
  border-radius:999px;
  padding:8px 12px;
  color:var(--blue-dark);
  font-weight:800;
  margin-bottom:0;
}
.match-score-grid{display:grid;gap:12px}
.match-score-card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.74);
}
.match-score-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.match-score-head span{font-weight:800;color:var(--blue-dark)}
.match-score-fill{
  display:block;
  height:100%;
  width:var(--value);
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--gold));
}
.match-score-card p{margin:10px 0 0;color:var(--graphite);font-size:14px}
.match-score-card .match-score-why{
  color:#3d3934;
  font-weight:600;
}
.match-dynamics-grid{display:grid;gap:12px}
.match-dynamics-grid article{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.72);
}
.match-dynamics-grid p{margin-bottom:0}
.match-actions .btn-primary{flex:1 1 100%}
.panel,.form-card,.name-card,.reading-card,.core-card,.saju-list-card,.name-direction-card,.saju-context-card,.daily-note-card,.morning-notes-card,.feedback-panel,.demo-qa-panel,.demo-notes-panel,.surname-info-card,.pronunciation-panel{
  background:var(--card-surface);
  border-color:var(--card-border);
  box-shadow:var(--shadow-premium);
}
.match-privacy-note{
  margin:12px 0 0;
}
.match-result-status{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:10px 0 0;
  padding:7px 11px;
  border-radius:999px;
  color:var(--blue-dark);
  background:rgba(143,183,201,.14);
  border:1px solid rgba(143,183,201,.20);
  font-size:13px;
  font-weight:700;
  line-height:1.25;
}
.home-note-card p{
  font-size:21px;
  line-height:1.34;
  font-weight:500;
  margin-bottom:12px;
}
.home-note-card small{color:var(--graphite)}
.home-settings{display:grid;gap:12px}
.field{display:grid;gap:8px;min-width:0;color:var(--ink);font-weight:500}
.field > span,.field legend{font-size:13px;color:var(--graphite);font-weight:500}

input,select,textarea{
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.78);
  color:var(--ink);
  padding:12px 14px;
}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
textarea{min-height:108px;resize:vertical}
textarea#feedback-comment{min-height:150px}

.btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:999px;
  padding:0 20px;
  cursor:pointer;
  font-weight:600;
  font-size:16px;
  transition:opacity .22s ease,transform .22s ease,background .22s ease;
}
.btn:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary{box-shadow:0 14px 35px rgba(22,22,22,.16)}
.btn-secondary{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
}
.button-row,.feedback-actions,.saved-actions,.card-export-panel{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.hero-begin{width:100%;height:56px;font-size:17px;border-radius:28px}

.app-tabs-section{display:none}
.app-tab-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.app-tab,.toggle{
  min-height:44px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--graphite);
  font-weight:600;
  cursor:pointer;
}
.app-tab.active,.toggle.active{
  color:var(--ink);
  border-color:var(--ink);
}

.saved-result-section{padding-top:28px}
.saved-result-grid{display:grid;gap:18px}
.saved-empty{
  background:var(--card-surface);
  border:1px dashed var(--card-warm-border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow-soft);
}
.saved-card-preview{
  background:linear-gradient(180deg,#fff,var(--paper));
  border:1px solid var(--card-warm-border);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow-soft);
}
.saved-card-preview .card-hangul{
  font-family:"Nanum Myeongjo",serif;
  font-size:46px;
}
.saved-summary-stack{display:grid;gap:10px}
.saved-summary-stack > div{
  background:var(--card-surface-strong);
  border:1px solid var(--card-warm-border);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 24px rgba(44,31,12,.045);
}
.saved-summary-stack strong,.saved-summary-stack span:not(.info-label){display:block;overflow-wrap:anywhere}
.home-screen-guidance{
  margin-top:18px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
}

.form-section{padding-top:32px}
.section-head{margin-bottom:22px}
.section-head.compact{margin-bottom:14px}
.form-card{padding:22px}
.field-grid{display:grid;gap:18px}
.date-group,.time-group{
  border:0;
  margin:0;
  padding:0;
  background:transparent;
}
.inline-selects{display:grid;gap:10px}
.date-selects,.time-selects{grid-template-columns:repeat(3,1fr)}
.time-group.is-optional{opacity:.76}
.field small{color:var(--graphite);font-weight:400}
.location-helper{
  margin-top:-6px;
  background:rgba(255,255,255,.48);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
}
.location-helper p{margin:0}
.location-helper p + p{margin-top:4px}
.advanced-location{
  border:1px solid var(--line);
  border-radius:16px;
  padding:0;
  background:rgba(255,255,255,.62);
}
.advanced-location summary{
  cursor:pointer;
  min-height:46px;
  display:flex;
  align-items:center;
  color:var(--ink);
  font-weight:750;
  padding:12px 14px;
}
.advanced-location summary::marker{color:var(--blue-dark)}
.advanced-location-fields{
  border-top:1px solid var(--line);
  padding:14px;
}
.checkbox-group{
  border:0;
  margin:20px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.checkbox-group legend{grid-column:1/-1;color:var(--graphite);font-size:13px;font-weight:500}
.checkbox-group label{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  padding:10px 12px;
  color:var(--ink);
}
.checkbox-group input{width:16px;min-height:16px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.form-actions .btn{flex:1 1 180px;height:56px}

.results-section{padding-top:28px}
.empty-view-section{padding-top:28px}
.empty-view-card{text-align:center}
.result-source-status{
  color:var(--graphite);
  font-size:13px;
  margin-bottom:16px;
}
.result-flow-indicator{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:18px;
  color:var(--graphite);
  font-size:12px;
}
.result-flow-indicator span:not([aria-hidden="true"]){
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 9px;
  background:var(--surface);
}
.result-view-panel{
  background:var(--card-surface);
  border:1px solid var(--card-warm-border);
  border-radius:18px;
  padding:16px;
  margin-bottom:18px;
  box-shadow:var(--shadow-soft);
}
.result-view-toggle{display:flex;gap:8px;margin:8px 0}

.saju-preview-section,
.daily-note-section,
.morning-notes-section,
.names-section,
.surname-section,
.card-preview-section,
.feedback-section,
.demo-notes-section,
.demo-qa-section{padding:30px 0 0}

.saju-insight-grid,.grid-2,.surname-grid{display:grid;gap:18px}
.reading-card,.core-card,.saju-list-card,.name-direction-card,.saju-context-card,.daily-note-card,.morning-notes-card,.feedback-panel,.demo-qa-panel,.demo-notes-panel,.surname-info-card{
  background:var(--card-surface);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-premium);
}
.core-card .label{letter-spacing:0}
#core-energy{
  font-size:24px;
  line-height:1.22;
  font-weight:600;
}
.element-bars{display:grid;gap:14px}
.element-row-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  color:var(--graphite);
}
.element-name{
  font-family:"Nanum Myeongjo",serif;
  font-size:32px;
  color:var(--ink);
}
.element-name .element-icon{font-family:"Nanum Myeongjo",serif}
.element-value{color:var(--graphite);font-size:14px}
.bar,.element-bar-track{
  height:8px;
  background:var(--line);
  border-radius:999px;
  overflow:hidden;
}
.fill,.element-bar-fill,.wood,.fire,.earth,.metal,.water{
  height:100%;
  width:var(--value);
  border-radius:999px;
}
.fill,.element-bar-fill{background:var(--ink)}
.wood{background:var(--green)}
.fire{background:var(--fire)}
.earth{background:var(--gold)}
.metal{background:var(--metal)}
.water{background:var(--blue)}
.element-note{font-size:14px;color:var(--graphite)}
.flow-line{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-top:12px;
}
.flow-line span{
  text-align:center;
  color:var(--graphite);
  font-size:12px;
}
.balance-targets,.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 10px;
  background:#fff;
  color:var(--graphite);
  font-size:13px;
}
.context-lines{display:grid;gap:8px;color:var(--graphite)}

.daily-note-card,.morning-notes-card{background:var(--surface)}
.daily-note-copy{
  font-size:22px;
  line-height:1.36;
  font-weight:500;
  margin:10px 0 16px;
}
.daily-note-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.morning-notes-list{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:grid;
  gap:10px;
}
.morning-notes-list li{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.morning-notes-list strong{font-size:13px;color:var(--graphite)}
.show-all-notes-button{margin-top:14px}
.results.is-quick-view .morning-notes-list:not(.is-expanded) li:nth-child(n+2){display:none}

.name-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.name-card h3{
  font-family:"Nanum Myeongjo",serif;
  font-size:32px;
  line-height:1.15;
}
.name-card p{margin-bottom:10px}
.name-depth,.hanja-snapshot{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:var(--soft);
}
.hanja-snapshot strong,.hanja-syllables{
  font-family:"Nanum Myeongjo",serif;
}
.hanja-note{
  margin-top:16px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}

.recommended-surnames{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  margin-bottom:14px;
}
.recommended-surnames h3{
  color:var(--ink);
}
.recommended-row{display:grid;gap:8px}
.recommendation-chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:12px;
  text-align:left;
  cursor:pointer;
  color:var(--ink);
}
.recommendation-chip strong{
  color:var(--ink);
}
.recommendation-chip span{
  display:block;
  margin-top:3px;
  color:var(--graphite);
}
.recommendation-chip.is-selected{
  border-color:rgba(200,167,101,.72);
  background:linear-gradient(180deg,#fff,#fffaf0);
  box-shadow:0 10px 24px rgba(116,82,22,.10);
}
.surname-wheel-shell{
  position:relative;
  min-height:270px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,var(--paper));
  overflow:hidden;
}
.surname-wheel{
  max-height:270px;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  padding:92px 12px;
}
.surname-wheel-center{
  pointer-events:none;
  position:absolute;
  left:12px;right:12px;top:50%;
  height:68px;
  transform:translateY(-50%);
  border:1px solid var(--blue);
  background:rgba(143,183,201,.08);
  border-radius:18px;
}
.surname-option{
  width:100%;
  height:68px;
  border:0;
  border-radius:18px;
  background:transparent;
  color:var(--graphite);
  display:grid;
  grid-template-columns:64px 1fr;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  scroll-snap-align:center;
  cursor:pointer;
}
.surname-option.is-selected{color:var(--ink)}
.surname-hangul{font-family:"Nanum Myeongjo",serif;font-size:30px;font-weight:700}
.surname-roman{font-size:15px}
.full-name-card,.surname-info-card{margin-top:14px}
.full-name-display{
  font-family:"Nanum Myeongjo",serif;
  font-size:44px;
  line-height:1.08;
  margin-bottom:8px;
}
.full-name-roman{font-size:18px;color:var(--graphite)}
.surname-detail-stack{display:grid;gap:14px}
.surname-detail-primary strong,.surname-detail-stack strong{display:block}
.surname-stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.surname-story-card{
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin-top:14px;
}

.pronunciation-panel{
  background:rgba(255,255,255,.74);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.pronunciation-stack{display:grid;gap:10px}
.pronunciation-line{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.pronunciation-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.slow-toggle{display:flex;align-items:center;gap:8px;color:var(--graphite)}
.audio-support-details{
  margin-top:14px;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.audio-support-details dl{display:grid;gap:6px;margin:0}
.audio-support-details div{display:grid;grid-template-columns:1fr auto;gap:10px}

.card-preview-section .section-head{margin-bottom:16px}
.result-card-cta-section{padding:30px 0 0}
.result-card-cta-panel{
  display:grid;
  gap:16px;
  border:1px solid rgba(200,167,101,.42);
  border-radius:24px;
  padding:20px;
  background:
    radial-gradient(circle at 10% 0%, rgba(143,183,201,.14), transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,250,241,.82));
  box-shadow:0 14px 34px rgba(34,28,18,.07);
}
.result-card-cta-panel h2{
  margin-bottom:6px;
}
.result-card-cta-panel p{
  margin-bottom:0;
}
.result-card-cta-panel .btn{
  width:100%;
  height:56px;
}
.toggle-row{display:flex;gap:10px;margin-bottom:18px}
.k-name-card{
  position:relative;
  aspect-ratio:5/7;
  max-width:430px;
  margin:0 auto;
  background:
    linear-gradient(145deg,rgba(255,255,255,.42),transparent 28%),
    radial-gradient(circle at 16% 10%, rgba(143,183,201,.19), transparent 34%),
    radial-gradient(circle at 86% 92%, rgba(200,167,101,.21), transparent 32%),
    linear-gradient(180deg,#fff,var(--paper));
  border:1px solid var(--line);
  border-radius:30px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 22px 56px rgba(34,28,18,.12), inset 0 1px 0 rgba(255,255,255,.78);
}
.k-name-card::before{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  top:78px;
  height:1px;
  background:linear-gradient(90deg,rgba(143,183,201,.54),rgba(200,167,101,.62),rgba(159,191,148,.45));
}
.k-name-card::after{
  content:"";
  position:absolute;
  inset:-40% -72% auto auto;
  width:72%;
  height:150%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  pointer-events:none;
}
.k-name-card > *{position:relative;z-index:1}
.card-topline{
  position:absolute;
  left:24px;
  right:24px;
  top:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.card-label{font-size:12px;letter-spacing:0;color:var(--graphite);font-weight:600}
.card-hangul{
  font-family:"Nanum Myeongjo",serif;
  font-size:60px;
  font-weight:700;
  line-height:1;
  margin-bottom:14px;
}
.card-hanja{
  font-family:"Nanum Myeongjo",serif;
  font-size:24px;
  color:var(--graphite);
  margin-bottom:8px;
}
.card-roman{
  font-size:15px;
  letter-spacing:0;
  color:var(--graphite);
  margin-bottom:18px;
}
#card-meaning{
  max-width:22rem;
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  margin-bottom:0;
}
.card-created-from{
  margin-top:8px;
  color:#6d562d;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
}
#card-pronunciation{
  display:block;
  color:var(--graphite);
  margin:-8px 0 14px;
}
#card-nicknames{display:none}
.card-seal{
  position:absolute;
  right:28px;
  bottom:28px;
  width:42px;height:42px;
  border:2px solid var(--seal);
  color:var(--seal);
  display:grid;
  place-items:center;
  font-family:"Nanum Myeongjo",serif;
  font-weight:700;
}
.card-outside-note{
  max-width:430px;
  margin:12px auto 0;
  color:var(--graphite);
  font-size:14px;
}
.card-export-panel{
  max-width:430px;
  margin:16px auto 0;
}
.card-export-panel .btn-primary{flex:1 1 100%}
.card-export-status,.save-result-status{
  width:100%;
  min-height:18px;
  color:var(--graphite);
  font-size:13px;
  margin:0;
}
.save-result-panel{
  max-width:430px;
  margin:18px auto 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.feedback-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.feedback-chip{
  min-height:40px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink);
  padding:8px 12px;
  font-weight:500;
  cursor:pointer;
}
.feedback-chip.is-selected{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.feedback-summary{font-weight:600;margin:10px 0;color:var(--ink)}
.feedback-copy-status{min-height:18px}

.cta-panel{
  background:var(--card-surface);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:22px;
  margin-top:30px;
  display:grid;
  gap:14px;
  box-shadow:var(--shadow-soft);
}
.warning-list{color:var(--graphite)}
.demo-qa-panel{border-style:dashed}
.qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.qa-grid > div{
  background:var(--soft);
  border-radius:14px;
  padding:10px;
}

.results.is-quick-view .saju-context-card,
.results.is-quick-view .saju-insight-grid,
.results.is-quick-view .name-direction-card,
.results.is-quick-view .name-card .name-depth,
.results.is-quick-view .name-card .hanja-snapshot,
.results.is-quick-view .name-card p[id$="-story"],
.results.is-quick-view .hanja-note,
.results.is-quick-view .demo-notes-section{
  display:none;
}

footer{
  padding:36px 0 90px;
  color:var(--graphite);
}
.footer-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-about-link{text-decoration:underline;text-underline-offset:3px}
.bottom-nav{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(255,253,248,.94);
  border-top:1px solid rgba(231,222,208,.66);
  backdrop-filter:blur(18px);
  box-shadow:0 -12px 34px rgba(44,31,12,.07);
  padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right));
}
.bottom-nav-item{
  position:relative;
  min-height:44px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:var(--graphite);
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
}
.bottom-nav-item span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  border-radius:999px;
  padding:0 12px;
  transition:background .22s ease,color .22s ease,font-weight .22s ease;
}
.bottom-nav-item.is-active{
  color:var(--ink);
  font-weight:800;
}
.bottom-nav-item.is-active span{
  background:rgba(200,167,101,.16);
  background-color:rgba(200,167,101,.16);
  box-shadow:inset 0 0 0 999px rgba(200,167,101,.16);
}
.bottom-nav-item.is-active::before{
  content:"";
  position:absolute;
  top:2px;
  width:22px;
  height:3px;
  border-radius:999px;
  background:var(--gold);
}

body.app-view-home #results,
body.app-view-home #saved-result-panel,
body.app-view-home #energy-match-panel,
body.app-view-home #empty-view-panel{
  display:none!important;
}

body.app-view-result .hero,
body.app-view-result #try-result-panel,
body.app-view-result #saved-result-panel,
body.app-view-result #energy-match-panel,
body.app-view-result #empty-view-panel{
  display:none!important;
}

body.app-view-card .hero,
body.app-view-card #try-result-panel,
body.app-view-card #saved-result-panel,
body.app-view-card #energy-match-panel,
body.app-view-card #empty-view-panel{
  display:none!important;
}

body.app-view-saved .hero,
body.app-view-saved #try-result-panel,
body.app-view-saved #results,
body.app-view-saved #energy-match-panel,
body.app-view-saved #empty-view-panel{
  display:none!important;
}

body.app-view-match .hero,
body.app-view-match #try-result-panel,
body.app-view-match #saved-result-panel,
body.app-view-match #results,
body.app-view-match #empty-view-panel{
  display:none!important;
}

body.app-empty-view .hero,
body.app-empty-view #try-result-panel,
body.app-empty-view #results,
body.app-empty-view #energy-match-panel,
body.app-empty-view #saved-result-panel{
  display:none!important;
}

body.app-view-result #results .card-preview-section,
body.app-view-result #results .feedback-section,
body.app-view-result #results .use-section,
body.app-view-result #results .cta-panel{
  display:none!important;
}

body.app-view-card #results > .wrap > :not(.card-preview-section){
  display:none!important;
}

@media(min-width:760px){
  .wrap{width:min(960px,calc(100vw - 56px))}
  .hero-shell{grid-template-columns:1.05fr .95fr;align-items:start}
  .home-copy{grid-column:1;grid-row:1}
  .home-visual-stack{grid-column:2;grid-row:1 / span 3}
  .home-feature-actions{grid-column:1;grid-row:2}
  .preview-copy{grid-column:1;grid-row:3}
  .home-settings{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}
  .field-grid{grid-template-columns:repeat(2,1fr)}
  .field-wide{grid-column:1/-1}
  .saju-insight-grid,.grid-2,.surname-grid{grid-template-columns:repeat(2,1fr)}
  .match-score-grid,.match-dynamics-grid,.match-energy-profiles{grid-template-columns:repeat(2,1fr)}
  .saved-result-grid{grid-template-columns:.8fr 1.2fr}
  .recommended-row{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:620px){
  .wrap{width:calc(100vw - 40px)}
  .nav-full{display:none}
  .nav-short{display:inline}
  .nav-version{display:none}
  h1{font-size:36px}
  h2{font-size:23px}
  section{padding:var(--space-section-gap-mobile) 0}
  .hero{padding:34px 0 var(--space-section-gap-mobile)}
  .hero-shell,
  .home-visual-stack,
  .home-feature-actions,
  .saved-result-grid,
  .field-grid,
  .energy-match-result,
  .match-card-panel,
  .match-score-panel,
  .match-dynamics-panel,
  .match-energy-profiles,
  .match-score-grid,
  .match-dynamics-grid,
  .saju-insight-grid,
  .grid-2,
  .surname-grid{
    gap:var(--space-card-gap-mobile);
  }
  .saju-preview-section,
  .daily-note-section,
  .morning-notes-section,
  .names-section,
  .surname-section,
  .card-preview-section,
  .feedback-section,
  .result-card-cta-section{
    padding-top:var(--space-section-gap-mobile);
  }
  .section-head{margin-bottom:18px}
  .section-head.compact{margin-bottom:14px}
  .date-selects,.time-selects,.checkbox-group,.surname-stats-row,.qa-grid{grid-template-columns:1fr}
  .button-row .btn,.feedback-actions .btn,.save-result-panel .btn,.card-export-panel .btn{width:100%}
  .home-note-card,
  .notice,
  .panel,
  .form-card,
  .name-card,
  .language-panel,
  .result-source-panel,
  .pronunciation-panel,
  .surname-info-card,
  .daily-note-card,
  .morning-notes-card,
  .feedback-panel,
  .match-score-card,
  .match-dynamics-grid article,
  .saved-empty,
  .home-screen-guidance,
  .result-card-cta-panel,
  .save-result-panel{
    padding:var(--space-card-padding-mobile);
  }
  .home-action-card,
  .recommended-surnames,
  .name-depth,
  .hanja-snapshot,
  .hanja-note,
  .surname-story-card,
  .saved-summary-stack > div,
  .pronunciation-line{
    padding:16px;
  }
  .saju-preview-card{padding:var(--space-card-padding-mobile);border-radius:24px}
  .saju-preview-card h3{font-size:23px}
  .saju-preview-element{grid-template-columns:minmax(56px,.32fr) 1fr;gap:10px}
  .saju-preview-name-pills span{flex:1 1 132px;justify-content:center}
  .energy-match-section,
  .saved-result-section,
  .form-section,
  .results-section,
  .empty-view-section{
    padding-top:var(--space-section-gap-mobile);
  }
  .energy-match-form,
  .recommended-surnames,
  .full-name-card,
  .surname-info-card,
  .home-screen-guidance,
  .save-result-panel{
    margin-top:var(--space-card-gap-mobile);
  }
  .card-export-panel,
  .feedback-buttons,
  .morning-notes-list{
    gap:var(--space-card-gap-mobile);
  }
  .flow-line{grid-template-columns:repeat(5,minmax(0,1fr))}
  .flow-line span{font-size:11px}
  .morning-notes-list li{grid-template-columns:1fr;gap:4px}
  .surname-option{grid-template-columns:1fr;justify-items:center;text-align:center}
  .full-name-display{font-size:38px}
  .k-name-card{padding:24px}
  .card-hangul{font-size:52px}
}

@media(max-width:380px){
  .energy-match-card{
    padding:15px;
    border-radius:26px;
  }
  .energy-match-card::before{
    inset:12px;
    border-radius:20px;
  }
  .match-card-topline{
    align-items:flex-start;
  }
  .match-card-mini-note{
    max-width:120px;
    font-size:11px;
    line-height:1.25;
  }
  .match-card-names{
    margin:8px auto 5px;
    font-size:clamp(17px,5.2vw,21px);
  }
  .match-card-names.is-stacked{
    font-size:clamp(18px,5.8vw,23px);
  }
  .match-score-badge{
    width:min(196px,70%);
    min-height:76px;
    margin-bottom:6px;
    padding:6px 14px 8px;
  }
  .match-overall-score .score-number{
    font-size:clamp(44px,12.6vw,52px);
  }
  .match-overall-score .score-percent{
    font-size:clamp(19px,5.2vw,24px);
  }
  .match-score-badge > span:not(.score-number):not(.score-percent){
    font-size:12px;
  }
  .match-top-rhythms{
    padding:7px;
    margin-bottom:6px;
  }
  .match-rhythm-pill{
    font-size:10px;
    padding:5px 8px;
  }
  #match-card-dynamic{
    font-size:15px;
    line-height:1.15;
  }
}