* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background-color: #FAF6EF;
            color: #332820;
            font-family: Arial, sans-serif;
        }

        header {
            background-color: white;
            padding: 22px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #E8DCD0;
        }

        .logo {
            color: #694B3A;
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
        }

        nav a {
            color: #694B3A;
            text-decoration: none;
            margin-left: 25px;
            font-weight: bold;
        }

        .hero {
            background-color: #F2E8DC;
            padding: 85px 20px;
            text-align: center;
        }

        .hero-label {
            color: #694B3A;
            font-size: 13px;
            letter-spacing: 3px;
            font-weight: bold;
        }

        .hero h1 {
            font-size: 42px;
            margin: 20px 0;
        }

        .hero-description {
            color: #847467;
            font-size: 17px;
            margin-bottom: 35px;
        }

        .search-box {
            display: flex;
            max-width: 580px;
            margin: 0 auto;
            background-color: white;
            padding: 8px;
            border-radius: 14px;
            box-shadow: 0 4px 15px #00000010;
        }

        .search-box input {
            flex: 1;
            min-width: 0;
            padding: 15px;
            border: none;
            outline: none;
            font-size: 16px;
        }

        .search-box button {
            background-color: #694B3A;
            color: white;
            border: none;
            padding: 14px 25px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 15px;
        }

        main {
            max-width: 1150px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .section-title {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .section-description {
            color: #847467;
            margin-bottom: 35px;
        }

        .whisky-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 25px;
        }

        .whisky-card {
            background-color: white;
            padding: 25px;
            border-radius: 18px;
            text-align: center;
            box-shadow: 0 4px 15px #00000010;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .whisky-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 8px 22px #00000018;
        }

        .whisky-card img {
            width: 100%;
            height: 240px;
            object-fit: contain;
        }

        .whisky-card h3 {
            font-size: 18px;
            margin: 20px 0 10px;
        }

        .whisky-card p {
            color: #847467;
            font-size: 14px;
        }

        #no-results {
            display: none;
            text-align: center;
            padding: 40px;
            color: #847467;
        }

        footer {
            text-align: center;
            padding: 35px;
            border-top: 1px solid #E8DCD0;
            color: #847467;
            font-size: 13px;
        }

                
        /* 로그인 상태 메뉴 */

        .user-menu {
            display: inline-flex;
            align-items: center;
            gap: 15px;
        }

        .user-status {
            color: #694B3A;
            font-size: 14px;
            font-weight: bold;
        }

        #logout-button {
            background: #694B3A;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 9px 15px;
            font-size: 13px;
            cursor: pointer;
        }

        #logout-button:hover {
            background: #503728;
        }


        /* 72단계: 홈페이지 모바일 반응형 디자인 */

        @media (max-width: 768px) {

            /* 상단 메뉴 */
            header {
                padding: 16px 18px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 14px;
            }

            .logo {
                font-size: 18px;
                text-align: center;
            }

            nav {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                gap: 12px;
            }

            nav a {
                margin-left: 0;
                font-size: 13px;
            }

            .user-menu {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
            }

            .user-status {
                font-size: 12px;
            }

            #logout-button {
                padding: 9px 12px;
                font-size: 12px;
            }

            /* 메인 소개 */
            .hero {
                padding: 48px 18px 52px;
            }

            .hero-label {
                font-size: 11px;
                letter-spacing: 2px;
            }

            .hero h1 {
                font-size: 26px;
                line-height: 1.4;
                margin: 18px 0;
                word-break: keep-all;
            }

            .hero-description {
                font-size: 14px;
                line-height: 1.7;
                margin-bottom: 28px;
                word-break: keep-all;
            }

            /* 검색창 */
            .search-box {
                width: 100%;
                max-width: 480px;
                padding: 6px;
                border-radius: 12px;
            }

            .search-box input {
                min-width: 0;
                padding: 12px;
                font-size: 14px;
            }

            .search-box button {
                flex-shrink: 0;
                padding: 12px 16px;
                font-size: 14px;
            }

            /* 위스키 목록 */
            main {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
                padding: 38px 18px 50px;
            }

            .section-title {
                font-size: 24px;
                margin-bottom: 12px;
            }

            .section-description {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 25px;
                word-break: keep-all;
            }

            .whisky-list {
                display: grid;
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .whisky-card {
                padding: 20px;
                border-radius: 16px;
            }

            .whisky-card img {
                height: 210px;
                object-fit: contain;
            }

            .whisky-card h3 {
                font-size: 17px;
            }

            /* 하단 */
            footer {
                padding: 25px 18px;
                font-size: 12px;
            }
        }

        /* 폭이 특히 좁은 휴대폰 */
        @media (max-width: 360px) {

            .hero h1 {
                font-size: 23px;
            }

            nav {
                gap: 8px;
            }

            nav a {
                font-size: 12px;
            }

            .search-box input {
                padding: 10px 8px;
            }

            .search-box button {
                padding: 10px 12px;
            }
        }

/* 89단계: 검색 필터 및 정렬 */
.browse-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:0 0 18px; }
.browse-controls label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:#694B3A; font-weight:bold; flex:1 1 145px; }
.browse-controls select { width:100%; border:1px solid #C9AD91; border-radius:9px; padding:11px; background:white; color:#332820; font-size:14px; }
#reset-filters { border:1px solid #C9AD91; background:white; color:#694B3A; border-radius:9px; padding:11px 18px; cursor:pointer; }
.result-count { font-size:13px; color:#847467; margin:0 0 18px; }
.whisky-card[hidden] { display:none !important; }
@media(max-width:768px){ .browse-controls {gap:10px;} .browse-controls label {flex:1 1 calc(50% - 10px);} #reset-filters {width:100%;} }

/* CASKO brand refresh */
header { background:linear-gradient(110deg,#29180f,#4b2a19 75%,#2c1a11); border-bottom:1px solid #6d4730; }
.logo { display:inline-flex; align-items:center; gap:12px; color:#fff6e9; }
.brand-mark { display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid #b89060;border-radius:10px;color:#d5ac76;font-size:24px; }
.brand-word { font-family:Georgia,serif; font-size:29px;letter-spacing:2px;line-height:1; }
.brand-word small {display:block;font-family:Arial,sans-serif;font-size:9px;letter-spacing:2.2px;margin-top:6px;color:#dfc2a3;}
header nav a,header nav .user-status {color:#f8ebdb;}
header nav a:hover {color:#f1c895;}
.hero {background:radial-gradient(circle at 85% 10%,#ead6bd 0%,transparent 32%),linear-gradient(135deg,#f6ecdf,#eadac6);}
.hero-label {letter-spacing:3px;}
.hero h1 {font-family:Georgia,'Malgun Gothic',serif;}
.whisky-card {border:1px solid #eadbc9;}
.whisky-card:hover {border-color:#c9a780;}
@media(max-width:768px){.brand-word{font-size:24px;} header nav a{color:#f8ebdb;}}

/* 모바일 위스키 둘러보기: 2열 카드 */
@media(max-width:768px){
 .whisky-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .whisky-list .whisky-card{min-width:0;padding:12px 9px;border-radius:13px}
 .whisky-list .whisky-card img{height:145px;width:100%;object-fit:contain}
 .whisky-list .whisky-card h3{font-size:14px;line-height:1.4;margin:10px 0 7px;overflow-wrap:anywhere;word-break:keep-all}
 .whisky-list .whisky-card p{font-size:12px;line-height:1.5;margin:6px 0}
}
@media(max-width:360px){.whisky-list{gap:8px}.whisky-list .whisky-card{padding:10px 7px}.whisky-list .whisky-card img{height:125px}}