/* PONGE Landing Page Styles */

:root {
    /* 2026-04-21: onSurface 토큰 추가 — 모바일 앱 onSurface와 통일, 검정 계열 색상 전부 이 토큰 사용 */
    --color-onsurface: #13171D;

    /* 2026-04-21: 브랜드 컬러 토큰 통일 — 기존 var(--color-brand) → Flutter 앱과 동일한 #FF4D0D */
    --color-brand: #FF4D0D;
    --color-brand-dark: #BF3200;
    --color-brand-gradient: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));

    /* Core Colors */
    --color-primary: var(--color-onsurface);
    --color-bg: #FFFFFF;
    --color-surface: #F9F9F8;
    --color-secondary: #E5E5E1;
    --color-border: #E8E8E6;
    --color-error: #E03131;

    /* Text Colors */
    --text-primary: var(--color-onsurface);
    --text-secondary: #72726E;
    --text-hint: #A8A8A2;

    /* Typography */
    --font-family-base: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-base);
    /* 2026-04-21: 배경 흰색 + 본문 검정으로 통일 — 바디섹션과 헤더/푸터 톤 맞춤 */
    background-color: var(--color-bg);
    color: var(--color-onsurface);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Typography Classes */
.text-display {
    font-size: 57px;
    font-weight: 800;
    letter-spacing: -1.0px;
    line-height: 1.2;
    word-break: keep-all;
}

.text-h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0px;
}

.text-h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.text-h3 {
    font-size: 20px;
    font-weight: 600;
}

.text-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

.text-caption {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Component Styles */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-surface);
    border-radius: 16px;
    padding: 0 24px;
    height: 58px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.2px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}

.btn-primary:hover {
    opacity: 0.9;
}

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 24px;
}

.input-field {
    width: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 18px 20px;
    font-size: 16px;
    outline: none;
    color: var(--text-primary);
}

.input-field:focus {
    border-color: var(--color-primary);
    border-width: 1.5px;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
/* 2026-04-21: 헤더 배경 흰색 + 검정 텍스트 — 바디섹션과 톤 통일 */
header {
    height: 60px;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-onsurface);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    /* 2026-04-10: 기본 메뉴 우측 정렬, 로고 있으면 양쪽 정렬 */
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.header-content.has-logo {
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.logo-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
}

/* Common Sections */
.hero {
    flex: 1;
    background-color: var(--color-brand);
    padding: 120px 0;
    text-align: center;
    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
}

.hero-logo-img {
    height: 84px;
}

.hero-logo-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 4.5rem;
    font-weight: 400;
    color: #fff;
}

.hero-main {
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff;
    margin: 0 0 10px 0;
    letter-spacing: 0.02em;
}

.hero-sub {
    font-size: 0.8rem;
    font-weight: 300;
    /* 2026-04-10: FF4400 배경 대비 가독성 개선 */
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 48px 0;
    letter-spacing: 0.01em;
}

