/* style.css */
:root {
    --primary: #2c3e50;
    --accent: #3498db;
    --bg: #f8f9fa;
    --card-bg: #ffffff;
    --python-blue: #3776ab;
    --github-gray: #24292e;
    --danger: #d63031;
}

body { 
    font-family: 'Pretendard', -apple-system, sans-serif; 
    background-color: var(--bg); 
    margin: 0; padding: 0; color: var(--primary); 
    line-height: 1.6;
}

/* 상단 네비바 */
.top-navbar {
    background: #fff; border-bottom: 1px solid #e1e4e8;
    padding: 8px 40px; display: flex; justify-content: space-between;
    align-items: center; position: sticky; top: 0; z-index: 1000;
}
.home-page .top-navbar {
    background: rgba(220, 240, 252, .96);
    border-bottom-color: rgba(151, 190, 214, .55);
}
.weather-top { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.top-info-text { font-size: 0.75rem; color: #666; font-weight: bold; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.weather-region-button {
    padding: 2px 8px;
    border: 1px solid #c5d3e8;
    border-radius: 999px;
    background: #fff;
    color: #3b5bdb;
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}
.weather-region-button:hover, .weather-region-button:focus-visible { background: #edf2ff; }
.weather-region-dialog {
    width: min(92vw, 320px);
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #243447;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
.weather-region-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.weather-region-dialog form { display: grid; gap: 10px; }
.weather-region-dialog h2 { margin: 0; font-size: 1rem; }
.weather-region-dialog label { display: grid; gap: 4px; font-size: 0.8rem; color: #555; }
.weather-region-dialog select { padding: 6px; border: 1px solid #ddd; border-radius: 6px; font: inherit; }
.weather-region-message { min-height: 1em; margin: 0; color: #d63031; font-size: 0.75rem; }
.weather-region-actions { display: flex; justify-content: flex-end; gap: 6px; }
.weather-region-actions button { padding: 6px 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font: inherit; cursor: pointer; }
.weather-region-actions button[type="submit"] { border-color: #3b5bdb; background: #3b5bdb; color: #fff; }
.language-control { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.language-label {
    display: inline-flex;
    height: 36px;
    box-sizing: border-box;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #bfd3e1;
    border-radius: 9px;
    background: #6b9fc2;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.language-select {
    appearance: none;
    min-width: 112px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 32px 0 11px;
    border: 1px solid #bfd3e1;
    border-radius: 9px;
    background-color: #d9ebf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23172a46' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    color: #294b68;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.language-select:hover { border-color: #526987; }
.language-select:focus-visible { outline: none; border-color: #172a46; box-shadow: 0 0 0 3px rgba(23, 42, 70, .16); }
.contact-button {
    display: inline-flex;
    height: 36px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: #ff7675;
    color: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    transition: transform .1s, background-color .15s;
}
.contact-button:hover { background: #f46668; }
.contact-button:active { transform: translateY(1px); }
.mark { color: var(--python-blue); margin-right: 3px; }

/* 메인 컨테이너 */
body.home-page {
    background:
        linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.1) 40%, rgba(255,255,255,.4)),
        url('/python-static/bg-pastel-city.jpg') center top / cover no-repeat fixed;
    background-color: #eaf3fb;
}
.container { padding: 40px; max-width: 1300px; margin: 0 auto; }
.header { text-align: center; margin-bottom: 35px; }

/* 캐릭터 사진 스타일 */
.profile-img {
    width: 100px; height: 100px; border-radius: 50%;
    margin-bottom: 15px; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.header h1 { font-size: 2.2rem; margin-bottom: 10px; color: var(--primary); letter-spacing: -1px; }

/* 버튼 레이아웃 */
.nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
/* 홈 섹션 (스터디 / 휴게실 / 유용한 도구) */
.home-section {
    position: relative; overflow: hidden; margin-bottom: 36px; padding: 34px 34px 38px;
    border-radius: 26px; color: #fff; isolation: isolate;
    box-shadow: 0 22px 50px -18px rgba(20, 24, 60, .45);
}
.home-section::before, .home-section::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.home-section::before { inset: 0; opacity: .55; }
.home-section::after { width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; filter: blur(8px); opacity: .5; }

.section-study {
    background: #efe9f7;
    color: #2f2a5c;
    border: 12px solid #f3eee6;
    box-shadow:
        0 0 0 2px #b9aa94,
        inset 0 0 0 2px rgba(120, 98, 70, .45),
        inset 0 0 70px 6px rgba(45, 36, 110, .38),
        0 22px 50px -18px rgba(20, 24, 60, .5);
}
.section-study::before {
    display: block; inset: 0; opacity: 1; background: url('/python-static/bg-study-summer.jpg') center 40% / cover no-repeat;
    filter: brightness(1.14) contrast(1.35) saturate(.8);
    -webkit-mask-image: none; mask-image: none;
}
.section-study::after {
    display: block; width: auto; height: auto; inset: 0; right: 0; top: 0; border-radius: 0; filter: none; opacity: 1;
    background: linear-gradient(100deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,.05) 100%);
}
.section-study .section-title { color: #2f2a5c; text-shadow: 0 1px 10px rgba(255,255,255,.8); }
.section-study .section-sub { color: #4a4478; }

.section-lounge {
    background: #eef3dd; color: #2f4a2c;
    border: 12px solid #dcefc8;
    box-shadow:
        0 0 0 2px #9fbf86,
        inset 0 0 0 2px rgba(90, 130, 70, .45),
        inset 0 0 70px 6px rgba(40, 70, 35, .36),
        0 22px 50px -18px rgba(20, 24, 60, .5);
}
.section-lounge::before {
    opacity: 1; background: url('/python-static/bg-lounge-jungle.jpg') center 45% / cover no-repeat;
    -webkit-mask-image: none; mask-image: none;
}
.section-lounge::after {
    width: auto; height: auto; inset: 0; right: 0; top: 0; border-radius: 0; filter: none; opacity: 1;
    background: linear-gradient(100deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 55%, rgba(255,255,255,.02) 100%);
}
.section-lounge .section-title { color: #2f4a2c; text-shadow: 0 1px 10px rgba(255,255,255,.85); }
.section-lounge .section-sub { color: #4d6a46; }

.section-tools {
    background: #e8edf7; color: #242f52;
    border: 12px solid #dce5f5;
    box-shadow: 0 0 0 2px #a8b7d2, inset 0 0 0 2px rgba(84, 105, 145, .45), inset 0 0 70px 6px rgba(35, 48, 82, .28), 0 22px 50px -18px rgba(20, 24, 60, .5);
}
.section-tools::before {
    opacity: 1; background: url('/python-static/bg-tools-friends.jpg') center 53% / cover no-repeat;
    -webkit-mask-image: none; mask-image: none;
}
.section-tools::after {
    width: auto; height: auto; inset: 0; right: 0; top: 0; border-radius: 0; filter: none; opacity: 1;
    background: linear-gradient(100deg, rgba(255,255,255,.64) 0%, rgba(255,255,255,.36) 58%, rgba(255,255,255,.16) 100%);
}
.section-tools .section-title { color: #273354; text-shadow: 0 1px 10px rgba(255,255,255,.9); }
.section-tools .section-sub { color: #465575; }

/* 제목 색 통일: 대제목 / 소제목 / 카드 제목 */
.home-section { --heading: #27336b; --heading-sub: #4a5784; --heading-accent: #5b6fe0; }
.home-section .section-title {
    color: var(--heading); text-shadow: 0 1px 10px rgba(255,255,255,.9);
    padding-left: 14px; border-left: 6px solid var(--heading-accent); border-radius: 3px; line-height: 1.2;
}
.home-section .section-sub { color: var(--heading-sub); padding-left: 20px; }
.home-section .card h3:not(.board-dialog h3) {
    color: var(--heading) !important; font-size: 1.1rem !important; font-weight: 800;
    padding-bottom: 10px; border-bottom: 2px solid rgba(91, 111, 224, .28);
}

.background-preview-modal {
    position: fixed; inset: 0; z-index: 3000; display: none;
    align-items: center; justify-content: center; padding: 64px 24px 84px;
    background: rgba(15, 20, 35, .88);
}
.background-preview-modal.is-open { display: flex; }
.background-preview-image {
    display: block; max-width: min(94vw, 1500px); max-height: 100%;
    width: auto; height: auto; object-fit: contain;
    border: 1px solid rgba(255,255,255,.5); border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0,0,0,.4);
}
.background-preview-close {
    position: absolute; top: 16px; right: 22px; border: 0; padding: 0;
    color: #fff; background: transparent; font-size: 2.5rem; line-height: 1;
    cursor: pointer;
}
.background-preview-controls {
    position: absolute; right: 24px; bottom: 20px; left: 24px;
    display: flex; justify-content: center; align-items: center; gap: 18px;
    color: #fff; font-size: .95rem;
}
.background-preview-controls label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.background-preview-controls input { width: 17px; height: 17px; accent-color: #b8c9ef; }
.background-preview-close-btn {
    border: 1px solid rgba(255,255,255,.6); border-radius: 8px; padding: 8px 18px;
    color: #fff; background: rgba(255,255,255,.14); font: inherit; cursor: pointer;
}
.background-preview-close-btn:hover { background: rgba(255,255,255,.25); }
@media (max-width: 600px) {
    .background-preview-modal { padding: 60px 12px 78px; }
    .background-preview-controls { right: 12px; left: 12px; }
}

.section-head { margin-bottom: 26px; text-align: left; }
.section-eyebrow {
    display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
    font-size: .7rem; font-weight: 700; letter-spacing: .22em;
}
.section-title { margin: 0; padding: 0; border: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; color: #fff; text-align: left; text-shadow: 0 2px 12px rgba(0,0,0,.2); }
.section-sub { margin: 6px 0 0; font-size: .95rem; color: rgba(255,255,255,.82); }

/* 스터디: 유리 질감 타일 버튼 */
.home-section .nav-links { margin-bottom: 0; justify-content: flex-start; gap: 14px; }
.board-card [hidden] { display: none !important; }
.board-card-head, .board-card-actions, .board-auth-actions, .board-auth-user, .board-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.board-card-head { flex-wrap: wrap; justify-content: space-between; }
.board-card-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; }
.board-card-actions { flex-wrap: wrap; justify-content: flex-end; }
.board-auth-user { color: #5a4531; font-size: .85rem; }
.board-button {
    cursor: pointer;
    padding: 6px 11px;
    border: 1px solid #c9b394;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
}
.board-button-primary { border-color: #765236; background: #765236; color: #fffaf0; }
.board-button-secondary { background: #fffaf0; color: #60452e; }
.board-form {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid #eadfcd;
    border-radius: 12px;
    background: #fffefa;
}
.board-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.board-form label { display: grid; gap: 6px; color: #604c37; font-size: .88rem; font-weight: 700; }
.board-form input, .board-form textarea {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #d6c9b5;
    border-radius: 7px;
    background: #fff;
    color: #362c22;
    font: inherit;
}
.board-form textarea { resize: vertical; }
.board-form-actions { justify-content: flex-end; }
.board-message { min-height: 1em; margin: 8px 0 0; color: #6a563f; font-size: .8rem; }
.board-message.is-error, .board-dialog-message.is-error { color: #b3261e; }
.board-title-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    list-style: none;
}
.board-title-list li { min-width: 0; }
.board-title-item {
    display: block;
    width: 100%;
    padding: 9px 10px;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #eee;
    border-radius: 6px;
    background: transparent;
    color: #333;
    font: inherit;
    font-size: .9rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.board-title-item:hover, .board-title-item:focus-visible { background: #f1ece3; color: #5c3f27; }
.board-post-meta { margin-top: 5px; color: #8a7b68; font-size: .76rem; }
.board-post-content { margin: 10px 0 0; color: #493f34; line-height: 1.65; overflow-wrap: anywhere; }
.board-empty { margin: 0; padding: 14px; color: #786e60; font-size: .88rem; text-align: center; }
.board-title-row { display: flex; align-items: center; gap: 6px; }
.board-title-row .board-title-item { flex: 1 1 auto; min-width: 0; }
.board-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; color: #786e60; font-size: .8rem; }
.board-pagination[hidden] { display: none; }
.board-page-button { padding: 5px 10px; border: 1px solid #e4ddd2; border-radius: 6px; background: #fff; color: #5c3f27; font: inherit; cursor: pointer; }
.board-page-button:hover:not(:disabled), .board-page-button:focus-visible { background: #f1ece3; }
.board-page-button:disabled { color: #aaa; cursor: default; }
.board-badge { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: #f1ece3; color: #6a563f; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.board-badge-report { background: #fde7e4; color: #b3261e; }
.board-user-link { cursor: pointer; padding: 0; border: 0; background: none; color: #5c3f27; font: inherit; font-weight: 700; text-decoration: underline; }
.board-flag { padding: 8px 10px; border: 1px solid #f0b8b2; border-radius: 8px; background: #fde7e4; color: #b3261e; font-size: .85rem; font-weight: 700; }
.board-reactions { display: flex; flex-wrap: wrap; gap: 8px; }
.board-reactions .board-button.is-active { border-color: #765236; background: #f3e6d2; }
.board-reactions .board-button:disabled { cursor: default; opacity: .6; }
.board-view-section { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid #eadfcd; }
.board-view-section h4 { margin: 0; color: #493324; font-size: .92rem; }
.board-plain-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.board-reply { padding: 8px 10px; border-radius: 8px; background: #faf5ea; }
.board-reply .board-post-content { margin: 4px 0 0; white-space: pre-wrap; }
.board-reply-delete { cursor: pointer; margin-left: 6px; padding: 0 4px; border: 0; background: none; color: #b3261e; font-size: .74rem; }
.board-reply-form { display: grid; gap: 8px; }
.board-reply-form textarea { width: 100%; padding: 9px 11px; border: 1px solid #d6c9b5; border-radius: 7px; font: inherit; resize: vertical; }
.board-reply-form .board-button { justify-self: end; }
.board-dialog {
    width: min(560px, calc(100vw - 28px));
    min-width: min(300px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    min-height: 220px;
    max-height: 92vh;
    max-height: 92dvh;
    padding: 0;
    overflow: auto;
    border: 8px solid #e9dcc4;
    border-radius: 14px;
    background-clip: padding-box;
    touch-action: auto;
    background: #fffdf8;
    color: #3d2c21;
    box-shadow: 0 24px 70px rgba(34, 24, 14, .35);
}
.board-dialog, .board-dialog * { box-sizing: border-box; }
.board-dialog::backdrop { background: rgba(30, 24, 18, .52); }
.board-dialog-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eadfcd;
    background: #fffdf8;
}
.board-dialog .board-dialog-head h3 { margin: 0; padding: 0; border: 0; color: #493324; font-size: 1.05rem; overflow-wrap: anywhere; }
.board-dialog-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid #d6c9b5;
    border-radius: 50%;
    background: #fff;
    color: #5c3f27;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.board-dialog-close:hover, .board-dialog-close:focus-visible { background: #f1ece3; }
.board-dialog .board-form { margin: 0; border: 0; border-radius: 0; }
.board-view-body { display: grid; gap: 10px; padding: 16px; }
.board-view-body .board-post-content { margin: 0; white-space: pre-wrap; }
.board-view-password { display: grid; gap: 6px; color: #604c37; font-size: .85rem; font-weight: 700; }
.board-view-password input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #d6c9b5;
    border-radius: 7px;
    font: inherit;
}
.board-dialog-message { min-height: 1em; margin: 0; color: #6a563f; font-size: .85rem; }
.board-card { display: flex; flex-direction: column; }
.board-write-row { display: flex; justify-content: center; margin-top: auto; padding-top: 12px; }
.board-write-row .board-button { min-width: 140px; padding: 9px 22px; font-size: .9rem; }
@media (max-width: 640px) {
    .board-card-head { align-items: flex-start; }
    .board-dialog {
        width: calc(100vw - 16px);
        max-height: 94vh;
        max-height: 94dvh;
        resize: none;
    }
    .board-form input, .board-form textarea, .board-view-password input, .board-reply-form textarea { font-size: 16px; }
    .board-dialog .board-button { min-height: 44px; padding: 8px 16px; font-size: .95rem; }
    .board-dialog-close { width: 42px; height: 42px; }
}
.section-study .nav-btn {
    flex: 1 1 190px; justify-content: center; padding: 18px 20px; border-radius: 16px;
    background: rgba(255,255,255,.55); color: #2f2a5c; font-size: 1rem;
    border: 1px solid rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px -10px rgba(60,50,140,.45);
}
.section-study .nav-btn { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; text-align: left; }
.nav-btn-title { font-size: 1.05rem; font-weight: 800; }
.nav-btn-desc { font-size: .8rem; font-weight: 500; line-height: 1.45; color: #4a4478; }
.section-study .nav-btn:hover { opacity: 1; transform: translateY(-4px); background: rgba(255,255,255,.85); box-shadow: 0 16px 30px -12px rgba(60,50,140,.5); }
.section-study .btn-document { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(226,219,255,.85)); border-color: #fff; }

/* 휴게실 / 도구: 카드를 떠 있는 흰 패널로 */
.home-section .dashboard-grid { gap: 22px; }
.home-section .card {
    color: var(--primary); border: 0; border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 36px -16px rgba(10, 12, 40, .5);
    transition: transform .25s ease, box-shadow .25s ease;
}
/* 배경 사진이 은은하게 비치는 반투명 유리 카드/버튼 (bg-white 클래스 덮어쓰기) */
.section-lounge .card, .section-tools .card {
    background: rgba(255,255,255,.74) !important;
    -webkit-backdrop-filter: blur(3px) saturate(1.15); backdrop-filter: blur(3px) saturate(1.15);
    border: 1px solid rgba(255,255,255,.7) !important;
}
.section-study .nav-btn, .section-study .btn-document {
    background: rgba(255,255,255,.34);
    -webkit-backdrop-filter: blur(3px) saturate(1.15); backdrop-filter: blur(3px) saturate(1.15);
}
.section-study .nav-btn:hover, .section-study .btn-document:hover { background: rgba(255,255,255,.7); }
.section-study .nav-btn-title, .section-study .nav-btn-desc { text-shadow: 0 1px 6px rgba(255,255,255,.9); }
.section-study .nav-btn-desc { color: #35306a; font-weight: 600; }
.home-section .card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -16px rgba(10, 12, 40, .55); }
@media (prefers-reduced-motion: reduce) { .home-section .card, .section-study .nav-btn { transition: none; } }
@media (max-width: 768px) {
    .home-section { padding: 24px 18px 26px; border-radius: 20px; }
    .section-title { font-size: 1.5rem; }
}
.nav-btn {
    text-decoration: none; padding: 10px 18px; border-radius: 8px;
    font-weight: 600; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px;
    font-size: 0.9rem; color: white; border: none; cursor: pointer;
}
.btn-react { background: #61dafb; color: #282c34; }
.btn-vue { background: #42b883; }
.btn-github { background: var(--github-gray); }
.btn-wiki { background: #586069; }
.btn-document { background: #6c5ce7; }
.nav-btn:hover { transform: translateY(-2px); opacity: 0.9; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Study room wiki viewer */
.document-page {
    --room-ink: #3d2c21;
    --room-wood: #704b30;
    min-height: 100vh;
    padding: 0;
    color: var(--room-ink);
    background:
        linear-gradient(180deg, rgba(247,240,228,.35), rgba(247,240,228,.2) 50%, rgba(223,199,166,.35)),
        url('/python-static/bg-study-room-bookshelves.jpg') center / cover fixed no-repeat,
        #e9dcc7;
}
.document-topbar {
    position: relative; z-index: 2;
    padding: 12px 0;
    background: rgba(255, 251, 242, .88);
    border-bottom: 1px solid rgba(112, 75, 48, .18);
    box-shadow: 0 3px 14px rgba(58, 38, 22, .08);
}
.document-topbar-inner {
    display: flex;
    max-width: 1180px;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 0 24px;
}
.document-home {
    margin-right: auto;
    color: #705f50;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}
.document-home:hover { color: #3d2c21; text-decoration: underline; }
.document-home:focus-visible { outline: 2px solid #c58f53; outline-offset: 3px; }
.document-language-label { color: #705f50; font-size: 0.9rem; }
.document-language {
    padding: 8px 12px; border: 1px solid #cdbda8; border-radius: 8px;
    color: var(--room-ink); background: #fffdf8;
}
.study-room-container { max-width: 1180px; margin: 0 auto; padding: 32px 24px 90px; }
.study-room-intro { text-align: center; margin: 8px 0 32px; }
.study-room-intro .room-kicker { margin-bottom: 14px; font-size: 1.8rem; letter-spacing: .06em; }
.room-kicker {
    margin: 0 0 8px; color: #8a6241; font-size: .82rem;
    font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.document-title { margin: 0 0 12px; color: #493324; line-height: 1.25; }
.study-room-intro > p:last-child { margin: 0; color: #715e4b; }
.study-room-wall {
    display: grid;
    gap: 24px;
    padding: 0;
}
.bookshelf-section {
    position: relative;
    margin: 0;
    padding: 18px 18px 20px;
    border-radius: 8px 8px 3px 3px;
    background:
        linear-gradient(145deg, rgba(80, 48, 27, .58), rgba(108, 70, 39, .62)),
        url('/python-static/bg-study-room-bookshelves.jpg') center 46% / cover no-repeat;
    box-shadow: 0 11px 18px rgba(48, 29, 16, .26);
}
.bookshelf-section h2 { margin: 0 0 16px; color: #fff2d6; font-size: 1.1rem; }
.bookshelf-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, 128px);
    justify-content: start;
    align-items: end;
    gap: 12px;
    min-height: 238px;
    padding: 16px 8px 0;
    border-bottom: 8px solid #bc8e59;
    box-shadow: 0 7px 0 #4c301d;
}
.book-link {
    --book-cover: #42645b;
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 12px 14px 17px;
    overflow-wrap: anywhere;
    border: 1px solid rgba(255,255,255,.38);
    border-left: 9px solid rgba(30, 20, 13, .42);
    border-radius: 4px 8px 8px 4px;
    color: #fff8e9;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(180deg, transparent 0 62%, rgba(0,0,0,.1) 100%), var(--book-cover);
    box-shadow: 7px 9px 10px rgba(22, 14, 8, .42), inset 2px 0 rgba(255,255,255,.2), inset -2px 0 rgba(0,0,0,.14);
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
.book-link:nth-child(6n + 1) { --book-cover: #47665d; }
.book-link:nth-child(6n + 2) { --book-cover: #895b46; }
.book-link:nth-child(6n + 3) { --book-cover: #405b78; }
.book-link:nth-child(6n + 4) { --book-cover: #8b7442; }
.book-link:nth-child(6n + 5) { --book-cover: #695279; }
.book-link:nth-child(6n) { --book-cover: #6a5946; }
.book-cover-pages {
    position: absolute;
    z-index: 0;
    top: 4px;
    right: -6px;
    bottom: 4px;
    width: 6px;
    border-radius: 0 3px 3px 0;
    background: repeating-linear-gradient(180deg, #f8eedb 0 2px, #d6c6aa 2px 3px);
    box-shadow: 2px 2px 4px rgba(22, 14, 8, .28);
}
.book-cover-art {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 66%;
    border-radius: 0 7px 0 0;
    background-position: center 38%;
    background-size: cover;
    box-shadow: inset 0 -18px 18px -18px rgba(0,0,0,.85), inset 3px 0 rgba(255,255,255,.16);
}
.book-link[data-book-id="51"] .book-cover-art { background-image: url('/python-static/book-cover-51.jpg'); }
.book-link[data-book-id="52"] .book-cover-art { background-image: url('/python-static/book-cover-52.jpg'); }
.book-link[data-book-id="53"] .book-cover-art { background-image: url('/python-static/book-cover-53.jpg'); }
.book-link[data-book-id="54"] .book-cover-art { background-image: url('/python-static/book-cover-54.jpg'); }
.book-link[data-book-id="55"] .book-cover-art { background-image: url('/python-static/book-cover-55.jpg'); }
.book-link[data-book-id="70"] .book-cover-art { background-image: url('/python-static/book-cover-70.jpg'); }
.book-link[data-book-id="71"] .book-cover-art { background-image: url('/python-static/book-cover-71.jpg'); }
.book-link[data-book-id="91"] .book-cover-art { background-image: url('/python-static/book-cover-91.jpg'); }
.book-link[data-book-id="2"] .book-cover-art { background-image: url('/python-static/book-cover-02.jpg'); }
.book-link[data-book-id="3"] .book-cover-art { background-image: url('/python-static/book-cover-03.jpg'); }
.bookshelf-admin .bookshelf-books { min-height: 0; }
.bookshelf-admin .book-link { min-height: 180px; }
.book-link > span:not(.book-cover-art):not(.book-cover-pages) { position: relative; z-index: 2; }
.book-link:hover { transform: translateY(-10px) rotate(-1deg); filter: brightness(1.12); box-shadow: 7px 16px 13px rgba(22, 14, 8, .35); }
.book-link:focus-visible { outline: 3px solid #ffdc80; outline-offset: 4px; }
.book-number { position: absolute !important; top: 8px; color: rgba(255, 249, 231, .88); font-size: .68rem; letter-spacing: .14em; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.book-title { width: 100%; font-size: .9rem; font-weight: 800; line-height: 1.35; text-shadow: 0 1px 3px rgba(0,0,0,.62); }
.book-status { padding: 3px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; font-size: .72rem; }
.reading-room-heading { display: flex; flex-direction: column; align-items: flex-start; margin: 4px 0 10px; }
.document-back { display: inline-block; margin-bottom: 20px; color: #704b30; font-weight: 700; text-decoration: none; }
.document-back:hover { color: #3d2c21; text-decoration: underline; }
.reading-desk {
    position: relative;
    padding: clamp(10px, 3vw, 32px) 0 86px;
}
.document-content {
    position: relative;
    z-index: 1;
    padding: clamp(22px, 5vw, 58px);
    border: 1px solid #d9c9ad;
    border-radius: 8px 14px 12px 8px;
    background: #fffdf8;
    box-shadow: 0 20px 36px rgba(55, 37, 21, .22), inset 0 0 24px rgba(121, 86, 46, .06);
}
.reading-desk::after {
    position: absolute; z-index: 0; right: -10vw; bottom: 35px; left: -10vw; height: 48px;
    border-radius: 4px;
    background: linear-gradient(180deg, #a87243, #80512f);
    box-shadow: 0 12px 18px rgba(45, 28, 17, .2);
    content: "";
}
.document-empty { color: #777; font-size: .95rem; }
.document-toc {
    margin: 24px 0 32px;
    padding: 18px 22px;
    border: 1px solid #e1d3bc;
    border-left: 4px solid #a4774d;
    border-radius: 8px;
    background: #f7f0e4;
}
.document-toc h2 { margin: 0 0 10px; color: #65462e; font-size: 1.05rem; }
.document-toc ul { margin: 0; padding-left: 22px; }
.document-toc ul ul { margin: 4px 0; }
.document-toc li { margin: 5px 0; }
.document-toc a { color: #59432e; text-decoration: none; }
.document-toc a:hover { color: #244c86; text-decoration: underline; }
.markdown-body { position: relative; overflow-wrap: anywhere; line-height: 1.8; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 1.7em; line-height: 1.35; }
.markdown-body .document-section-title {
    margin: 1.7em 0 .75em; padding: 0 0 .45em;
    border-bottom: 1px solid #e4d9c6; color: #65462e;
}
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote { margin: 0.9em 0; }
.markdown-body a { color: #3659a7; }
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body pre { overflow-x: auto; padding: 16px; background: #f3f5f7; border-radius: 8px; }
.markdown-body pre code { color: #263238; font-family: Consolas, monospace; }
.markdown-body :not(pre) > code { padding: 2px 5px; background: #f0f2f4; border-radius: 4px; }
.markdown-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.markdown-body th, .markdown-body td { padding: 8px 10px; border: 1px solid #d9dee5; text-align: left; }
.markdown-body th { background: #f3f5f7; }
.markdown-body blockquote { padding: 4px 16px; border-left: 4px solid #cbd4e1; color: #596575; }
.markdown-body .document-expanded-section { margin: 18px 0 26px; }
.markdown-body .document-summary { cursor: pointer; border-bottom: 1px solid #e4d9c6; }
.markdown-body .document-summary h3 { display: inline-block; margin: .6em 0 .4em; color: #65462e; }
.markdown-body hr { margin: 24px 0; border: 0; border-top: 1px solid #e1e4e8; }
@media (prefers-reduced-motion: reduce) {
    .book-link { transition: none; }
}

/* 그리드 및 카드 */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; }
.card { 
    background: var(--card-bg); border-radius: 16px; padding: 22px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid #eee;
    display: flex; flex-direction: column;
}
.card[hidden] { display: none; }
.card h3 { margin-top: 0; font-size: 1.05rem; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; margin-bottom: 15px; }

/* 로또 섹션 스타일 */
.lotto-warning { background: #fff5f5; border-left: 4px solid var(--danger); padding: 10px; margin-bottom: 10px; }
.lotto-warning p { color: var(--danger); font-size: 0.75rem; font-weight: bold; margin: 0; line-height: 1.4; }
.algo-box { background: #f1f5f9; padding: 10px; border-radius: 8px; margin-bottom: 15px; font-size: 0.75rem; color: #475569; }
.algo-title { font-weight: bold; color: var(--python-blue); display: block; margin-bottom: 4px; }

.lotto-ball {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 800;
    font-size: 15px;
    margin: 0 4px;
    /* 약간의 입체감을 주는 그림자 효과 */
    box-shadow: 2px 2px 4px rgba(0,0,0,0.15), inset -2px -2px 5px rgba(0,0,0,0.1);
}

/* 1 ~ 10: 노란색 */
.ball-yellow { 
    background-color: #fbc400; 
    color: #333; /* 노란색은 글씨가 어두워야 잘 보임 */
}

/* 11 ~ 20: 파란색 */
.ball-blue { 
    background-color: #69c8f2; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/* 21 ~ 30: 빨간색 */
.ball-red { 
    background-color: #ff7272; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/* 31 ~ 40: 회색 */
.ball-gray { 
    background-color: #aaaaaa; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/* 41 ~ 45: 초록색 */
.ball-green { 
    background-color: #b0d840; 
    color: #333; 
}

.refresh-btn { margin-top: auto; cursor: pointer; border: 1px solid #ddd; background: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: bold; }

/* 팝업 스타일 */
.btn-stack-small {
    background: #fff;
    color: #8e44ad;
    border: 1px solid #8e44ad;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-stack-small:hover {
    background: #8e44ad;
    color: #fff;
}

/* 하단 푸터 (데이터 출처 명시) */
.footer { margin-top: 50px; padding: 20px; text-align: center; border-top: 1px solid #e1e4e8; color: #94a3b8; font-size: 0.8rem; }
.source-list { list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px; margin-top: 10px; }


/* =========================================
   뉴스 검색창 및 AI 요약 버튼 스타일
========================================= */

/* 1. 둥근 검색창 및 버튼 공통 스타일 */
.rounded-search-bar .rounded-input {
    border-radius: 20px 0 0 20px !important;
    border: 1px solid #dee2e6;
    padding-left: 15px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.rounded-search-bar .rounded-input:focus {
    border-color: #5c7cfa;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03), 0 0 0 0.2rem rgba(92, 124, 250, 0.25);
    outline: none;
}

.rounded-search-bar .rounded-search-btn {
    border-radius: 0 20px 20px 0 !important;
    background-color: #5c7cfa;
    border: 1px solid #5c7cfa;
    color: white;
    padding: 0 15px;
    font-weight: 600;
}

.rounded-search-bar .rounded-search-btn:hover {
    background-color: #4c6ef5;
    border-color: #4c6ef5;
    cursor: pointer;
}

/* 2. AI 요약 버튼 스타일 (입체감 및 호버 효과) */
.ai-summary-btn {
    font-size: 11px;
    padding: 4px 14px;
    border-radius: 20px;
    background-color: #f0f4ff;
    color: #5c7cfa;
    border: 1px solid #dbe4ff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.ai-summary-btn:hover, .summary-btn:hover {
    background-color: #e7f5ff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(92, 124, 250, 0.15);
    color: #5c7cfa !important;
    border-color: #5c7cfa !important;
}

.ai-summary-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.ai-summary-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =========================================
   🌟 로또 자동 당첨점 검색 전용 스타일 (추가됨)
========================================= */
.lotto-result-box {
    background: #fdfdfd;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 10px 12px;
    margin-bottom: 5px;
}

/* 배지 (명당 표시) 디자인 */
.lotto-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 800;
    margin-bottom: 3px;
    letter-spacing: -0.5px;
}
.badge-national {
    background-color: #ffeaa7;
    color: #d63031;
    border: 1px solid #fdcb6e;
}
.badge-local {
    background-color: #e0f7fa;
    color: #00838f;
    border: 1px solid #b2ebf2;
}

/* 상호명 및 주소 */
.lotto-store-name {
    font-weight: 800;
    font-size: 1rem;
    color: #2c3e50;
    margin-bottom: 3px;
}
.lotto-store-address {
    font-size: 0.7rem;
    color: #636e72;
    margin-bottom: 8px;
}

/* 1등, 2등 당첨 횟수 */
.lotto-win-count-box {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lotto-win-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
}
.win-first {
    background-color: #ff7675;
    color: white;
}
.win-second {
    background-color: #74b9ff;
    color: white;
}

/* 지도 영역 높이 축소 (뉴스칸 높이에 맞춤) */
.lotto-map-container {
    width: 100%;
    height: 140px; 
    border-radius: 10px;
    border: 1px solid #ddd;
    display: none;
}

/* 라디오 버튼 구역 */
.map-selector {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 11px;
}

.restaurant-local-intro {
    margin: 0 0 10px;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.6;
}
.restaurant-selection-guide {
    display: grid;
    gap: 5px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #dfe6f5;
    border-radius: 8px;
    background: #f8f9ff;
    color: #4b5563;
    font-size: 11px;
    line-height: 1.55;
}
.restaurant-selection-guide strong { color: #2c3e50; font-size: 12px; }
.restaurant-selection-guide p { margin: 0; }
.restaurant-selection-guide small { font-size: 10px; }
.restaurant-selection-guide a { width: fit-content; }

.restaurant-detail-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid #dfe6f5;
    border-radius: 8px;
    background: #f8f9ff;
}
.restaurant-item-detail:not([hidden]) { margin-bottom: 8px; }
.restaurant-item-card,
.restaurant-item-detail { user-select: text; -webkit-user-select: text; }
.restaurant-item-card:focus-visible { outline: 2px solid #5c7cfa; outline-offset: 2px; }
.restaurant-detail-address,
.restaurant-detail-row { color: #555; font-size: 11px; }
.restaurant-translation-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    color: #868e96;
    font-size: 10px;
}
.restaurant-translation-rate {
    padding: 0 4px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
}
.restaurant-translation-rate:hover:not(:disabled) { border-color: #5c7cfa; }
.restaurant-translation-rate:disabled { opacity: 0.5; cursor: default; }
.restaurant-translation-feedback { color: #5c7cfa; }
.restaurant-review-count { display: block; margin-top: 4px; color: #868e96; font-size: 11px; }
.restaurant-review { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed #dfe6f5; font-size: 11px; color: #555; }
.restaurant-review-votes { display: flex; flex-wrap: wrap; gap: 6px; }
.restaurant-review-vote {
    padding: 4px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}
.restaurant-review-vote:hover:not(:disabled) { border-color: #5c7cfa; }
.restaurant-review-vote.is-selected { border-color: #5c7cfa; background: #edf2ff; font-weight: 700; }
.restaurant-review-form { display: flex; flex-wrap: wrap; gap: 6px; }
.restaurant-review-form input { flex: 1 1 160px; min-width: 0; padding: 4px 8px; border: 1px solid #dee2e6; border-radius: 6px; font: inherit; }
.restaurant-review-form button { padding: 4px 10px; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; font: inherit; cursor: pointer; }
/* 로그인 전: 비활성 모양 (누르면 로그인 안내 팝업) */
.restaurant-review-vote[aria-disabled="true"],
.restaurant-review-form.is-guest button[aria-disabled="true"] { opacity: .5; cursor: pointer; }
.restaurant-review-vote[aria-disabled="true"]:hover { border-color: #dee2e6; }
.restaurant-review-form.is-guest input { background: #f1f3f5; color: #868e96; cursor: pointer; }
.restaurant-login-dialog {
    box-sizing: border-box; width: min(90vw, 340px); padding: 20px; border: 1px solid #cbd5e1;
    border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); text-align: center;
}
.restaurant-login-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.restaurant-login-dialog p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #212529; }
.restaurant-login-actions { display: flex; justify-content: center; gap: 8px; }
.restaurant-login-actions button {
    padding: 6px 16px; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; font: inherit; cursor: pointer;
}
.restaurant-login-actions .restaurant-login-primary { border-color: #5c7cfa; background: #5c7cfa; color: #fff; font-weight: 700; }
.restaurant-review-message { min-height: 1em; margin: 0; color: #5c7cfa; }
.restaurant-review-message.is-error { color: #d63031; }
.restaurant-review-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.restaurant-review-list li { overflow-wrap: anywhere; }
.restaurant-review-list time { margin-left: 4px; color: #adb5bd; font-size: 10px; }
.board-page-number { min-width: 28px; }
.board-page-number[aria-current="page"] { border-color: #5c3f27; background: #5c3f27; color: #fff; cursor: default; }
.restaurant-page-total { flex-basis: 100%; text-align: center; color: #868e96; font-size: .75rem; }
.board-pagination.restaurant-pagination { flex-wrap: wrap; gap: 6px; }
.restaurant-map-button,
.restaurant-map-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 38px;
    margin-top: 5px;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background: #2c6e49;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.restaurant-map-button:hover,
.restaurant-map-open-link:hover { background: #24583b; color: #fff; }

.restaurant-map-dialog {
    box-sizing: border-box;
    width: min(96vw, 1100px);
    height: min(90vh, 780px);
    min-width: 320px;
    min-height: 260px;
    max-width: none;
    max-height: none;
    padding: 20px;
    overflow: auto;
    resize: both;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #243447;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.restaurant-map-dialog::backdrop { background: rgba(15, 23, 42, .65); }
.restaurant-map-dialog-header {
    position: sticky;
    top: -20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -20px -20px 16px;
    padding: 14px 20px;
    border-bottom: 1px solid #dbe2ea;
    background: #fff;
}
.restaurant-map-dialog-header h2 { margin: 0; font-size: 18px; }
.restaurant-map-close {
    flex: 0 0 auto;
    min-width: 76px;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 7px;
    background: #b42318;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.restaurant-map-close:hover { background: #8f1d14; }
.restaurant-map-location { margin: 12px 0; overflow-wrap: anywhere; }
.restaurant-map-providers { display: flex; align-items: center; gap: 16px; border: 0; padding: 0; margin: 12px 0; }
.restaurant-map-providers legend { float: left; width: auto; margin: 0 12px 0 0; font-size: 14px; font-weight: 700; }
.restaurant-map-providers label { cursor: pointer; }
.restaurant-map-status { min-height: 1.5em; margin: 8px 0; font-size: 13px; }
.restaurant-map-view { width: 100%; height: max(260px, calc(100% - 220px)); min-height: 260px; }
.restaurant-map-view iframe { width: 100%; height: 100%; border: 0; }
.restaurant-map-view[hidden], .restaurant-map-open-link[hidden] { display: none; }
.restaurant-map-attribution { color: #5b6470; font-size: 12px; }
.restaurant-map-open-link.is-disabled {
    pointer-events: none;
    background: #94a3b8;
}


/* =========================================
   반응형 (모바일)
========================================= */
@media (max-width: 768px) {
    body { padding: 10px; }
    .top-navbar { flex-direction: column; align-items: flex-start; padding: 10px 20px; }
    .top-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
    .container { padding: 20px 10px; }
    .header h1 { font-size: 1.6rem; }
    .nav-links { gap: 8px; }
    .nav-btn { width: 100%; justify-content: center; font-size: 0.85rem; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .source-list { flex-direction: column; gap: 5px; }
    .document-topbar { padding: 10px 0; }
    .document-topbar-inner { padding: 0 14px; }
    .study-room-container { padding: 24px 14px 68px; }
    .study-room-wall { gap: 18px; }
    .bookshelf-section { padding: 14px 10px 16px; }
    .bookshelf-books { grid-template-columns: repeat(auto-fill, 100px); justify-content: center; gap: 9px; min-height: 210px; padding: 12px 4px 0; }
    .book-link { min-height: 170px; padding: 14px 8px 12px 12px; }
    .book-title { font-size: .86rem; }
    .document-content { padding: 24px 18px; }
    .restaurant-map-dialog {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 16px;
        border-radius: 0;
        resize: none;
    }
    .restaurant-map-dialog-header {
        top: -16px;
        margin: -16px -16px 14px;
        padding: 12px 16px;
    }
}

/* =========================================
   📧 문의/오류 신고 팝업 (모달) 디자인
========================================= */
.custom-modal-overlay {
    display: none; /* 기본은 숨김 */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.custom-modal-box {
    background: #fff;
    width: 90%;
    max-width: 400px;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.modal-title { font-size: 1.1rem; font-weight: bold; color: #333; margin: 0; }
.close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #999; }
.close-btn:hover { color: #d63031; }

.modal-input, .modal-textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}
.modal-textarea { resize: vertical; min-height: 100px; }

/* =========================================
   📦 For HongTong 드래그 앤 드롭 디자인
========================================= */
.drop-zone {
    border: 2px dashed #adb5bd;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drop-zone.dragover {
    background-color: #e7f5ff;
    border-color: #5c7cfa;
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-item .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== 요리 설명 (음식 사전) ===== */
.restaurant-food-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.restaurant-food-row[hidden] { display: none; }
.food-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.food-chip {
    padding: 2px 9px; border: 1px solid #ffc078; border-radius: 999px; background: #fff4e6;
    color: #d9480f; font-size: 12px; font-weight: 700; line-height: 1.6; cursor: pointer;
}
.food-chip:hover, .food-chip:focus-visible { background: #ffe8cc; }
.food-chip::after { content: " ⓘ"; font-weight: 400; }
.food-info-dialog {
    box-sizing: border-box; width: min(92vw, 460px); max-height: 85vh; padding: 18px 20px; overflow: auto;
    border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.food-info-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.food-info-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.food-info-header h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.food-info-photo { margin: 4px 0 10px; }
.food-info-photo[hidden] { display: none; }
.food-info-photo img {
    display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain;
    border-radius: 8px; background: #f1f3f5;
}
.food-info-photo figcaption { margin-top: 4px; font-size: 10px; line-height: 1.4; color: #868e96; overflow-wrap: anywhere; }
.food-info-photo figcaption a { color: #868e96; }
.food-info-reading { margin: 0 0 2px; font-size: 13px; color: #495057; }
.food-info-category { margin: 0 0 10px; font-size: 12px; color: #868e96; }
.food-info-reading:empty, .food-info-category:empty { display: none; }
.food-info-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: #212529; }
.food-info-desc.is-error { color: #c92a2a; }
.food-info-source { margin: 0; padding-top: 10px; border-top: 1px solid #e9ecef; font-size: 11px; color: #868e96; }
.food-info-source a { color: #868e96; }

/* ===== "카카오맵 길찾기" / "Google 지도에서 보기" ===== */
.restaurant-app-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.restaurant-app-links:empty { display: none; }
.restaurant-app-link {
    display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
}
.restaurant-app-link.is-kakao { background: #fee500; color: #191919; border-color: #f0d800; }
.restaurant-app-link.is-kakao:hover { background: #f5dc00; }
.restaurant-app-link.is-google { background: #fff; color: #1a73e8; border-color: #dadce0; }
.restaurant-app-link.is-google:hover { background: #f1f6fe; }
/* 카카오 정보창은 열릴 때 내용 폭을 재서 크기를 정한다. 상호명이 짧아도 버튼 줄(nowrap)이 다 들어가도록
   max-content 로 폭을 잡고, 주소가 아주 길 때만 340px 에서 줄바꿈한다 (일본어·영어 버튼 문구 기준) */
.restaurant-nearby-info { width: max-content; max-width: 340px; }
.restaurant-nearby-info span { display: block; }
.restaurant-nearby-info .restaurant-app-links { margin-top: 6px; flex-wrap: nowrap; }
.restaurant-nearby-info .restaurant-app-link { padding: 4px 8px; }

/* ===== Restaurant location search dialog (map area / around a place) ===== */
/* 홈 카드 맨 위 "지도에서 찾기" (주 진입) */
.restaurant-map-finder { margin: 0 0 4px; padding: 10px; border: 1px solid #ffd8a8; border-radius: 10px; background: #fff9f0; }
.restaurant-map-finder label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #a64d00; }
.restaurant-map-finder-row { display: flex; gap: 5px; }
.restaurant-map-finder-row input {
    flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid #ffc078; border-radius: 6px; font-size: 13px; background: #fff;
}
.restaurant-map-finder-row button {
    flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: 6px; background: #f76707; color: #fff;
    font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.restaurant-map-finder-row button:hover { background: #e8590c; }
.restaurant-finder-divider { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; color: #adb5bd; font-size: 11px; }
.restaurant-finder-divider::before,
.restaurant-finder-divider::after { content: ""; flex: 1; border-top: 1px solid #e9ecef; }
.restaurant-nearby-open {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 12px;
    border: 1px solid #f08c00;
    border-radius: 5px;
    background: #fff4e6;
    color: #a64d00;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.restaurant-nearby-open:hover { background: #ffe8cc; }
.restaurant-nearby-intro { margin: 0 0 10px; font-size: 13px; color: #495057; }
.restaurant-nearby-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.restaurant-nearby-place label { font-size: 13px; font-weight: 700; }
.restaurant-nearby-place input { flex: 1 1 220px; min-width: 0; padding: 6px 10px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; }
.restaurant-nearby-place select { padding: 6px; border: 1px solid #ced4da; border-radius: 6px; font-size: 14px; }
.restaurant-nearby-place button,
.restaurant-nearby-toolbar button {
    padding: 6px 14px;
    border: 0;
    border-radius: 6px;
    background: #f08c00;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.restaurant-nearby-place button:hover,
.restaurant-nearby-toolbar button:hover { background: #d9480f; }
.restaurant-nearby-places { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid #dee2e6; border-radius: 6px; max-height: 180px; overflow: auto; }
.restaurant-nearby-places[hidden] { display: none; }
.restaurant-nearby-places button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #f1f3f5;
    background: #fff;
    text-align: left;
    cursor: pointer;
}
.restaurant-nearby-places button:hover { background: #fff4e6; }
.restaurant-nearby-places strong { display: block; font-size: 13px; color: #212529; }
.restaurant-nearby-places span { display: block; font-size: 12px; color: #6c757d; }
/* 지도 결과 목록은 홈 검색 결과와 같은 카드(.restaurant-item-card + 상세)를 쓴다 */
.restaurant-nearby-results > li { margin: 0; }
.restaurant-nearby-results .restaurant-item-detail { margin: -4px 0 8px; }
.restaurant-nearby-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.restaurant-nearby-coverage { font-size: 12px; color: #6c757d; }
.restaurant-map-status.is-error { color: #c92a2a; }
.restaurant-nearby-body { display: flex; gap: 10px; height: max(300px, calc(100% - 260px)); min-height: 300px; }
.restaurant-nearby-map { flex: 1 1 auto; min-width: 0; border-radius: 8px; }
.restaurant-nearby-results { flex: 0 0 340px; margin: 0; padding: 8px; list-style: none; overflow: auto; border: 1px solid #dee2e6; border-radius: 8px; background: #f8f9fa; }
.restaurant-nearby-results:empty { display: none; }
.restaurant-nearby-info { padding: 6px 8px; min-width: 160px; font-size: 12px; line-height: 1.4; }
.restaurant-nearby-info strong { display: block; font-size: 13px; }
@media (max-width: 720px) {
    .restaurant-nearby-body { flex-direction: column; height: auto; }
    .restaurant-nearby-map { height: 320px; flex: 0 0 320px; }
    .restaurant-nearby-results { flex: 0 0 auto; max-height: 420px; }
}

/* ===== bapwalk.com 사이트 (같은 템플릿, site == 'bapwalk') ===== */
.bapwalk-hero { text-align: center; padding: 28px 12px 8px; }
.bapwalk-brand { margin: 0; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.5px; color: #e8590c; }
.bapwalk-brand span { color: #2b8a3e; }
.bapwalk-tagline { margin: 6px 0 4px; font-size: 1.05rem; font-weight: 700; color: #343a40; }
.bapwalk-intro { max-width: 560px; margin: 0 auto; font-size: 0.85rem; line-height: 1.6; color: #666; }
.walk-coming-card h3 { margin: 0 0 8px; }
.walk-coming-card p { margin: 0; font-size: 13px; line-height: 1.6; color: #666; }
/* bapwalk: 음식 / 산책 / 커뮤니티 메뉴, 음식점 카드는 맨 위에 넓게 */
.bapwalk-tabs { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
    margin: 12px 0 4px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.bapwalk-tab { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; color: #495057; background: #f1f3f5; }
.bapwalk-tab:hover { background: #e9ecef; }
.bapwalk-tab.is-food { background: #fff4e6; color: #d9480f; }
.bapwalk-tab.is-walk { background: #ebfbee; color: #2b8a3e; }
.bapwalk-food-grid { display: block; }
.bapwalk-food-grid > .card { width: 100%; max-width: none; box-sizing: border-box; }
.site-bapwalk .home-section { scroll-margin-top: 70px; }