@charset "utf-8";

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

html{
    scroll-behavior:smooth;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    font-family:"Pretendard","Noto Sans KR",sans-serif;
    color:#161616;
    background:#fff;
    line-height:1.6;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}

.container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 24px;
}

/* ===== 헤더 / landing.css와 동일 ===== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:0 28px;
    border-radius:999px;
    font-weight:700;
    transition:.25s ease;
    border:0;
    cursor:pointer;
    white-space:nowrap;
}

.btn-line{
    border:1px solid #d8d8d8;
    background:#fff;
    color:#161616;
}
.btn-line:hover{
    border-color:#ff7a11;
    color:#ff7a11;
}

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

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(0,0,0,.05);
    transition:.25s ease;
}

.site-header.scrolled{
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.header-inner{
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-width:0;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1;
}

.brand-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 14px;
    border-radius:999px;
    background:#fff2e8;
    color:#ff6a00;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    flex-shrink:0;
}

.brand-text{
    font-size:22px;
    font-weight:800;
    letter-spacing:-0.03em;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.nav{
    display:flex;
    align-items:center;
    gap:34px;
}

.nav a{
    font-size:16px;
    font-weight:600;
    color:#222;
}

.nav a:hover{
    color:#ff6a00;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.menu-btn{
    display:none;
    width:44px;
    height:44px;
    border:0;
    border-radius:12px;
    background:#f5f5f5;
    cursor:pointer;
    font-size:22px;
    flex-shrink:0;
}

.mobile-nav{
    display:none;
    padding:0 24px 18px;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.05);
}

.mobile-nav a{
    display:block;
    padding:14px 0;
    border-bottom:1px solid #f1f1f1;
    font-weight:600;
}

.mobile-nav.open{
    display:block;
}

/* index와 동일한 헤더 버튼 크기 */
.header-link-btn{
    min-height:56px;
    padding:0 28px;
    font-size:inherit;
}

/* ===== 상품 상단 ===== */
.product-hero{
    padding:160px 0 80px;
    background:#faf8f4;
    overflow:hidden;
}

.product-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:50px;
    align-items:start;
}

.product-gallery,
.product-info{
    min-width:0;
    max-width:100%;
}

.product-gallery .main-image{
    width:100%;
    max-width:100%;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.product-gallery .main-image img{
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:cover;
}

.thumb-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:14px;
    width:100%;
    max-width:100%;
}

.thumb-list img{
    width:100%;
    max-width:100%;
    border-radius:14px;
    border:1px solid #eee;
    background:#fff;
    padding:4px;
    cursor:pointer;
    transition:.2s ease;
}

.thumb-list img:hover{
    transform:translateY(-2px);
    border-color:#222;
}