.download-badges {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

/* 2026-04-05 09:30: 2행 세로 배치로 변경 — 배지 SVG 종횡비 차이 해소 */
.download-badges-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.download-badges-row .badge-link img {
    width: auto;
    height: auto;
}

/* 2026-04-21 11:50: 다운로드 페이지 — 일본어 Google Play 배지가 App Store보다 크게 보이는 문제 보정 */
.download-badges-row .badge-link img[src*="google-play-ja"] {
    height: 38px;
}

.ponge-black-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 24px;
    background-color: var(--color-onsurface);
    border: 2px solid #fff;
    border-radius: 10px;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 12.6px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.features {
    padding: 80px 0;
    background-color: var(--color-bg);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.feature-card h3 {
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* 2026-04-21: 마크다운 컨텐츠 — 흰 배경 기준 검정 텍스트로 재설정
   notices/doc 페이지가 .landing-index 아래로 통일되면서 별도 래퍼 불필요 */
.markdown-content {
    color: var(--color-onsurface);
    line-height: 1.75;
    font-size: 16px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    color: var(--color-onsurface);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.markdown-content h1 {
    font-size: 32px;
    font-weight: 700;
}

.markdown-content h2 {
    font-size: 24px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

.markdown-content h3 {
    font-size: 20px;
    font-weight: 600;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol {
    color: var(--color-onsurface);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.markdown-content ul,
.markdown-content ol {
    padding-left: 20px;
}

.markdown-content li {
    margin-bottom: 0.5rem;
}

.markdown-content strong {
    color: var(--color-onsurface);
    font-weight: 600;
}

.markdown-content a {
    color: #0056B3;
    text-decoration: underline;
}

.markdown-content a:hover {
    color: #003d82;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
}

.markdown-content pre {
    overflow-x: auto;
    max-width: 100%;
}

/* 2026-04-21: 랜딩 서브 페이지(notices/doc) 공통 섹션 — landing-hero와 동일한
   패딩·max-width 체계를 쓰되 content 성격에 따라 narrow variant 지원 */
.landing-section {
    flex: 1;
    padding: 80px 40px 48px;
    background: var(--color-bg);
}

.landing-section__inner {
    max-width: 1280px;
    margin: 0 auto;
}

.landing-section .doc-status {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 0;
}

/* 2026-04-21 12:10: 이용약관/개인정보처리방침 카드 스타일 — 가독성 강화 */
.doc-page {
    max-width: 800px;
    margin: 0 auto;
}

.doc-page__title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-onsurface);
    margin-bottom: 24px;
}

.doc-page__card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 2px 8px rgba(19, 23, 29, 0.04);
}

/* 카드 내부 첫 요소 상단 여백 제거 — 이중 패딩 방지 */
.doc-page__card > *:first-child {
    margin-top: 0;
}

/* 2026-03-16 14:00: 햄버거 메뉴 버튼 스타일 추가 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.menu-toggle svg {
    display: block;
}

/* Navigation */
nav {
    display: flex;
    gap: 24px;
    align-items: center;
}

/* 2026-04-21: 네비 링크 색상 흰색 → 검정 (헤더 배경이 흰색으로 변경됨) */
nav a {
    color: var(--color-onsurface);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--color-brand);
}

/* 2026-04-21: 언어 선택 UI — <details> 기반 드롭다운
     현재 언어(원어 이름) 표시 + 클릭 시 국기+원어 이름 리스트 */
.lang-picker {
    position: relative;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--color-border);
}

.lang-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-onsurface);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family-base);
    cursor: pointer;
    list-style: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.lang-picker__trigger::-webkit-details-marker {
    display: none;
}

.lang-picker__trigger:hover {
    border-color: var(--color-onsurface);
}

.lang-picker[open] > .lang-picker__trigger {
    border-color: var(--color-onsurface);
    background-color: var(--color-surface);
}

.lang-picker__globe {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lang-picker__current {
    letter-spacing: -0.1px;
    white-space: nowrap;
}

.lang-picker__caret {
    width: 10px;
    height: 10px;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.lang-picker[open] .lang-picker__caret {
    transform: rotate(180deg);
}

.lang-picker__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 200;
}

.lang-picker__menu li {
    list-style: none;
}

.lang-picker__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-onsurface);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family-base);
    transition: background-color 0.12s;
    /* 2026-04-21: 좁은 드롭다운 폭에서 이름이 줄바꿈 되지 않도록 */
    white-space: nowrap;
}

.lang-picker__option:hover {
    background: var(--color-surface);
}

.lang-picker__option--active {
    color: var(--color-brand);
    font-weight: 600;
}

.lang-picker__option-flag {
    font-size: 18px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    flex-shrink: 0;
}

.lang-picker__option-name {
    flex: 1;
    letter-spacing: -0.1px;
}

.lang-picker__option-check {
    width: 14px;
    height: 14px;
    color: var(--color-brand);
    flex-shrink: 0;
}

/* Footer */
/* 2026-04-21: 푸터 배경 흰색 + 회색 텍스트 — 바디섹션과 톤 통일
     2026-04-21 15:00: 비고정으로 환원 — body flex sticky-footer 패턴이 짧은 페이지에서도 viewport 하단으로 자동 push */
