:root{
    --primary:#2f6fed;
    --dark:#111827;
    --muted:#6b7280;
    --bg:#f5f7fb;
    --card:#ffffff;
}
*{box-sizing:border-box}
body.app-body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif;color:var(--dark)}
.app-shell{max-width:560px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:60px}
.app-topbar{position:sticky;top:0;z-index:10;background:rgba(245,247,251,.62);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;padding:5px 18px 5px 5px;border-bottom:1px solid rgba(0,0,0,.04)}
.app-brand{font-size:21px;font-weight:800;letter-spacing:-.04em}
.app-subtitle{font-size:12px;color:var(--muted);}
.profile-circle{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--dark);text-decoration:none;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.app-main{padding:16px}
.card-soft{background:var(--card);border:0;border-radius:22px;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.hero-card{background:linear-gradient(135deg,#17315f,#2f6fed);color:#fff;border-radius:26px;padding:22px;box-shadow:0 18px 36px rgba(47,111,237,.28)}
.hero-card .badge{background:rgba(255,255,255,.18)}
.section-title{font-size:18px;font-weight:800;letter-spacing:-.04em;margin:24px 0 12px}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:2000;max-width:560px;width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-top:1px solid rgba(0,0,0,.06);padding:8px 8px calc(-2px + env(safe-area-inset-bottom))}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#6b7280;font-size:11px;padding:0px 0;border-radius:14px}
.bottom-nav i{font-size:20px;margin-bottom:2px}
.bottom-nav a:hover,.bottom-nav a:active{background:#eef4ff;color:var(--primary)}
.map-box{height:420px;border-radius:22px;overflow:hidden;background:#dbeafe;position:relative}
.map-empty{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#374151}
.btn-main{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:16px;font-weight:700;padding:12px 16px}
.btn-main:hover{background:#235fd2;border-color:#235fd2;color:#fff}
.form-control,.form-select{border-radius:14px;padding:10px 10px;border-color:#e5e7eb}
.form-select{background-position: right .35rem center;}
.auth-card{background:#fff;border-radius:26px;padding:24px;box-shadow:0 18px 36px rgba(15,23,42,.08)}
.quiz-option{border:1px solid #e5e7eb;border-radius:16px;padding:12px 14px;margin-bottom:10px;background:#fff;cursor:pointer}
.quiz-option input{margin-right:8px}
.stamp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stamp-card{background:#fff;border-radius:20px;padding:14px;text-align:center;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.stamp-icon{width:64px;height:64px;border-radius:50%;background:#eef4ff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 8px}
.child-banner{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:20px;padding:14px;margin-bottom:14px;font-weight:700}

.place-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.place-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    border: 1px solid rgba(226, 232, 240, .9);
}

.place-thumb {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 14px;
    background: #f3f4f6;
    flex: 0 0 auto;
}

.place-card-body {
    min-width: 0;
    flex: 1;
}

.place-title {
    font-weight: 800;
    font-size: 15px;
    color: #111827;
    line-height: 1.35;
}

.place-meta {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

.place-desc {
    margin-top: 6px;
    font-size: 13px;
    color: #374151;
    line-height: 1.45;
}

.mini-badge {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 420px) {
    .place-thumb {
        width: 84px;
        height: 84px;
    }

    .place-title {
        font-size: 14px;
    }

    .place-desc {
        display: none;
    }
}

.app-detail-header-title {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.app-detail-back-btn {
    display: flex;
    width: var(--ref-sizing-500, 40px);
    height: var(--ref-sizing-500, 40px);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.app-detail-title-text {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.place-card.is-stamped {
    border: 1px solid rgba(22, 163, 74, .35);
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 70%);
}

.stamp-complete-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

/* 퀴즈 한 문제씩 진행 화면 */
.quiz-head-card h4 {
    letter-spacing: -0.04em;
}

.quiz-card {
    overflow: hidden;
}

.quiz-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.quiz-progress > div {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width .25s ease;
}

.quiz-question {
    line-height: 1.55;
    letter-spacing: -0.03em;
}

.quiz-choice-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 10px;
    font-weight: 700;
    color: #111827;
}

.quiz-choice-btn.selected,
.quiz-choice-btn:active {
    border-color: var(--primary);
    background: #eef4ff;
}

.quiz-choice-btn:disabled {
    opacity: .8;
}

.quiz-choice-no {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #4b5563;
    flex: 0 0 28px;
}

.quiz-step-result {
    border-radius: 18px;
    padding: 14px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.6;
}

.quiz-step-result.correct {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #bbf7d0;
}

.quiz-step-result.wrong {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.quiz-complete-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 14px;
}

.quiz-master-badge {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.quiz-progress-text {
    font-size: 13px;
    color: var(--muted);
    font-weight: 700;
}

.place-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 12px 0;
}

.place-gallery img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 14px;
    flex: 0 0 auto;
}


.history-gallery-section {
    margin: 18px 0 0 0;
}

.history-gallery-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.history-gallery-title {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.history-gallery-count {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.gallery-zoom-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.history-gallery-card {
    position: relative;
    overflow: hidden;
/*    border-radius: 18px;*/
    background: #f3f4f6;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.history-gallery-card img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    cursor: pointer;
}

.history-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.history-gallery-zoom {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(17, 24, 39, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.history-gallery-pagination {
    position: static;
    margin-top: 10px;
}

.gallery-fullscreen {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    flex-direction: column;
    background: rgba(0, 0, 0, .94);
}

.gallery-fullscreen.active {
    display: flex;
}

.gallery-lock {
    overflow: hidden;
}

.gallery-fullscreen-header {
    position: relative;
    z-index: 2;
    height: 56px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
}

.gallery-fullscreen-title {
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gallery-fullscreen-close {
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.fullscreenGallerySwiper {
    flex: 1;
    width: 100%;
    height: calc(100vh - 56px);
}

.fullscreen-gallery-item {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-gallery-item img {
    max-width: 100%;
    max-height: calc(100vh - 130px);
    object-fit: contain;
}

.fullscreen-gallery-caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 34px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    backdrop-filter: blur(8px);
}

.fullscreen-gallery-prev,
.fullscreen-gallery-next {
    color: #fff;
}

.fullscreen-gallery-pagination {
    bottom: 10px !important;
}

.fullscreen-gallery-pagination .swiper-pagination-bullet,
.history-gallery-pagination .swiper-pagination-bullet {
    background: #111827;
    opacity: .25;
}

.fullscreen-gallery-pagination .swiper-pagination-bullet-active,
.history-gallery-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

.gallery-fullscreen .swiper-pagination-bullet {
    background: #fff;
}

@media (max-width: 575px) {
    .history-gallery-card img {
        height: 220px;
    }

    .fullscreen-gallery-caption {
        bottom: 28px;
        font-size: 13px;
    }
}

.point-progress-badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.place-point-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #eef2f7;
}

.place-point-item:first-child {
    border-top: 0;
}

.place-point-item.is-stamped {
    background: linear-gradient(90deg, rgba(22, 163, 74, .08), transparent);
}

.place-point-thumb {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    object-fit: cover;
    background: #f3f4f6;
    flex: 0 0 auto;
}

.place-point-thumb.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.place-point-body {
    flex: 1;
    min-width: 0;
}

.place-point-name {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}

.place-point-meta {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.place-point-desc {
    margin-top: 5px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.4;
}

.place-point-btn {
    border: 0;
    border-radius: 999px;
    padding: 7px 11px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.place-point-done {
    border-radius: 999px;
    padding: 7px 11px;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 800;
}

.point-map-wrap {
    position: relative;
}

.point-map-box {
    width: 100%;
    height: 320px;
    border-radius: 18px;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid rgba(226, 232, 240, .9);
}

.point-map-empty {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.point-location-btn {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    border: 0;
    border-radius: 999px;
    padding: 9px 13px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.point-map-guide {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
}

.guide-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    margin-right: -5px;
}

.guide-dot.current {
    background: #2563eb;
}

.guide-dot.point {
    background: #ff2e5e;
}

.guide-dot.stamped {
    background: #16a34a;
}

.guide-line {
    width: 10px;
    height: 10px;
    border: 2px solid #2563eb;
    border-radius: 999px;
    display: inline-block;
    opacity: .55;
    margin-right: -5px;
    background: rgb(37 99 235 / 30%);
}

.point-progress-badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.point-map-marker {
    position: relative;
    width: 42px;
    height: 48px;
}

/*
.point-map-marker::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: inherit;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
*/

.point-map-marker.normal,
.point-map-marker.stamped {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 3px solid #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.point-map-marker.normal {
    background: #111827;
}

.point-map-marker.stamped {
    background: #16a34a;
}

.point-map-marker.image {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid #ff2e5e;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    background: #f3f4f6;
}

.point-map-marker.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.point-current-marker {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pointPulse 1.6s infinite;
}

.point-current-marker span {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #2563eb;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .45);
}

@keyframes pointPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, .38);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

.place-point-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #eef2f7;
}

.place-point-item:first-child {
    border-top: 0;
}

.place-point-item.is-stamped {
    background: linear-gradient(90deg, rgba(22, 163, 74, .09), transparent);
}

.place-point-item.is-near {
    background: linear-gradient(90deg, rgba(37, 99, 235, .09), transparent);
}

.place-point-item.is-focused {
    outline: 2px solid rgba(37, 99, 235, .35);
    border-radius: 14px;
    padding-left: 8px;
    padding-right: 8px;
}

.place-point-thumb {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    object-fit: cover;
    background: #f3f4f6;
    flex: 0 0 auto;
}

.place-point-thumb.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.place-point-body {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.place-point-name {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}

.place-point-meta {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.place-point-desc {
    margin-top: 5px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.4;
}

.place-point-available {
    margin-top: 5px;
    font-size: 12px;
    color: #2563eb;
    font-weight: 800;
}

.place-point-unavailable {
    margin-top: 5px;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 700;
}

.place-point-btn {
    border: 0;
    border-radius: 999px;
    padding: 7px 11px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.place-point-done {
    border-radius: 999px;
    padding: 7px 11px;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .point-map-box {
        height: 280px;
    }

    .place-point-thumb {
        width: 52px;
        height: 52px;
    }

    .place-point-desc {
        display: none;
    }
}


.place-point-thumb-btn {
    position: relative;
    width: 58px;
    height: 58px;
    border: 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f4f6;
    flex: 0 0 auto;
}

.place-point-thumb-btn .place-point-thumb {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}

.place-point-thumb-zoom {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.point-image-layer {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
}

.point-image-layer.active {
    display: block;
}

.point-image-layer-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(6px);
}

.point-image-layer-box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(92vw, 520px);
    max-height: 88vh;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
}

.point-image-layer-close {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(17, 24, 39, .78);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.point-image-layer-img-wrap {
    width: 100%;
    background: #111827;
}

.point-image-layer-img-wrap img {
    width: 100%;
    max-height: 46vh;
    object-fit: contain;
    display: block;
}

.point-image-layer-content {
    padding: 18px 18px 20px;
    overflow-y: auto;
}

.point-image-layer-title {
    font-size: 18px;
    font-weight: 900;
    color: #111827;
    line-height: 1.35;
}

.point-image-layer-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.point-image-layer-desc {
    margin-top: 12px;
    font-size: 14px;
    color: #374151;
    line-height: 1.65;
    word-break: keep-all;
}

.point-image-layer-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .point-image-layer-box {
        width: 94vw;
        max-height: 86vh;
        border-radius: 18px;
    }

    .point-image-layer-img-wrap img {
        max-height: 42vh;
    }

    .point-image-layer-title {
        font-size: 16px;
    }

    .point-image-layer-desc {
        font-size: 13px;
    }
}

.level-point-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fef3c7, #fff7ed);
    border: 1px solid rgba(251, 191, 36, .45);
}

.level-point-label {
    font-size: 12px;
    color: #92400e;
    font-weight: 700;
}

.level-point-title {
    margin-top: 2px;
    font-size: 16px;
    color: #78350f;
    font-weight: 900;
}

.level-point-icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}


.review-average-star {
    color: #f59e0b;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
}

.review-guide-box {
    padding: 14px;
    border-radius: 14px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.review-form {
    margin-top: 12px;
}

.review-rating-select {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.review-rating-select label {
    margin: 0;
}

.review-rating-select input {
    display: none;
}

.review-rating-select span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid #e5e7eb;
}

.review-rating-select input:checked + span {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
}

.review-existing-images,
.review-images {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.review-existing-image {
    width: 86px;
    flex: 0 0 auto;
    font-size: 12px;
    color: #6b7280;
}

.review-existing-image img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin-bottom: 4px;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.review-item {
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}

.review-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.review-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.review-name {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
}

.review-date {
    margin-top: 2px;
    font-size: 12px;
    color: #9ca3af;
}

.review-stars {
    color: #f59e0b;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.review-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.6;
    word-break: keep-all;
}

.review-images {
    margin-top: 10px;
}

.review-image-btn {
    border: 0;
    padding: 0;
    background: transparent;
    flex: 0 0 auto;
}

.review-image-btn img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.review-image-layer {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .82);
    padding: 20px;
}

.review-image-layer.active {
    display: flex;
}

.review-image-layer-box {
    max-width: 94vw;
    max-height: 90vh;
}

.review-image-layer-box img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 16px;
}

.best-review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.best-review-item {
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    border: 1px solid rgba(251, 191, 36, .45);
}

.best-review-name {
    font-size: 14px;
    font-weight: 900;
    color: #111827;
}

.best-review-stars {
    margin-top: 2px;
    color: #f59e0b;
    font-weight: 900;
    letter-spacing: 1px;
}

.best-review-text {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.65;
    color: #374151;
    word-break: keep-all;
}

.best-review-meta {
    margin-top: 8px;
    font-size: 12px;
    color: #9ca3af;
}

.review-best-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
}

.review-action-btn {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    background: #fff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
}

.review-action-btn.active {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.review-report-layer {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
}

.review-report-layer.active {
    display: block;
}

.review-report-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(5px);
}

.review-report-box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(92vw, 420px);
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.review-photo-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.review-photo-item {
    border: 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    aspect-ratio: 1 / 1;
}

.review-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-photo-layer {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
}

.review-photo-layer.active {
    display: block;
}

.review-photo-open {
    overflow: hidden;
}

.review-photo-layer-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .86);
    backdrop-filter: blur(6px);
}

.review-photo-layer-box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(94vw, 720px);
    max-height: 92vh;
    transform: translate(-50%, -50%);
    background: #111827;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

.review-photo-main {
    height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.review-photo-main img {
    max-width: 100%;
    max-height: 58vh;
    object-fit: contain;
}

.review-photo-info {
    padding: 14px 16px 18px;
    color: #fff;
}

.review-photo-count {
    font-size: 12px;
    color: #d1d5db;
}

.review-photo-name {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 900;
    color: #fbbf24;
}

.review-photo-text {
    margin-top: 8px;
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.55;
    max-height: 90px;
    overflow-y: auto;
}

.review-photo-close {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.review-photo-nav {
    position: absolute;
    z-index: 3;
    top: 42%;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 32px;
    line-height: 1;
}

.review-photo-nav.prev {
    left: 12px;
}

.review-photo-nav.next {
    right: 12px;
}

@media (max-width: 480px) {
    .review-photo-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .review-photo-main {
        height: 52vh;
    }

    .review-photo-main img {
        max-height: 52vh;
    }
}

.badge-level-circle {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: linear-gradient(135deg, #111827, #374151);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .22);
    flex: 0 0 auto;
}

.badge-collect-percent {
    font-size: 22px;
    font-weight: 900;
    color: #111827;
}

.my-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.my-badge-card {
    position: relative;
    padding: 14px 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eef2f7;
    text-align: center;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.my-badge-card.earned {
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    border-color: rgba(251, 191, 36, .45);
}

.my-badge-card.locked {
    background: #f9fafb;
    opacity: .78;
}

.my-badge-image-wrap {
    position: relative;
    width: 74px;
    height: 74px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
/*    overflow: hidden;*/
}

.my-badge-card.earned .my-badge-image-wrap {
    background: linear-gradient(135deg, #ffefc6, #f97316);
    box-shadow: 0 8px 20px rgba(249, 115, 22, .22);
}

.my-badge-image {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 999px;
}

.my-badge-lock {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .62);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-badge-name {
    font-size: 14px;
    font-weight: 900;
    color: #111827;
    line-height: 1.35;
}

.my-badge-desc {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
    min-height: 34px;
}

.my-badge-condition {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 11px;
    font-weight: 800;
}

.my-badge-card.earned .my-badge-condition {
    background: #ffedd5;
    color: #c2410c;
}

.my-badge-date {
    margin-top: 7px;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 700;
}

@media (min-width: 768px) {
    .my-badge-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.quiz-badge-toast {
    position: fixed;
    z-index: 99999;
    left: 50%;
    bottom: 84px;
    width: min(92vw, 360px);
    transform: translate(-50%, 30px);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(17, 24, 39, .94);
    color: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
    transition: all .25s ease;
}

.quiz-badge-toast.active {
    opacity: 1;
    transform: translate(-50%, 0);
}

.quiz-badge-toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}

.quiz-badge-toast-title {
    font-size: 14px;
    font-weight: 900;
}

.quiz-badge-toast-text {
    margin-top: 3px;
    font-size: 12px;
    color: #e5e7eb;
    line-height: 1.35;
}

.quiz-earned-badges {
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    background: #fff7ed;
    border: 1px solid rgba(251, 191, 36, .45);
    text-align: left;
}

.quiz-earned-title {
    font-size: 12px;
    font-weight: 900;
    color: #9a3412;
    margin-bottom: 7px;
}

.quiz-earned-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px 4px 3px 0;
    padding: 5px 8px;
    border-radius: 999px;
    background: #ffedd5;
    color: #c2410c;
    font-size: 12px;
    font-weight: 800;
}

.quiz-earned-icon {
    font-size: 14px;
}

.direct-stamp-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.direct-stamp-status.wait {
    background: #f3f4f6;
    color: #6b7280;
}

.direct-stamp-status.ok {
    background: #dcfce7;
    color: #15803d;
}

.direct-stamp-status.no {
    background: #fee2e2;
    color: #dc2626;
}

.direct-stamp-status.done {
    background: #dcfce7;
    color: #15803d;
}

.direct-stamp-map-wrap {
    position: relative;
}

.direct-stamp-map {
    width: 100%;
    height: 320px;
    border-radius: 18px;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid rgba(226, 232, 240, .9);
}

.direct-stamp-map-empty {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.direct-location-btn {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    border: 0;
    border-radius: 999px;
    padding: 7px 11px;
    background: #111827;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.direct-location-btn2 {
    position: absolute;
    z-index: 2;
    left: 110px;
    bottom: 12px;
    border: 0;
    border-radius: 999px;
    padding: 7px 11px;
    background: #111827;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.direct-place-marker {
    position: relative;
    width: 46px;
    height: 52px;
}

.direct-place-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: #fff;
    color: #ff2e5e;
    border: 3px solid #ff2e5e;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    font-size: 20px;
}

/*
.direct-place-marker::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: #111827;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
*/

.direct-current-marker {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: directCurrentPulse 1.6s infinite;
}

.direct-current-marker span {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #2563eb;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .45);
}

@keyframes directCurrentPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, .38);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

.direct-distance-box {
    padding: 13px 14px;
    border-radius: 16px;
    background: #f9fafb;
    border: 1px solid #eef2f7;
}

.direct-distance-box.inside {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.direct-distance-box.outside {
    background: #fff7ed;
    border-color: #fed7aa;
}

.direct-distance-title {
    font-size: 14px;
    font-weight: 900;
    color: #111827;
}

.direct-distance-desc {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.direct-distance-box.inside .direct-distance-title {
    color: #15803d;
}

.direct-distance-box.outside .direct-distance-title {
    color: #c2410c;
}

@media (max-width: 480px) {
    .direct-stamp-map {
        height: 280px;
    }
}

.social-login-box {
    margin-top: 18px;
}

.social-login-title {
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}

.social-btn {
    height: 48px;
    border-radius: 15px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-decoration: none;
    font-size: 15px;
}

.social-btn.naver {
    background: #03c75a;
    color: #fff;
}

.social-btn.kakao {
    background: #fee500;
    color: #191919;
}

.social-btn.google {
    background: #fff;
    color: #111827;
    border: 1px solid #e5e7eb;
}

.social-btn.apple {
    background: #111;
    color: #fff;
}



.place-thumb-marker {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 18px;
    background: #111827;
    border: 3px solid #fff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .28);
    overflow: visible;
}

.place-thumb-marker img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
    display: block;
}

.place-thumb-marker .place-marker-name {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    max-width: 120px;
    min-width: 54px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .92);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .24);
    pointer-events: none;
}

.place-thumb-marker .place-marker-name::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(17, 24, 39, .92);
}

.place-basic-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background: #111827;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    font-size: 18px;
}

.place-stamped-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background: #16a34a;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 7px 16px rgba(22,163,74,.35);
    font-size: 20px;
    font-weight: 800;
}

.place-stamped-marker .stamp-dot {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #facc15;
    border: 2px solid #fff;
}