/* Shared blue-and-white theme, layout and responsive breakpoints. */
:root{
    /* Reference palette: primary blue #007bff with white and pale blue surfaces. */
    --brand: #298fff;
    --brand-deep: #007bff;
    --brand-darker: #0064cc;
    --brand-light: #e3f0ff;
    --brand-rgb: 0, 123, 255;

    --bg: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f3f8ff;
    --border: #c8dff8;

    --text: #222222;
    --text-soft: #555555;
    --text-muted: #888888;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    font-family:'Noto Sans KR',sans-serif;
    background: var(--bg);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    background: radial-gradient(circle at 80% 10%, rgba(var(--brand-rgb),0.08) 0%, transparent 45%), 
                radial-gradient(circle at 10% 90%, rgba(var(--brand-rgb),0.12) 0%, transparent 50%), 
                linear-gradient(135deg, var(--surface-soft) 0%, #ffffff 60%, var(--brand-light) 100%);
    padding:48px 24px 52px;
    overflow:hidden;
    text-align:center;
}
.hero::before{
    content:'';
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(var(--brand-rgb),.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(var(--brand-rgb),.03) 1px,transparent 1px);
    background-size:32px 32px;
    pointer-events:none;
}
.hero-inner{
    position:relative;
    max-width:760px;
    margin:0 auto;
    animation:fadeUp .8s ease-out;
}
@keyframes fadeUp{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
}

/* 텍스트 로고 스타일 */
.text-logo-wrapper {
    margin-bottom: 20px;
    display: block;
}
.text-logo {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--brand-deep);
    letter-spacing: -0.05em;
    text-shadow: 3px 3px 0px var(--brand-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.text-logo span {
    color: var(--brand-darker);
}

.hero-tag{
    display:inline-block;
    padding:6px 16px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    color: var(--brand-deep);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius:999px;
    margin-bottom:18px;
    box-shadow: 0 4px 12px rgba(var(--brand-rgb),0.1);
}
.hero h1{
    font-size:clamp(1.65rem,4.5vw,2.4rem);
    font-weight:900;
    line-height:1.3;
    margin-bottom:14px;
    letter-spacing:-.02em;
}
.hero h1 .accent{color: var(--brand-deep);}
.hero-subtitle{
    font-size:.98rem;
    color: var(--text-soft);
    margin-bottom:24px;
    line-height:1.7;
}

/* The short mnemonic makes the permanent address easier to remember. */
.address-mnemonic{
    font-size:clamp(1.65rem,5vw,2rem);
    font-weight:800;
    line-height:1.3;
    margin-bottom:6px;
}
.address-mnemonic span{color:var(--text-muted); margin:0 8px;}
/* The shared red accent emphasizes the digit in the mnemonic and domain. */
.digit-accent{color:#e60012; font-weight:900;}
.mnemonic-caption{
    color:var(--text-soft);
    font-size:.85rem;
    margin-bottom:18px;
}
.save-reminder{
    margin-top:22px;
    color:var(--brand-darker);
    font-size:.85rem;
    font-weight:700;
}

/* The displayed address is independent of the destination behind the button. */
.domain-card{
    max-width:400px;
    margin:0 auto 26px;
    padding:22px 24px;
    background:var(--surface-soft);
    border:1px solid var(--brand);
    border-radius:16px;
    box-shadow:0 8px 24px rgba(var(--brand-rgb),.06);
    color:var(--brand-darker);
    font-size:clamp(1.2rem,4vw,1.45rem);
    font-weight:800;
    word-break:break-all;
}

.hero-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:18px 42px;
    font-size:1.05rem;
    font-weight:800;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    border-radius:999px;
    box-shadow:0 8px 24px rgba(var(--brand-rgb),.3);
    transition:transform .25s ease;
    animation:pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow{
    0%,100%{box-shadow:0 8px 24px rgba(var(--brand-rgb),.3),0 0 0 0 rgba(var(--brand-rgb),.4)}
    50%{box-shadow:0 12px 32px rgba(var(--brand-rgb),.4),0 0 0 12px rgba(var(--brand-rgb),0)}
}
.hero-cta:hover{transform:translateY(-3px)}
.hero-cta svg{
    width:20px;height:20px;
    fill:none;stroke:#ffffff;
    stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .2s ease;
}
.hero-cta:hover svg{transform:translateX(5px)}

/* ---------- 푸터 ---------- */
.page-footer{
    background: var(--surface-soft);
    border-top: 1px solid var(--border);
    padding:26px 20px;
    text-align:center;
}
.pf-brand{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
    font-size:15px;
    font-weight:900;
    color: var(--brand-darker);
}
.pf-brand .logo-mark{
    background:var(--brand-deep);
    color:#fff;
    padding: 4px 10px;
    font-size:12px;
    border-radius:8px;
}
.pf-text{
    font-size:13px;
    color: var(--text-muted);
    line-height:1.7;
    max-width:600px;
    margin:0 auto;
}

/* ---------- 반응형 ---------- */
@media(max-width:720px){
    .hero{padding:40px 20px 48px}
    .text-logo {font-size: 2.2rem;}
    .hero h1{font-size:1.5rem}
    .domain-card{padding:18px 20px}
    .hero-cta{width:100%; justify-content:center; padding:16px 28px;}
}