footer {
    padding: 40px 0;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.copyright {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* 2026-03-16 14:00: 태블릿 브레이크포인트 추가 */
@media (max-width: 1024px) {
    .hero {
        padding: 80px 0;
    }

    .hero-logo-text {
        font-size: 3.5rem;
    }

    .hero-logo-img {
        height: 64px;
    }

    nav {
        gap: 16px;
    }
}

/* 2026-03-16 14:00: 모바일 레이아웃 — 햄버거 메뉴 전환, 타이포그래피 축소 */
@media (max-width: 768px) {
    .text-display {
        font-size: 40px;
    }

    .hero {
        padding: 64px 0;
    }

    .hero-logo-img {
        height: 48px;
    }

    .hero-logo-text {
        font-size: 2.5rem;
    }

    .hero-main {
        font-size: 0.88rem;
    }

    .hero-sub {
        font-size: 0.715rem;
        margin-bottom: 32px;
    }

    .hero-logo {
        margin-bottom: 24px;
    }

    /* 햄버거 메뉴 */
    .menu-toggle {
        display: block;
    }

    header {
        height: 56px;
    }

    .header-content {
        flex-direction: row;
        padding: 0 16px;
    }

    nav {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        /* 2026-04-21: 모바일 햄버거 드롭다운 배경 흰색 + 검정 텍스트 (헤더와 동일) */
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        padding: 16px 24px;
        gap: 12px;
        z-index: 999;
    }

    nav.open {
        display: flex;
    }

    nav a {
        padding: 8px 0;
        font-size: 15px;
    }

    /* 2026-04-21: 모바일 햄버거에서 언어 국기 배열 — 구분선 위치 조정 */
    /* 2026-04-21: 모바일 햄버거 내 언어 드롭다운 */
    .lang-picker {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        padding-top: 8px;
        border-top: 1px solid var(--color-border);
    }

    .lang-picker__menu {
        right: auto;
        left: 0;
        min-width: 100%;
    }
}

/* 2026-03-16 14:00: 소형 모바일 브레이크포인트 (iPhone SE 등) */
@media (max-width: 400px) {
    .hero-logo-text {
        font-size: 2rem;
    }

    .hero-logo-img {
        height: 36px;
    }

    .hero-logo {
        gap: 10px;
    }

    .hero-main {
        font-size: 0.82rem;
    }

    .hero-sub {
        font-size: 0.68rem;
    }

    .container {
        padding: 0 16px;
    }

    .hero {
        padding: 48px 0;
    }
}

/* ============================================================
 * 2026-04-21: PONGE 랜딩 전면 리디자인 (/  index 전용)
 * .landing-index 래퍼로 스코프 격리 — notices/doc/download 영향 없음.
 * 번들 PONGE-Landing-Bundle.html 의 LandingDesktop/LandingMobile을
 * ERB/CSS로 포팅. 폰 안쪽 mock UI는 phone-shouting / phone-messages.
 * ============================================================ */

/* 루트 래퍼 — body 오렌지 배경을 흰색으로 덮어씀 */
.landing-index {
    background-color: var(--color-bg);
    color: var(--color-onsurface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 히어로 섹션 */
.landing-hero {
    flex: 1;
    padding: 80px 40px 48px;
    background: var(--color-bg);
}

.landing-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
}

.landing-hero__headline {
    font-size: 72px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2.4px;
    color: var(--color-onsurface);
    margin: 0;
    word-break: keep-all;
}

/* 2026-04-21: 번개 단어 브랜드 색상 — 그라데이션 대신 솔리드로 더 선명하게 */
.landing-hero .hero-gradient {
    color: var(--color-brand);
}

/* 2026-04-21: 아이콘 + 강조 단어를 한 줄에 묶음 — 영어 등 좁은 폭에서 줄바꿈 분리 방지 */
.landing-hero__headline .hero-keep {
    white-space: nowrap;
}

/* PONGE 3D 아이콘 — 헤드라인 font-size에 비례 (em 단위로 자동 스케일)
   2026-04-21: 아이콘과 번개 텍스트 간격 최소화 — margin 제거 + 음수 letter-spacing으로 타이트 정렬 */
.hero-ponge-icon {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.08em;
    margin-right: -0.08em;
    object-fit: contain;
}

.landing-hero__description {
    margin-top: 28px;
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-secondary);
    letter-spacing: -0.3px;
    max-width: 500px;
}

.landing-hero__description p {
    margin: 0;
}

.landing-hero__badges {
    display: flex;
    gap: 12px;
    margin-top: 40px;
    align-items: center;
    flex-wrap: wrap;
}

.landing-hero__badge {
    display: inline-block;
    transition: transform 0.15s;
}

.landing-hero__badge:hover {
    transform: translateY(-2px);
}

.landing-hero__badge img {
    height: 52px;
    width: auto;
    display: block;
}

/* 2026-04-21 11:50: 일본어 App Store 배지가 짧아 Google Play가 크게 보이는 문제 보정 — 시각 면적 균등 */
.landing-hero__badge--narrow img {
    height: 50px;
}

/* 폰 목업 컨테이너 */
.landing-hero__phones {
    position: relative;
    height: 640px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-hero__glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 77, 13, 0.12) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.landing-phone {
    position: absolute;
}

/* 2026-04-21 13:05: 트리오 레이아웃 — 번들 PhoneTrio의 3폰 배치
     back-left(board) / center-front(shouting) / back-right(messages) */
.landing-phone--left {
    left: 4%;
    top: 70px;
    transform: rotate(-7deg);
    z-index: 1;
}

.landing-phone--center {
    left: 50%;
    top: 0;
    transform: translateX(-50%) rotate(-1deg);
    z-index: 3;
}

.landing-phone--right {
    right: 4%;
    top: 90px;
    transform: rotate(6deg);
    z-index: 2;
}

/* 기본 폰 크기 — 좌/우 뒷 폰 */
.landing-phone__body {
    width: 240px;
    height: 510px;
    border-radius: 38px;
    background: #0F0F0F;
    padding: 6px;
    box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* 센터-프론트 폰은 더 크게 (번들 260×550) */
.landing-phone--center .landing-phone__body {
    width: 260px;
    height: 550px;
}

.landing-phone__screen {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.landing-phone__notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 24px;
    border-radius: 12px;
    background: #000;
    z-index: 100;
}

/* 플로팅 칩 */
/* 2026-04-21 13:50: 칩 사이즈 30% 확대 후 추가 20% 확대
     (font-size 16→19, padding 10/18→12/22) */
.landing-hero__chip {
    position: absolute;
    padding: 12px 22px;
    border-radius: 100px;
    font-size: 19px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    z-index: 3;
}

/* 2026-04-21 13:40: 트리오 칩 — .landing-hero__phones 컨테이너 기준 절대 위치.
     폰(z-index 1/2/3) stacking context 밖에서 렌더되어 항상 최상위 */
/* board 칩: 오운완 인증 (좌측 폰 상단) */
.landing-hero__chip--board {
    top: 60px;
    left: calc(4% - 16px);
    background: #fff;
    color: #333;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: rotate(7deg);
    z-index: 10;
}

/* shouting 칩: 지금, 내 근처 샤우팅 (중앙 폰 최상단) */
.landing-hero__chip--shouting {
    top: -16px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    background: var(--color-brand);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(255, 77, 13, 0.3);
    z-index: 11;
}

/* chat 칩: 실시간 채팅 (우측 폰 하단) */
.landing-hero__chip--chat {
    bottom: 80px;
    right: calc(4% - 26px);
    background: var(--color-onsurface);
    color: #fff;
    transform: rotate(-6deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* ============================================================
 * 폰 목업 — 샤우팅(지도) 스크린 내부 UI
 * ============================================================ */
.phone-shouting {
    height: 100%;
    background: #F2F2F0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.phone-shouting__statusbar {
    height: 44px;
    flex-shrink: 0;
}

.phone-shouting__nearby {
    margin: 8px 10px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.phone-shouting__nearby-header {
    background: var(--color-brand);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phone-shouting__nearby-header span {
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.1px;
}

.phone-shouting__avatar-row {
    display: flex;
    gap: 6px;
    padding: 8px;
}

.phone-shouting__avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 40px;
}

.phone-shouting__avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EEE;
    overflow: hidden;
    flex-shrink: 0;
}

.phone-shouting__avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phone-shouting__avatar-label {
    font-size: 5.5px;
    color: var(--color-brand);
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -0.1px;
}

.phone-shouting__avatar-distance {
    font-size: 5.5px;
    color: #9A9A9A;
    font-weight: 500;
}

.phone-shouting__map {
    flex: 1;
    position: relative;
    /* 2026-04-21 12:15: Google Maps 스타일 지도 리디자인 — 따뜻한 중립색 베이스 */
    background: #F2F1EC;
    margin-top: -2px;
}

.phone-shouting__streets {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.phone-shouting__pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-onsurface);
    color: #fff;
    padding: 4px 9px;
    border-radius: 100px;
    font-size: 6.5px;
    font-weight: 600;
    letter-spacing: -0.1px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 4;
}

.phone-shouting__pill--top {
    top: 8px;
}

.phone-shouting__pill--bottom {
    bottom: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.phone-shouting__pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2026-04-21 12:50: primary 핀은 좌표 중심, 일반/작은 핀은 하단(핀 팁)이 좌표에 앵커 */
.phone-shouting__pin--primary {
    z-index: 5;
    transform: translate(-50%, -50%);
}

.phone-shouting__pin--normal,
.phone-shouting__pin--small {
    transform: translate(-50%, -100%);
}

/* 2026-04-21 13:20: 아바타 래퍼 — overflow:visible 로 하트 뱃지가 원 밖으로 나올 수 있게 */
.phone-shouting__pin-avatar {
    position: relative;
    display: block;
    overflow: visible;
}

.phone-shouting__pin-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background: #eee;
    position: relative;
}

.phone-shouting__pin-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phone-shouting__pin--primary .phone-shouting__pin-img {
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-brand);
}

.phone-shouting__pin--small .phone-shouting__pin-img {
    width: 22px;
    height: 22px;
}

/* 2026-04-21 12:50: 하트 테일 — 아바타 원 우하단 모서리 장식 뱃지 (번들 디자인)
     pin-avatar 기준 absolute; pin-img 가 래퍼 크기를 결정하므로 래퍼 우하단 = 원 우하단 */
.phone-shouting__pin-tail {
    fill: var(--color-brand);
    position: absolute;
    bottom: -2px;
    right: -2px;
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.phone-shouting__pin-bubble {
    background: #fff;
    border-radius: 6px;
    padding: 2px 5px;
    font-size: 6px;
    font-weight: 700;
    color: var(--color-brand);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    margin-top: 4px;
    letter-spacing: -0.1px;
    text-align: center;
}

.phone-shouting__pin--primary .phone-shouting__pin-bubble {
    border: 1px solid var(--color-brand);
}

.phone-shouting__pin-time {
    font-size: 5px;
    color: #757575;
    font-weight: 500;
    margin-bottom: 1px;
}

.phone-shouting__pin-speech {
    font-size: 6px;
}

/* ============================================================
 * 폰 목업 — 메시지 스크린 내부 UI
 * ============================================================ */
.phone-messages {
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.phone-messages__statusbar {
    height: 44px;
    flex-shrink: 0;
}

.phone-messages__header {
    padding: 6px 14px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phone-messages__title {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-onsurface);
    letter-spacing: -0.4px;
    margin: 0;
}

.phone-messages__search {
    color: var(--color-onsurface);
}

.phone-messages__list {
    flex: 1;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}

.phone-messages__item {
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-messages__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #EEE;
    flex-shrink: 0;
    overflow: hidden;
}

.phone-messages__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phone-messages__body {
    flex: 1;
    min-width: 0;
}

.phone-messages__name {
    font-size: 7.5px;
    font-weight: 700;
    color: var(--color-onsurface);
    letter-spacing: -0.2px;
    margin-bottom: 1px;
}

.phone-messages__preview {
    font-size: 6.5px;
    color: #757575;
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-messages__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.phone-messages__badge {
    background: var(--color-brand);
    color: #fff;
    min-width: 11px;
    height: 11px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    font-weight: 700;
    padding: 0 3px;
}

.phone-messages__date {
    font-size: 6px;
    color: #9A9A9A;
}

/* ============================================================
 * 폰 목업 — 공용 하단 네비 (샤우팅/메시지 공통)
 * ============================================================ */
.phone-bottom-nav {
    position: relative;
    padding: 0 10px 10px;
    flex-shrink: 0;
}

.phone-bottom-nav__bar {
    background: #fff;
    border-radius: 100px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.phone-bottom-nav__icon {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575;
}

.phone-bottom-nav__icon svg {
    width: 11px;
    height: 11px;
}

/* 2026-04-21 12:45: 활성 탭 — 오렌지 원 + 아이콘 1.25배 확대 (번들 BottomNav active 상태) */
.phone-bottom-nav__icon--active {
    width: 30px;
    height: 30px;
    background: var(--color-brand);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(255, 77, 13, 0.35);
}

.phone-bottom-nav__icon--active svg {
    width: 13px;
    height: 13px;
}

/* 활성 탭 위 dot 배지는 숨김 — 오렌지 원과 겹쳐 보이지 않도록 */
.phone-bottom-nav__icon--active.phone-bottom-nav__icon--dot::after {
    display: none;
}

.phone-bottom-nav__icon--dot::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-brand);
    border: 1px solid #fff;
}

/* 2026-04-21 12:45: 중앙 인라인 홈탭 — lightning 외 활성 탭에서 사용, 투명도 0.55 */
.phone-bottom-nav__icon--inline-center {
    opacity: 0.55;
}

.phone-bottom-nav__inline-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.phone-bottom-nav__spacer {
    width: 28px;
    height: 28px;
}

/* 2026-04-21 12:15: 중앙 홈탭 버튼 — 흰 배경 + PONGE 3D 앱 아이콘 이미지 (오렌지 그림자) */
.phone-bottom-nav__center {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 77, 13, 0.28), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.phone-bottom-nav__center-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* ============================================================
 * 2026-04-21 13:00: 폰 목업 — 오운완 게시판 스크린 내부 UI
 * 번들 BoardScreen 포팅 (게시판 헤더/탭/featured/그리드/FAB)
 * ============================================================ */
.phone-board {
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.phone-board__statusbar {
    height: 14px;
    flex-shrink: 0;
}

.phone-board__header {
    padding: 6px 12px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phone-board__title {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-onsurface);
    letter-spacing: -0.3px;
    margin: 0;
}

.phone-board__search {
    color: var(--color-onsurface);
}

.phone-board__tabs {
    display: flex;
    gap: 10px;
    padding: 2px 12px 6px;
    overflow: hidden;
}

.phone-board__tab {
    position: relative;
    padding-bottom: 3px;
    flex-shrink: 0;
}

.phone-board__tab span:first-child {
    font-size: 8.5px;
    font-weight: 500;
    color: #9A9A9A;
    letter-spacing: -0.2px;
}

.phone-board__tab--active span:first-child {
    font-weight: 800;
    color: var(--color-onsurface);
}

.phone-board__tab-dot {
    position: absolute;
    top: -1px;
    right: -4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-brand);
}

.phone-board__tab-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.2px;
    background: var(--color-onsurface);
}

.phone-board__featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 0 0 4px;
}

.phone-board__date {
    padding: 5px 12px 3px;
    font-size: 6.5px;
    font-weight: 600;
    color: #757575;
    letter-spacing: -0.1px;
}

.phone-board__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5px;
    flex: 1;
    overflow: hidden;
    align-content: start;
}

.phone-board__tile {
    position: relative;
    overflow: hidden;
}

.phone-board__manga {
    width: 100%;
    height: 100%;
    display: block;
}

.phone-board__tile-tag {
    position: absolute;
    top: 3px;
    left: 4px;
    font-size: 5.5px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.phone-board__fabs {
    position: absolute;
    right: 8px;
    bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 4;
}

.phone-board__fab {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.phone-board__fab--dark {
    background: var(--color-onsurface);
}

/* ============================================================
 * 랜딩 반응형 — 태블릿/모바일
 * ============================================================ */
@media (max-width: 1024px) {
    .landing-hero,
    .landing-section {
        padding: 56px 24px 32px;
    }

    .landing-hero__inner {
        gap: 32px;
    }

    .landing-hero__headline {
        font-size: 56px;
        letter-spacing: -1.8px;
    }

    .landing-hero__phones {
        height: 520px;
    }

    .landing-phone__body {
        width: 200px;
        height: 430px;
    }

    /* 태블릿에서도 center 폰은 약간 더 크게 유지 */
    .landing-phone--center .landing-phone__body {
        width: 220px;
        height: 470px;
    }
}

@media (max-width: 768px) {
    .landing-hero,
    .landing-section {
        padding: 32px 20px 24px;
    }

    .doc-page__title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .doc-page__card {
        padding: 24px 20px;
        border-radius: 12px;
    }

    /* 2026-04-21 14:05: 모바일에서 copy(배지 포함) ↔ phones(스크린샷) 사이 간격 확대
         24px → 48px (다운로드 버튼과 폰 목업 시각 분리) */
    .landing-hero__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .landing-hero__headline {
        font-size: 40px;
        letter-spacing: -1.4px;
    }

    .landing-hero__description {
        font-size: 15px;
        margin-top: 18px;
        letter-spacing: -0.2px;
    }

    /* 2026-04-21 14:00: 모바일에서 배지 2개(앱스토어/구글플레이) 간격 확대 —
         기본 12px → 24px (탭 타겟 분리 + 시각 호흡) */
    .landing-hero__badges {
        margin-top: 24px;
        justify-content: center;
        gap: 24px;
    }

    /* 2026-04-21 13:30: 모바일에서도 트리오 3폰 모두 노출 —
         desktop 위치/회전 유지, scale로 전체 축소하여 좁은 폭에 맞춤.
         각 폰 transform-origin을 고정하여 축소 시 화면 밖으로 밀리지 않게 함 */
    .landing-hero__phones {
        height: 360px;
    }

    .landing-phone--left {
        left: -2%;
        top: 50px;
        transform: rotate(-7deg) scale(0.52);
        transform-origin: left top;
        z-index: 1;
    }

    .landing-phone--center {
        left: 50%;
        top: 0;
        transform: translateX(-50%) rotate(-1deg) scale(0.58);
        transform-origin: top center;
        z-index: 3;
    }

    .landing-phone--right {
        right: -2%;
        top: 60px;
        transform: rotate(6deg) scale(0.52);
        transform-origin: right top;
        z-index: 2;
    }

    /* 폰 body는 desktop 기본 크기 유지 (scale로만 축소) */
    .landing-phone__body {
        width: 240px;
        height: 510px;
    }

    .landing-phone--center .landing-phone__body {
        width: 260px;
        height: 550px;
    }

    /* 2026-04-21 13:50: 모바일 칩도 30% 확대 후 추가 20% 확대
         (font 13→16, padding 8/13→10/16) */
    .landing-hero__chip {
        font-size: 16px;
        padding: 10px 16px;
    }

    .landing-footer {
        padding: 24px 20px;
    }

    .landing-footer__inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .landing-hero__headline {
        font-size: 34px;
        letter-spacing: -1.2px;
    }

    .landing-hero__badge img {
        height: 44px;
    }

    .landing-hero__badge--narrow img {
        height: 42px;
    }

    /* 2026-04-21 13:40: 초소형 화면에서 트리오 더 축소 */
    .landing-hero__phones {
        height: 320px;
    }

    .landing-phone--left {
        transform: rotate(-7deg) scale(0.45);
    }

    .landing-phone--center {
        transform: translateX(-50%) rotate(-1deg) scale(0.5);
    }

    .landing-phone--right {
        transform: rotate(6deg) scale(0.45);
    }
}