/*
 * 사용자별 색상 테마:
 *  - lime   : 밝은 초록/연두 그라데이션 + 하얀 버튼 + 진한 노랑 물결 (DevChiko)
 *  - mint   : 민트/청록 그라데이션 + 하얀 버튼 + 푸른 물결 (Sample User)
 *  - forest : 진초록 그라데이션 + 하얀 버튼 + 연두 물결
 *  - sage   : 세이지/연녹색 그라데이션 + 하얀 버튼 + 분홍 물결
 * 테마를 바꾸려면 index.php의 사용자별 'theme' 값을 바꾸세요.
 */
:root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', Arial, sans-serif;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    --bg-start: #e4ffae;
    --bg-middle: #a6f58c;
    --bg-end: #52cfa0;
    --shine: rgba(255, 255, 231, .92);
    --text: #133e27;
    --muted: #326c48;
    --accent: #23743e;
    --line: rgba(31, 104, 66, .23);
    --wave-light: #ffe77a;
    --wave-main: #facc15;
    --wave-deep: #eaaa04;
    margin: 0;
    min-height: 100vh;
    padding: 0 22px;
    color: var(--text);
    background:
        radial-gradient(ellipse 530px 390px at 12% 9%, var(--shine), transparent 80%),
        radial-gradient(ellipse 520px 420px at 94% 90%, rgba(255,255,255,.29), transparent 79%),
        linear-gradient(152deg, var(--bg-start) 0%, var(--bg-middle) 49%, var(--bg-end) 100%);
    background-attachment: fixed;
}
body.theme-lime {
    /* devchiko0413: 연두색 → 밝은 초록색 → 초록색 */
    --bg-start: #e4ffae; --bg-middle: #a6f58c; --bg-end: #52cfa0;
    --wave-light: #ffe77a; --wave-main: #facc15; --wave-deep: #eaaa04;
}
body.theme-mint {
    /* 다른 사용자 예시: 아쿠아 민트 → 하늘색 → 청록색 */
    --bg-start: #d7fff2; --bg-middle: #8fe8dc; --bg-end: #55bcca;
    --shine: rgba(247,255,255,.88);
    --text: #154950; --muted: #326b72; --accent: #206c76;
    --line: rgba(27, 106, 114, .25);
    --wave-light: #bceefb; --wave-main: #5cc4ed; --wave-deep: #20a4d8;
}
body.theme-forest {
    /* 선택 테마: 초록 → 에메랄드 → 진초록 */
    --bg-start: #c6f8b1; --bg-middle: #5ed9a0; --bg-end: #269b81;
    --shine: rgba(247,255,217,.82);
    --text: #103b31; --muted: #27644e; --accent: #125e4b;
    --line: rgba(15, 91, 69, .26);
    --wave-light: #e6ff98; --wave-main: #b6ef4a; --wave-deep: #72c227;
}
body.theme-sage {
    /* 선택 테마: 세이지 그린 → 연녹색 → 피스타치오 */
    --bg-start: #f1f7dc; --bg-middle: #c7e9a9; --bg-end: #9ad9b1;
    --shine: rgba(255,255,255,.92);
    --text: #3b4d2a; --muted: #65774c; --accent: #526b34;
    --line: rgba(83, 110, 51, .24);
    --wave-light: #ffe0ed; --wave-main: #ffacc8; --wave-deep: #f981b0;
}
body.theme-neutral {
    /* 루트 / 및 존재하지 않는 URL의 404 페이지 */
    --bg-start: #f2f6f3; --bg-middle: #dce8df; --bg-end: #bfcec7;
    --shine: rgba(255,255,255,.9);
    --text: #293e33; --muted: #576d5e; --accent: #4a7360;
    --line: rgba(45, 85, 64, .22);
}
.shell { width: 100%; max-width: 480px; margin: 0 auto; padding: 52px 0 30px; }
.topline {
    display: flex; align-items: center; gap: 12px;
    color: var(--muted); font-size: 10px; letter-spacing: .18em;
    font-weight: 800; white-space: nowrap;
}
.topline-dot {
    flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 5px rgba(255,255,255,.35);
}
.topline-rule { flex: 1; height: 1px; background: var(--line); }
.profile-card { text-align: center; padding: 43px 10px 40px; }
.avatar {
    display: grid; place-items: center; margin: 0 auto 22px;
    position: relative; overflow: hidden;
    width: 104px; height: 104px; border: 4px solid rgba(255,255,255,.85);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.33));
    color: var(--accent);
    font-size: 29px; font-weight: 850; letter-spacing: -.08em;
    box-shadow: 0 16px 34px rgba(32,79,49,.14);
    backdrop-filter: blur(10px);
}
.avatar-image {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}
.avatar-initials { display: block; }
.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .22em; font-weight: 850; }
h1 { margin: 12px 0 5px; font-size: clamp(32px, 8vw, 40px); letter-spacing: -.045em; line-height: 1.15; }
.handle { color: var(--accent); font-size: 14px; font-weight: 750; }
.bio { max-width: 360px; color: var(--muted); font-size: 14px; line-height: 1.75; margin: 19px auto 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
h2 { font-size: 16px; margin: 0; letter-spacing: -.025em; }
.section-heading > span { color: var(--muted); font-size: 10px; letter-spacing: .15em; font-weight: 800; }
.links-list { display: grid; gap: 13px; }
.link-card {
    isolation: isolate;
    overflow: hidden; position: relative;
    display: flex; align-items: center; gap: 16px; padding: 15px 16px;
    background: #ffffff; border: 1px solid rgba(255,255,255,.94); border-radius: 17px;
    color: #193729; text-decoration: none;
    box-shadow: 0 10px 26px rgba(30, 100, 66, .11);
    transition: border-color .22s, transform .22s, box-shadow .22s;
}
/* 흰 버튼 안에서 금빛(테마별 색상) 물결이 차오르는 효과 */
.link-card::before {
    content: ''; position: absolute; inset: -55% -43%; z-index: -1;
    background:
        radial-gradient(ellipse at 18% 65%, var(--wave-light) 0, transparent 44%),
        radial-gradient(ellipse at 72% 42%, var(--wave-deep) 0, transparent 56%),
        linear-gradient(105deg, var(--wave-light), var(--wave-main), var(--wave-deep), var(--wave-light));
    opacity: 0; transform: translateX(-105%) rotate(-7deg);
    pointer-events: none;
}
/* 물결 위 잔물결 패턴 */
.link-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: repeating-radial-gradient(ellipse at 0% 105%, transparent 0 14px, rgba(255,255,255,.35) 15px 18px, transparent 19px 38px);
    opacity: 0; transform: translateX(-24%);
    pointer-events: none;
}
.link-card:hover, .link-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--wave-deep);
    box-shadow: 0 15px 34px rgba(44, 92, 53, .18);
    outline: none;
}
.link-card:hover::before, .link-card:focus-visible::before {
    opacity: 1;
    animation: wave-fill 850ms cubic-bezier(.18,.78,.18,1) forwards;
}
.link-card:hover::after, .link-card:focus-visible::after {
    opacity: .75;
    animation: wave-ripples 1.9s ease-in-out infinite;
}
@keyframes wave-fill {
    from { transform: translateX(-105%) rotate(-7deg); }
    70% { transform: translateX(4%) rotate(2deg); }
    to { transform: translateX(9%) rotate(0deg); }
}
@keyframes wave-ripples {
    0% { transform: translateX(-24%) scale(1.05); opacity: .25; }
    50% { transform: translateX(7%) scale(1.1); opacity: .82; }
    100% { transform: translateX(25%) scale(1.16); opacity: .25; }
}
.link-icon, .link-copy, .link-arrow { position: relative; z-index: 1; }
.link-icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 13px;
    color: var(--accent); background: rgba(67,139,95,.09);
    font-size: 24px; font-weight: 800;
    transition: background .2s;
}
.link-card:hover .link-icon, .link-card:focus-visible .link-icon { background: rgba(255,255,255,.57); }
.link-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.link-copy strong { font-size: 15px; }
.link-copy small { font-size: 12px; color: #4e6a5c; }
.link-arrow { color: #48705a; font-size: 24px; line-height: 1; }
footer {
    display: flex; justify-content: space-between; gap: 12px;
    border-top: 1px solid var(--line); margin-top: 48px; padding-top: 19px;
    font-size: 10px; letter-spacing: .06em; color: var(--muted);
}
.heart { color: var(--accent); }
.error-shell { text-align: center; padding-top: 19vh; }
.error-number { font-size: clamp(72px, 16vw, 106px); font-weight: 850; color: var(--accent); letter-spacing: -.075em; }
.error-shell h1 { font-size: 25px; }
.muted { color: var(--muted); line-height: 1.6; }
@media (max-width: 400px) {
    .shell { padding-top: 34px; }
    .profile-card { padding-top: 34px; }
    footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .link-card, .link-icon { transition: none; }
    .link-card:hover::before, .link-card:focus-visible::before {
        animation: none; opacity: 1; transform: translateX(9%);
    }
    .link-card:hover::after, .link-card:focus-visible::after {
        animation: none; opacity: .3; transform: none;
    }
}