.thumb-list img.active-thumb{
    border:2px solid #222;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.product-category{
    font-size:14px;
    color:#8a6d3b;
    margin-bottom:10px;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.product-info h1{
    font-size:42px;
    line-height:1.2;
    margin-bottom:10px;
    letter-spacing:-0.03em;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.product-subtitle{
    font-size:18px;
    color:#666;
    margin-bottom:28px;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.price-box{
    width:100%;
    max-width:100%;
    background:#fff;
    padding:22px;
    border-radius:20px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    margin-bottom:20px;
}

.sale-label{
    font-size:14px;
    color:#888;
    margin-bottom:6px;
}

.price{
    font-size:36px;
    font-weight:800;
    color:#111;
    line-height:1.2;
    word-break:keep-all;
}

.price-note{
    font-size:14px;
    color:#777;
    margin-top:8px;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.summary-box{
    width:100%;
    max-width:100%;
    background:#fff;
    padding:24px;
    border-radius:20px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.summary-box p{
    font-size:17px;
    font-weight:600;
    margin-bottom:14px;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.summary-box li{
    color:#555;
    margin-bottom:8px;
    word-break:keep-all;
    overflow-wrap:break-word;
}
.summary-box ul{
    padding-left:20px;
}

.action-buttons{
    display:flex;
    gap:12px;
    margin-top:24px;
    flex-wrap:wrap;
    width:100%;
    max-width:100%;
}

.action-buttons .btn{
    flex:1 1 0;
    min-width:0;
    max-width:100%;
    min-height:52px;
    padding:0 18px;
}

.btn-buy{
    background:linear-gradient(135deg,#ff8a1d 0%,#ff6a00 100%);
    color:#fff;
    box-shadow:0 14px 30px rgba(255,106,0,.16);
}

.btn-buy:hover{
    transform:translateY(-2px);
}

/* ===== 공통 섹션 ===== */
section{
    padding:90px 0;
}

.section-title{
    text-align:center;
    margin-bottom:44px;
}

.section-title p{
    font-size:13px;
    color:#a2875b;
    letter-spacing:2px;
    margin-bottom:8px;
}

.section-title h2{
    font-size:34px;
    line-height:1.3;
    letter-spacing:-0.03em;
    word-break:keep-all;
    overflow-wrap:break-word;
}

/* ===== 포인트 ===== */
.point-section{
    background:#fff;
}

.point-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.point-card{
    background:#f8f8f8;
    padding:30px 24px;
    border-radius:22px;
    min-width:0;
}

.point-card h3{
    font-size:22px;
    margin-bottom:14px;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.point-card p{
    color:#555;
    font-size:15px;
    word-break:keep-all;
    overflow-wrap:break-word;
}

/* ===== 상세배너 ===== */
.detail-section{
    background:#f7f2ea;
}

.detail-banner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px;
    align-items:center;
}

.mini-title{
    font-size:13px;
    letter-spacing:2px;
    color:#9b7e56;
    margin-bottom:10px;
}

.detail-text h2{
    font-size:38px;
    line-height:1.3;
    margin-bottom:18px;
}

.detail-text p{
    color:#555;
    font-size:16px;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.detail-text h2,
.story-block h2,
.section-title h2{
    word-break:keep-all;
    overflow-wrap:break-word;
}

.detail-image,
.detail-text{
    min-width:0;
}

.detail-image img{
    width:100%;
    border-radius:26px;
    box-shadow:0 14px 30px rgba(0,0,0,.08);
}

/* ===== 상세 설명 ===== */
.story-section{
    background:#fff;
    padding:100px 0;
}

.narrow-container{
    max-width:900px;
}

.story-block{
    margin-bottom:42px;
}

.story-block h2{
    font-size:38px;
    line-height:1.35;
    margin-bottom:14px;
    color:#111;
    font-weight:800;
}

.story-block h3{
    font-size:27px;
    line-height:1.45;
    margin-bottom:16px;
    color:#222;
    font-weight:700;
}

.story-block h4{
    font-size:22px;
    line-height:1.5;
    margin-bottom:12px;
    color:#222;
    font-weight:700;
}

.story-block p,
.story-block li{
    font-size:18px;
    line-height:1.9;
    color:#444;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.story-lead{
    font-size:20px !important;
    line-height:1.95;
}

.story-hash{
    display:inline-block;
    margin-bottom:14px;
    font-size:16px !important;
    color:#9b7e56 !important;
    font-weight:700;
}

.center-intro{
    text-align:center;
}

.story-image{
    margin:34px 0 54px;
}

.story-image img{
    width:100%;
    border-radius:24px;
    display:block;
    box-shadow:0 14px 34px rgba(0,0,0,.08);
}

.story-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin:30px 0 50px;
}

.story-card{
    background:#faf6ef;
    padding:28px 22px;
    border-radius:20px;
    min-width:0;
}

.story-card p{
    font-size:16px;
    line-height:1.8;
}

.story-list,
.story-number-list{
    padding-left:22px;
    margin-top:10px;
}

.story-list li,
.story-number-list li{
    margin-bottom:12px;
}

.highlight-box{
    background:#f7f2ea;
    border-radius:24px;
    padding:34px 28px;
    margin:26px 0 50px;
}

.faq-block{
    background:#fafafa;
    padding:34px 28px;
    border-radius:24px;
}

.faq-item + .faq-item{
    margin-top:26px;
    padding-top:26px;
    border-top:1px solid #e5e5e5;
}

.notice-detail{
    background:#fff8f1;
    border:1px solid #f0dfc8;
    border-radius:24px;
    padding:32px 28px;
}

.return-detail{
    background:#f8f8f8;
    border-radius:24px;
    padding:30px 28px;
    margin-bottom:0;
}

.end-message{
    padding:10px 0;
}

/* ===== 스펙 ===== */
.spec-section{
    background:#fff;
}

.spec-table{
    border-top:2px solid #222;
}

.spec-row{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    border-bottom:1px solid #e9e9e9;
}

.spec-th,
.spec-td{
    padding:20px 16px;
    font-size:15px;
    word-break:keep-all;
    overflow-wrap:break-word;
}

.spec-th{
    background:#fafafa;
    font-weight:700;
}

/* ===== 구매 전 안내 ===== */
.notice-section{
    background:#fafafa;
}

.notice-box{
    max-width:900px;
    margin:0 auto;
    background:#fff;
    padding:30px;
    border-radius:22px;
    box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.notice-box li{
    margin-bottom:12px;
    color:#555;
    word-break:keep-all;
    overflow-wrap:break-word;
}

/* ===== footer ===== */
.site-footer{
    padding:44px 0;
    background:#121212;
    color:#cfcfcf;
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:30px;
}

.footer-brand strong{
    display:block;
    font-size:26px;
    color:#fff;
    margin-bottom:10px;
}

.footer-meta p{
    margin-bottom:6px;
    font-size:14px;
    color:#cfcfcf;
}

/* ===== 반응형 ===== */
@media (max-width:1180px){
    .point-grid,
    .story-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .detail-banner{
        grid-template-columns:1fr;
    }

    .footer-inner{
        flex-direction:column;
    }
}

@media (max-width:992px){
    .product-hero-inner,
    .point-grid,
    .story-grid{
        grid-template-columns:1fr;
    }

    .product-hero{
        padding:140px 0 70px;
    }

    .product-info h1{
        font-size:34px;
    }

    .detail-text h2,
    .section-title h2{
        font-size:28px;
    }

    .story-block h2{
        font-size:30px;
    }

    .story-block h3{
        font-size:24px;
    }

    .story-block h4{
        font-size:20px;
    }

    .story-block p,
    .story-block li{
        font-size:17px;
    }

    .spec-row{
        grid-template-columns:1fr;
    }

    .spec-th{
        padding-bottom:6px;
    }

    .spec-td{
        padding-top:6px;
    }
}

@media (max-width:768px){
    .container{
        padding:0 16px;
    }

    .nav,
    .header-actions .header-link-btn{
        display:none;
    }

    .menu-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        flex-shrink:0;
    }

    .header-inner{
        min-height:72px;
        gap:12px;
        min-width:0;
    }
	
	

    .brand{
        flex:1;
        min-width:0;
        gap:8px;
    }

    .brand-badge{
        padding:0 10px;
        height:32px;
        font-size:11px;
        letter-spacing:.08em;
    }

    .brand-text{
        font-size:16px;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .product-hero{
        padding:132px 0 56px;
    }

    .product-hero-inner{
        grid-template-columns:minmax(0,1fr);
        gap:24px;
    }

    .product-gallery,
    .product-info,
    .product-gallery .main-image,
    .thumb-list,
    .action-buttons,
    .price-box,
    .summary-box{	
        width:100%;
        min-width:0;
        max-width:100%;
    }

    section{
        padding:70px 0;
    }

    .thumb-list{
        gap:8px;
        margin-top:10px;
    }

    .thumb-list img{
        border-radius:12px;
        padding:3px;
    }

    .product-gallery .main-image{
        border-radius:18px;
    }

    .product-info h1{
        font-size:30px;
    }

    .product-subtitle{
        font-size:16px;
        margin-bottom:22px;
    }

    .price-box,
    .summary-box{
        padding:18px;
        border-radius:18px;		
    }

    .price{
        font-size:30px;
    }

    .action-buttons{
        flex-direction:column;
        gap:10px;
    }

    .action-buttons .btn{
        width:100%;
        flex:none;
        min-height:52px;
        padding:0 18px;
        text-align:center;
    }

    .story-section{
        padding:70px 0;
    }

    .story-block{
        margin-bottom:34px;
    }

    .story-block h2{
        font-size:26px;
    }

    .story-block h3{
        font-size:21px;
    }

    .story-block h4{
        font-size:18px;
    }

    .story-block p,
    .story-block li{
        font-size:16px;
        line-height:1.8;
    }

    .story-lead{
        font-size:17px !important;
    }

    .highlight-box,
    .faq-block,
    .notice-detail,
    .return-detail,
    .notice-box{
        padding:24px 18px;
    }

    .story-image img,
    .detail-image img{
        border-radius:18px;
    }

    .mobile-nav{
        padding:0 16px 18px;
    }

    .site-footer{
        padding:36px 0;
    }

    .footer-brand strong{
        font-size:22px;
    }

    .footer-meta p{
        font-size:13px;
        line-height:1.7;
    }
}

@media (max-width:480px){
    .container{
        padding:0 14px;
    }

    .product-hero{
        padding:124px 0 50px;
    }

    .product-info h1{
        font-size:26px;
    }

    .section-title h2,
    .detail-text h2{
        font-size:24px;
    }

    .story-block h2{
        font-size:24px;
    }

    .story-block h3{
        font-size:19px;
    }

    .story-block h4{
        font-size:17px;
    }

    .price{
        font-size:28px;
    }

    .action-buttons .btn{
        font-size:13px;
        padding:0 14px;
        min-height:48px;
    }
}

.phone-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:9999;
}

.phone-popup.show{
    display:flex;
}

.phone-popup-box{
    position:relative;
    width:100%;
    max-width:360px;
    background:#fff;
    border-radius:20px;
    padding:32px 24px 24px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.phone-popup-close{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border:0;
    background:#f3f3f3;
    border-radius:50%;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.phone-popup-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:12px;
    color:#111;
}

.phone-popup-number{
    font-size:28px;
    font-weight:800;
    color:#111;
    margin-bottom:10px;
}

.phone-popup-time{
    font-size:15px;
    color:#666;
    line-height:1.6;
}