:root {
    --lv-bg: #f4f6f8;
    --lv-card: #fff;
    --lv-text: #17202a;
    --lv-muted: #64748b;
    --lv-line: #e5e7eb;
    --lv-brand: #2563eb;
    --lv-dark: #111827;
    --lv-danger: #dc2626;
}

.lv-list-wrap,
.lv-view-wrap,
.lv-write-wrap {
    width: min(1180px, calc(100% - 32px));
    margin: 28px auto 60px;
    color: var(--lv-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.lv-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    margin-bottom: 18px;
    border: 1px solid var(--lv-line);
    border-radius: 24px;
    background: linear-gradient(135deg, #eff6ff, #fff 55%, #f8fafc);
}

.lv-page-head h1,
.lv-page-head h2 {
    margin: 6px 0 8px;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
    letter-spacing: -.055em;
}

.lv-page-head p {
    margin: 0;
    color: var(--lv-muted);
    line-height: 1.55;
}

.lv-kicker {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}

.lv-head-actions,
.lv-view-actions,
.lv-submit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.lv-btn {
    display: inline-flex;
    min-height: 42px;
    padding: 9px 14px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
}

.lv-btn-primary { background: var(--lv-brand); color: #fff !important; }
.lv-btn-light { background: #fff; color: var(--lv-text) !important; border-color: var(--lv-line); }
.lv-btn-dark { background: var(--lv-dark); color: #fff !important; }
.lv-btn-danger { background: #fff; color: var(--lv-danger) !important; border-color: #fecaca; }
.lv-full { width: 100%; }

.lv-search {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 8px;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--lv-line);
    border-radius: 18px;
    background: #fff;
}

.lv-input,
.lv-textarea {
    width: 100%;
    border: 1px solid #dbe0e7;
    border-radius: 13px;
    background: #fff;
    color: var(--lv-text);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.lv-input { min-height: 44px; padding: 10px 12px; }
.lv-textarea { padding: 12px; line-height: 1.6; resize: vertical; }
.lv-input:focus,
.lv-textarea:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(37, 99, 235, .1); }

.lv-card-list { display: grid; gap: 12px; }

.lv-list-card {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--lv-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}

.lv-thumb-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #111827;
}

.lv-thumb-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-no-thumb { width: 100%; height: 100%; display: grid; place-items: center; color: #94a3b8; font-size: 12px; font-weight: 900; }

.lv-list-content { min-width: 0; }
.lv-list-content h3 { margin: 9px 0 8px; font-size: 20px; line-height: 1.35; letter-spacing: -.035em; }
.lv-list-content h3 a { color: var(--lv-text); text-decoration: none; }
.lv-list-content p { margin: 0 0 12px; color: #475569; line-height: 1.55; }

.lv-list-meta,
.lv-view-meta,
.lv-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.lv-list-meta > span,
.lv-view-meta > span,
.lv-tag-row > span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.lv-category {
    --lv-category: #2563eb;
    color: #fff !important;
    background: var(--lv-category) !important;
}

.lv-list-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
    color: var(--lv-muted);
    font-size: 13px;
}

.lv-list-bottom a { color: #2563eb; font-weight: 900; text-decoration: none; }

.lv-empty,
.lv-empty-small {
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
    color: var(--lv-muted);
    text-align: center;
}

.lv-empty { padding: 46px 20px; }
.lv-empty b { display: block; margin-bottom: 7px; color: var(--lv-text); font-size: 17px; }
.lv-empty p { margin: 0; }
.lv-empty-small { padding: 18px; }
.lv-pagination { margin-top: 24px; text-align: center; }

.lv-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.lv-form-card {
    padding: 20px;
    border: 1px solid var(--lv-line);
    border-radius: 22px;
    background: #fff;
}

.lv-form-card h3,
.lv-view-section h3 { margin: 0 0 16px; font-size: 18px; letter-spacing: -.035em; }
.lv-span-2 { grid-column: span 2; }
.lv-field { margin-bottom: 15px; }
.lv-field:last-child { margin-bottom: 0; }
.lv-field label { display: block; margin-bottom: 7px; color: #334155; font-size: 13px; font-weight: 900; }
.lv-field label strong { color: #dc2626; font-size: 11px; }
.lv-field small,
.lv-form-card > small { display: block; margin-top: 6px; color: var(--lv-muted); font-size: 12px; line-height: 1.45; }
.lv-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.lv-video-preview {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
}
.lv-video-preview[hidden] { display: none; }
.lv-video-preview img { width: 150px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.lv-video-preview b { display: block; margin-bottom: 4px; }
.lv-video-preview span { color: #1d4ed8; font-size: 13px; font-weight: 800; }

.lv-write-map {
    width: 100%;
    height: 360px;
    margin: 10px 0 0;
    overflow: hidden;
    border: 1px solid var(--lv-line);
    border-radius: 16px;
    background: #e2e8f0;
}

.lv-category-preview {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin: -3px 0 16px;
    padding: 11px 13px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 13px;
}
.lv-category-preview b { font-size: 15px; }
.lv-submit-row { justify-content: flex-end; margin-top: 16px; }

.lv-view-wrap { max-width: 980px; }
.lv-view-meta { margin-bottom: 8px; }
.lv-mood-negative { background: #fee2e2 !important; color: #991b1b !important; }
.lv-mood-neutral { background: #fef3c7 !important; color: #92400e !important; }
.lv-mood-positive { background: #dcfce7 !important; color: #166534 !important; }

.lv-iframe-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 12px;
    border-radius: 22px;
    background: #000;
}
.lv-iframe-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.lv-view-actions { margin-bottom: 18px; }

.lv-view-section {
    padding: 20px;
    margin-bottom: 14px;
    border: 1px solid var(--lv-line);
    border-radius: 22px;
    background: #fff;
}

.lv-taxonomy { display: grid; gap: 12px; }
.lv-taxonomy > div { display: flex; gap: 12px; align-items: flex-start; }
.lv-taxonomy > div > b { flex: 0 0 100px; color: var(--lv-muted); font-size: 13px; }
.lv-summary-text { color: #334155; line-height: 1.75; }

.lv-point-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lv-point-list li { display: flex; gap: 8px; padding: 11px 12px; border: 1px solid #e5e7eb; border-radius: 14px; color: #2563eb; font-weight: 900; }
.lv-point-list li span { color: #334155; font-weight: 700; }
.lv-section-title-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.lv-section-title-row > span { color: var(--lv-muted); font-size: 13px; font-weight: 800; }

.lv-comment-list { display: grid; gap: 9px; }
.lv-comment { padding: 13px; border: 1px solid var(--lv-line); border-radius: 15px; background: #fff; }
.lv-comment b { display: block; margin-bottom: 5px; font-size: 14px; }
.lv-comment p { margin: 0 0 6px; color: #334155; line-height: 1.55; }
.lv-comment time { color: #94a3b8; font-size: 11px; }

.lv-telegram-note {
    margin-top: 14px;
    padding: 15px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
}
.lv-telegram-note b { display: block; margin-bottom: 5px; color: #1d4ed8; }
.lv-telegram-note p { margin: 0; color: #475569; font-size: 13px; line-height: 1.5; }

@media (max-width: 760px) {
    .lv-list-wrap,
    .lv-view-wrap,
    .lv-write-wrap { width: min(100% - 18px, 1180px); margin-top: 10px; }
    .lv-page-head { padding: 18px; flex-direction: column; }
    .lv-head-actions { width: 100%; }
    .lv-search { grid-template-columns: 1fr; }
    .lv-list-card { grid-template-columns: 1fr; }
    .lv-form-grid { grid-template-columns: 1fr; }
    .lv-span-2 { grid-column: auto; }
    .lv-two-col { grid-template-columns: 1fr; }
    .lv-write-map { height: 300px; }
    .lv-taxonomy > div { flex-direction: column; gap: 7px; }
    .lv-video-preview { align-items: flex-start; flex-direction: column; }
    .lv-video-preview img { width: 100%; }
}

/* v3 UI 보강 */
.lv-write-wrap form { display: block; }
.lv-form-card {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}
.lv-form-card:hover {
    border-color: #d7dee8;
}
.lv-form-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
}
.lv-form-card h3::before {
    content: '';
    width: 5px;
    height: 18px;
    border-radius: 999px;
    background: #2563eb;
}
.lv-submit-row {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
    backdrop-filter: blur(10px);
}
.lv-submit-row .lv-btn { min-width: 112px; }
@media (max-width: 760px) {
    .lv-submit-row { bottom: 6px; }
    .lv-submit-row .lv-btn { flex: 1; min-width: 0; }
}

/* v4: 글쓰기 정렬·지역 검색·2차 태그 선택 UI */
.lv-write-wrap {
    max-width: 1160px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.lv-input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.lv-input-action .lv-btn {
    min-width: 190px;
    border-radius: 13px;
    white-space: nowrap;
}

.lv-region-status {
    display: none;
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.lv-region-status.loading,
.lv-region-status.success,
.lv-region-status.error {
    display: block;
}

.lv-region-status.loading {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.lv-region-status.success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.lv-region-status.error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.lv-tag-reference {
    margin: -2px 0 16px;
    padding: 15px;
    border: 1px solid #dbe3ee;
    border-radius: 18px;
    background: #f8fafc;
}

.lv-tag-reference-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 13px;
}

.lv-tag-reference-head b {
    display: block;
    margin-bottom: 3px;
    color: #1e293b;
    font-size: 14px;
}

.lv-tag-reference-head span {
    color: #64748b;
    font-size: 12px;
}

.lv-tag-clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.lv-tag-clear:hover {
    color: #dc2626;
}

.lv-tag-groups {
    display: grid;
    gap: 11px;
}

.lv-tag-group {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
}

.lv-tag-group > strong {
    display: inline-flex;
    min-height: 30px;
    padding: 6px 9px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lv-tag-color) 12%, white);
    color: var(--lv-tag-color);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .lv-tag-group > strong {
        background: #eef2ff;
    }
}

.lv-tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lv-tag-chip {
    min-height: 31px;
    padding: 6px 10px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: .14s ease;
}

.lv-tag-chip:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.lv-tag-chip.active {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .18);
}

@media (max-width: 760px) {
    .lv-input-action {
        grid-template-columns: 1fr;
    }

    .lv-input-action .lv-btn {
        width: 100%;
        min-width: 0;
    }

    .lv-tag-reference-head {
        align-items: stretch;
        flex-direction: column;
    }

    .lv-tag-clear {
        width: fit-content;
        padding: 5px 0;
    }

    .lv-tag-group {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .lv-tag-group > strong {
        width: fit-content;
        justify-content: flex-start;
    }
}

/* v7 Telegram comment */
.lv-telegram-note code {
    padding: 2px 6px;
    border-radius: 7px;
    background: rgba(37, 99, 235, .09);
    color: #1d4ed8;
    font-weight: 900;
}
.lv-telegram-note .lv-btn { margin-top: 12px; }


/* v10 상세페이지 외부·내부 지도 버튼 */
.lv-location-actions {
    margin: 14px 0 4px;
    gap: 10px;
}

.lv-location-actions .lv-btn {
    min-height: 46px;
    padding: 11px 18px;
    color: #fff !important;
    border-width: 1px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .12);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.lv-location-actions .lv-btn:hover,
.lv-location-actions .lv-btn:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 11px 24px rgba(15, 23, 42, .18);
}

.lv-location-actions .lv-btn:active {
    transform: translateY(0);
}

.lv-btn-picknote {
    min-width: 236px;
    min-height: 50px !important;
    padding-inline: 24px !important;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border-color: #93c5fd;
    font-size: 15px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, .28) !important;
}

.lv-btn-picknote span {
    color: #bfdbfe;
    font-size: 12px;
}

.lv-btn-youtube {
    background: #ff0033;
    border-color: #e6002e;
}

.lv-btn-google {
    background: #0f9d58;
    border-color: #0b8043;
}

@media (max-width: 760px) {
    .lv-location-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
    }

    .lv-location-actions .lv-btn {
        width: 100%;
        min-width: 0;
        padding: 10px 8px;
        font-size: 13px;
        white-space: nowrap;
    }

    .lv-location-actions .lv-btn-picknote {
        grid-column: 1 / -1;
        min-height: 52px !important;
        font-size: 15px;
    }
}

@media (max-width: 390px) {
    .lv-location-actions {
        grid-template-columns: 1fr;
    }

    .lv-location-actions .lv-btn-picknote {
        grid-column: auto;
    }
}