:root{
            --bg:#fffaf4;
            --card:#fffdf8;
            --text:#2f2417;
            --muted:#7b6955;
            --line:#eadcc7;
            --soft:#fff7ea;
            --brand:#c07f22;
            --brand-2:#945f1a;
            --brand-soft:#fff0dc;
            --shadow:0 14px 34px rgba(92,65,29,.08);
            --shadow-2:0 8px 18px rgba(92,65,29,.05);
            --radius:24px;
            --radius-sm:18px;
            --container:1220px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(192,127,34,.08), transparent 24%),
                radial-gradient(circle at top right, rgba(239,179,92,.10), transparent 22%),
                linear-gradient(180deg,#fffdf9 0%, #fdf6ec 44%, #fffaf4 100%);
            line-height:1.55;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }

        img{display:block;max-width:100%}
        a{text-decoration:none;color:inherit}
        button,input{font:inherit}
        .container{width:min(var(--container), calc(100% - 28px));margin-inline:auto}
        .section{padding:56px 0}

        .btn{
            min-height:48px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:0 18px;
            border-radius:14px;
            font-weight:800;
            border:1px solid transparent;
            cursor:pointer;
            transition:.18s ease;
            text-align:center;
            gap:8px;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn-primary{
            color:#fff;
            background:linear-gradient(180deg,var(--brand),var(--brand-2));
            box-shadow:0 10px 24px rgba(192,127,34,.22);
        }
        .btn-secondary{
            background:linear-gradient(180deg,#fffaf0 0%, #fff2d9 100%);
            border-color:var(--line);
            color:var(--brand-2);
            box-shadow:var(--shadow-2);
        }

        .page-head{
            padding:34px 0 12px;
        }
        .page-head-shell{
            background:
                radial-gradient(circle at 100% 0%, rgba(239,179,92,.16), transparent 28%),
                linear-gradient(135deg,#fffdf8 0%, #fff7ea 100%);
            border:1px solid var(--line);
            border-radius:30px;
            padding:28px;
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }
        .page-head-shell:after{
            content:"";
            position:absolute;
            right:-80px;
            top:-80px;
            width:240px;
            height:240px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(192,127,34,.10), rgba(192,127,34,0) 68%);
            pointer-events:none;
        }

        .page-head-grid{
            display:grid;
            grid-template-columns:minmax(0,1fr) 470px;
            gap:28px;
            align-items:center;
            position:relative;
            z-index:1;
        }

        .page-head-visual{
            width:100%;
            max-width:470px;
            min-height:320px;
            margin-left:auto;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:24px;
            background:linear-gradient(145deg,#fff9ee,#fff3df);
            border:1px solid var(--line);
            padding:16px 18px;
        }

        .page-head-visual img{
            width:100%;
            max-width:470px;
            max-height:320px;
            object-fit:contain;
            filter:drop-shadow(0 18px 28px rgba(148,95,26,.12));
        }

        .pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            background:linear-gradient(180deg,#fff5e6,#fff0dc);
            color:var(--brand-2);
            font-weight:800;
            font-size:.88rem;
            margin-bottom:14px;
        }
        .pill:before{
            content:"";
            width:9px;
            height:9px;
            border-radius:50%;
            background:var(--brand);
            box-shadow:0 0 0 6px rgba(192,127,34,.12);
        }

        .page-title{
            color:var(--brand-2);
            margin:0 0 12px;
            font-size:clamp(2.15rem,1.55rem + 2.15vw,4rem);
            line-height:1;
            letter-spacing:-.05em;
            max-width:none;
            white-space:nowrap;
        }
        .page-text{
            margin:0;
            max-width:72ch;
            color:#7b6955;
            font-size:1.02rem;
        }

        .page-head-actions{
            margin-top:20px;
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }

        .page-short-links{
            margin-top:16px;
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .page-short-links a{
            min-height:40px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:0 14px;
            border-radius:999px;
            background:linear-gradient(180deg,#fffdf8 0%, #fff7ea 100%);
            border:1px solid var(--line);
            box-shadow:var(--shadow-2);
            font-size:.92rem;
            font-weight:700;
            color:#5c4738;
        }

        .head-divider{
            height:1px;
            background:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 12%, rgba(0,0,0,.10) 88%, transparent 100%);
            margin-top:18px;
        }

        .hero{
            padding:18px 0 8px;
        }
        .hero-shell{
            display:grid;
            grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
            gap:20px;
            align-items:stretch;
        }
        .hero-left,
        .hero-right-card{
            background:linear-gradient(180deg,#fffdf8 0%, #fff7ea 100%);
            border:1px solid var(--line);
            border-radius:28px;
            box-shadow:var(--shadow);
        }
        .hero-left{
            padding:28px;
        }
        .hero-left h2{
            color:var(--brand-2);
            margin:0 0 10px;
            font-size:1.55rem;
            line-height:1.08;
        }
        .hero-left p{
            margin:0;
            color:var(--muted);
        }

        .hero-micro{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
            margin:20px 0 20px;
        }
        .micro{
            padding:14px;
            border-radius:18px;
            background:linear-gradient(180deg,#fffdf8 0%, #fff7ea 100%);
            border:1px solid var(--line);
        }
        .micro strong{
            display:block;
            font-size:1rem;
            line-height:1.1;
            margin-bottom:4px;
        }
        .micro span{
            display:block;
            font-size:.86rem;
            color:var(--muted);
            line-height:1.4;
        }

        .hero-right-card{
            padding:22px;
            background:
                radial-gradient(circle at 100% 0%, rgba(239,179,92,.12), transparent 32%),
                linear-gradient(180deg,#fffdf8 0%, #fff7ea 100%);
        }
        .price-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:#fff5e6;
            border:1px solid var(--line);
            color:var(--brand-2);
            font-weight:800;
            font-size:.82rem;
            margin-bottom:14px;
        }
        .product-shot{
            display:grid;
            grid-template-columns:150px 1fr;
            gap:16px;
            align-items:center;
        }
        .product-shot img{
            width:150px;
            margin-inline:auto;
            filter:drop-shadow(0 14px 24px rgba(148,95,26,.12));
        }
        .price-copy h3{
            margin:0 0 8px;
            font-size:1.28rem;
            line-height:1.08;
            color:#945f1a;
        }
        .price-row{
            display:flex;
            align-items:flex-end;
            gap:10px;
            flex-wrap:wrap;
            margin-bottom:12px;
        }
        .price-row strong{
            font-size:2rem;
            line-height:1;
            letter-spacing:-.04em;
            color:var(--brand-2);
        }
        .price-row span{
            text-decoration:line-through;
            color:#8f826f;
            font-weight:700;
        }

        .meta-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:10px;
            margin-top:16px;
        }
        .meta-item{
            padding:12px;
            border-radius:16px;
            background:#ffffff;
            border:1px solid var(--line);
        }
        .meta-item b{
            display:block;
            font-size:.82rem;
            color:var(--brand-2);
            margin-bottom:4px;
            font-weight:800;
        }
        .meta-item span{
            display:block;
            color:#5c4738;
            font-size:.92rem;
            line-height:1.35;
        }

        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:22px;
        }
        .section-head .copy{
            max-width:760px;
        }
        .kicker{
            display:inline-block;
            margin-bottom:10px;
            color:var(--brand-2);
            background:var(--brand-soft);
            padding:8px 12px;
            border-radius:999px;
            font-weight:800;
            font-size:.86rem;
        }
        .section-head h2{
            color:var(--brand-2);
            margin:0 0 8px;
            font-size:clamp(1.75rem,1.2rem + 1.3vw,2.8rem);
            line-height:1.08;
            letter-spacing:-.04em;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
        }

        .section-card{
            background:#fffdf8;
            border:1px solid var(--line);
            border-radius:28px;
            padding:28px;
            box-shadow:var(--shadow);
        }

        #about-product{
            padding:24px 0 18px;
        }
        .intro-single{
            display:grid;
            grid-template-columns:minmax(0,1fr);
        }
        .intro-card{
            display:block;
        }
        .intro-title{
            margin:0;
            font-size:1.05rem;
            line-height:1.75;
            color:#2f2417;
            font-weight:600;
        }

        /* =========================================================
           LIST OF CONTENTS
        ========================================================== */
        #contents{padding-top:18px}
        .toc-tabs{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .toc-tab{
            border:none;
            background:#fffdf8;
            border:1px solid var(--line);
            color:#5c4738;
            padding:12px 16px;
            border-radius:999px;
            font-weight:800;
            cursor:pointer;
            box-shadow:var(--shadow-2);
            transition:.18s ease;
        }
        .toc-tab:hover{transform:translateY(-1px)}
        .toc-tab.active{
            background:linear-gradient(180deg,#fff5e6,#fff0dc);
            color:var(--brand-2);
            border-color:var(--line);
        }
        .toc-tab:focus-visible{
            outline:2px solid rgba(192,127,34,.28);
            outline-offset:2px;
        }
        .toc-panels{
            display:block;
        }
        .toc-panel{
            background:linear-gradient(180deg,#fffdf8 0%, #fff7ea 100%);
            border:1px solid var(--line);
            border-radius:24px;
            padding:22px 20px;
            box-shadow:var(--shadow-2);
        }
        .toc-panel[hidden]{display:none}
        .toc-panel-title{
            margin:0 0 6px;
            font-size:1.06rem;
            font-weight:800;
            color:#945f1a;
        }
        .toc-panel-sub{
            margin:0 0 12px;
            color:var(--muted);
            font-size:.92rem;
            line-height:1.45;
        }
        .toc-group + .toc-group{
            margin-top:20px;
            padding-top:18px;
            border-top:1px dashed #eadcc7;
        }
        .toc-h{
            margin:0 0 6px;
            font-size:1.02rem;
            line-height:1.25;
            color:#945f1a;
        }
        .toc-sh{
            margin:0 0 12px;
            color:var(--muted);
            font-size:.92rem;
            line-height:1.55;
        }
        .toc-detail-list{
            margin:0;
            padding-left:18px;
            columns:2;
            column-gap:28px;
        }
        .toc-detail-list li{
            margin:0 0 10px;
            color:#5c4738;
            line-height:1.62;
            break-inside:avoid;
            -webkit-column-break-inside:avoid;
            page-break-inside:avoid;
        }

        .showcase{
            display:grid;
            grid-template-columns:minmax(0,1fr) 320px;
            gap:18px;
        }
        .gallery-card{
            background:#fffdf8;
            border:1px solid var(--line);
            border-radius:28px;
            padding:18px;
            box-shadow:var(--shadow);
        }
        .gallery-stage{
            position:relative;
            aspect-ratio:16/9.2;
            overflow:hidden;
            border-radius:20px;
            background:linear-gradient(180deg,#fffdf8,#fff7ea);
            border:1px solid var(--line);
        }
        .gallery-slide{
            position:absolute;
            inset:0;
            opacity:0;
            visibility:hidden;
            transition:opacity .3s ease;
        }
        .gallery-slide.active{
            opacity:1;
            visibility:visible;
        }
        .gallery-slide img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center top;
        }
        .gallery-bar{
            margin-top:14px;
            display:flex;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
            justify-content:space-between;
        }
        .gallery-copy strong{
            color:var(--brand-2);
            display:block;
            font-size:1rem;
            line-height:1.2;
            margin-bottom:4px;
        }
        .gallery-copy span{
            display:block;
            color:var(--muted);
            font-size:.92rem;
        }
        .gallery-controls{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .gbtn{
            width:42px;
            height:42px;
            border:none;
            border-radius:14px;
            background:#fff5e6;
            border:1px solid var(--line);
            color:var(--brand-2);
            font-weight:900;
            cursor:pointer;
        }
        .g-dots{
            display:flex;
            gap:8px;
        }
        .g-dots button{
            width:10px;
            height:10px;
            border:none;
            border-radius:999px;
            background:#dcc8aa;
            cursor:pointer;
            padding:0;
        }
        .g-dots button.active{
            background:var(--brand);
        }

        .showcase-side{
            display:grid;
            gap:14px;
        }
        .side-card{
            background:#fffdf8;
            border:1px solid var(--line);
            border-radius:24px;
            padding:18px;
            box-shadow:var(--shadow);
        }
        .side-card h3{
            color:var(--brand-2);
            margin:0 0 8px;
            font-size:1.04rem;
            line-height:1.2;
        }
        .side-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }

        .faq-wrap{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:14px;
        }
        .faq{
            background:#fffdf8;
            border:1px solid var(--line);
            border-radius:22px;
            box-shadow:var(--shadow-2);
            overflow:hidden;
            align-self:start;
        }
        .faq-q{
            color:var(--text);
            width:100%;
            border:none;
            background:transparent;
            text-align:left;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            justify-content:space-between;
            gap:16px;
            font-weight:800;
            color:#2f2417;
        }
        .faq-q span:last-child{
            flex:0 0 auto;
        }
        .faq-a{
            display:grid;
            grid-template-rows:0fr;
            transition:grid-template-rows .22s ease;
        }
        .faq-a > div{
            overflow:hidden;
            padding:0 20px;
            color:var(--muted);
        }
        .faq.open .faq-a{
            grid-template-rows:1fr;
        }
        .faq.open .faq-a > div{
            padding-bottom:18px;
        }

        .reveal{
            opacity:0;
            transform:translateY(16px);
            transition:opacity .5s ease, transform .5s ease;
        }
        .reveal.show{
            opacity:1;
            transform:none;
        }

        @media (max-width:1100px){
            .page-head-grid,
            .hero-shell,
            .showcase{
                grid-template-columns:1fr;
            }

            .faq-wrap{
                grid-template-columns:1fr 1fr;
            }

            .page-head-visual{
                margin-inline:auto;
            }
        }

        @media (max-width:860px){
            .hero-shell,
            .showcase,
            .faq-wrap{
                grid-template-columns:1fr;
            }

            .page-head-shell,
            .hero-left,
            .hero-right-card,
            .section-card,
            .gallery-card,
            .side-card,
            .toc-panel{
                border-radius:22px;
            }

            .page-head-shell,
            .hero-left,
            .section-card{
                padding:24px;
            }

            .product-shot{
                grid-template-columns:1fr;
            }

            .product-shot img{
                width:140px;
            }

            .page-head-visual{
                min-height:250px;
                max-width:100%;
            }

            .page-head-visual img{
                max-height:250px;
            }

            .page-title{
                white-space:normal;
            }
        }

        @media (max-width:640px){
            .hero-micro,
            .meta-grid{
                grid-template-columns:1fr;
            }

            .page-head-actions,
            .gallery-bar,
            .gallery-controls,
            .toc-tabs{
                flex-direction:column;
                align-items:stretch;
            }

            .btn,
            .toc-tab{
                width:100%;
            }

            .toc-detail-list{
                columns:1;
            }

            .section{
                padding:48px 0;
            }

            .page-short-links{
                flex-direction:column;
                align-items:stretch;
            }

            .page-short-links a{
                width:100%;
            }
        }

        @media (prefers-reduced-motion: reduce){
            html{scroll-behavior:auto}
            *,*::before,*::after{animation:none !important;transition:none !important}
        }