/* roulang page: index */
:root{
      --primary:#4d2726;
      --primary-deep:#291414;
      --accent:#b65d4d;
      --accent-soft:#e8b09e;
      --paper:#f5f0e8;
      --paper-deep:#e9e0d4;
      --cream:#fffdf9;
      --ink:#211a18;
      --text:#4b403c;
      --muted:#7e716a;
      --line:#ded3c8;
      --success:#55694e;
      --radius:18px;
      --radius-sm:11px;
      --shadow:0 16px 38px rgba(65,35,28,.09);
      --shadow-hover:0 22px 44px rgba(65,35,28,.16);
      --container:1240px;
      --ease:220ms ease-out;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--paper);color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      font-size:16px;line-height:1.85;letter-spacing:.01em;
    }
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    ::selection{background:var(--accent-soft);color:var(--primary-deep)}
    .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
    .grain{
      background-color:var(--paper);
      background-image:radial-gradient(rgba(91,56,44,.11) .65px,transparent .8px);
      background-size:8px 8px;
    }
    .skip-link{position:absolute;left:16px;top:-60px;z-index:100;color:#fff;background:var(--primary);padding:9px 14px;border-radius:8px;transition:top var(--ease)}
    .skip-link:focus{top:12px}
    .site-header{
      position:sticky;top:0;z-index:50;background:rgba(245,240,232,.94);
      backdrop-filter:blur(12px);border-bottom:1px solid rgba(222,211,200,.85);
    }
    .header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-size:18px;font-weight:800;color:var(--primary);white-space:nowrap;letter-spacing:-.03em}
    .brand-mark{width:29px;height:29px;border:2px solid var(--accent);border-radius:8px;position:relative;transform:rotate(8deg)}
    .brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--primary);border-radius:999px}
    .brand-mark:before{width:14px;height:2px;left:5px;top:8px}
    .brand-mark:after{width:9px;height:2px;left:5px;top:15px}
    .nav-links{display:flex;align-items:center;gap:8px}
    .nav-link{position:relative;padding:10px 13px;font-size:14px;font-weight:700;color:#655854;border-radius:8px;transition:color var(--ease),background var(--ease)}
    .nav-link:hover{color:var(--primary);background:#eee4d9}
    .nav-link.active{color:var(--primary)}
    .nav-link.active:after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--accent);border-radius:2px}
    .btn{
      min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:10px 17px;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:800;
      transition:transform var(--ease),background var(--ease),border-color var(--ease),box-shadow var(--ease),color var(--ease);
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn-primary{color:#fff;background:var(--primary);box-shadow:0 7px 16px rgba(77,39,38,.17)}
    .btn-primary:hover{background:var(--primary-deep);box-shadow:0 10px 20px rgba(77,39,38,.26)}
    .btn-outline{border-color:#bca99d;color:var(--primary);background:rgba(255,253,249,.55)}
    .btn-outline:hover{border-color:var(--accent);background:#fffaf5}
    .btn-light{color:var(--primary);background:#fffdf9}
    .btn-light:hover{background:#f7e6de}
    .menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--cream);color:var(--primary)}
    .menu-toggle svg{margin:auto}
    :focus-visible{outline:3px solid rgba(182,93,77,.48);outline-offset:3px}
    .mobile-panel{display:none}
    .hero{position:relative;overflow:hidden;padding:74px 0 38px}
    .hero:before{content:"";position:absolute;width:660px;height:660px;right:-180px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(206,129,105,.22),rgba(206,129,105,0) 67%);pointer-events:none}
    .hero-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--primary);font-size:13px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before{content:"";width:28px;height:1px;background:var(--accent)}
    .age-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
    .age-dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
    .hero-bento{display:grid;grid-template-columns:1.25fr .75fr .7fr;grid-template-rows:190px 250px;gap:18px}
    .hero-copy{grid-row:span 2;padding:36px 38px;background:var(--cream);border:1px solid #e9ddd1;border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
    .hero-copy:after{content:"88";position:absolute;right:-13px;bottom:-61px;font-size:174px;font-weight:900;line-height:1;color:#f1e5da;letter-spacing:-.13em;pointer-events:none}
    h1,h2,h3,p{margin-top:0}
    h1{max-width:670px;position:relative;z-index:1;margin-bottom:19px;color:var(--ink);font-size:clamp(40px,4.1vw,57px);line-height:1.19;letter-spacing:-.055em}
    .hero-copy p{position:relative;z-index:1;max-width:620px;margin-bottom:25px;font-size:16px;line-height:1.95;color:#655955}
    .hero-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:11px}
    .member-strip{position:relative;z-index:1;margin-top:27px;padding-top:19px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
    .avatars{display:flex}
    .avatar{width:26px;height:26px;margin-left:-7px;border:2px solid var(--cream);border-radius:50%;background:#c9826d}
    .avatar:first-child{margin-left:0;background:#795148}.avatar:nth-child(2){background:#c9a078}.avatar:nth-child(3){background:#9b6255}
    .hero-feature,.hero-mini{position:relative;border-radius:var(--radius);overflow:hidden}
    .hero-feature{padding:23px;background:var(--primary);color:#fff}
    .hero-feature:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 30%,rgba(235,169,145,.18));}
    .feature-number{position:relative;color:#eac5b5;font-size:12px;font-weight:800;letter-spacing:.12em}
    .feature-title{position:relative;margin:38px 0 10px;font-size:21px;line-height:1.35;font-weight:800}
    .feature-line{position:relative;width:100%;height:4px;border-radius:9px;background:rgba(255,255,255,.22)}
    .feature-line span{display:block;width:72%;height:100%;border-radius:inherit;background:#eab19b}
    .hero-mini{padding:21px;background:#dfb09b;color:var(--primary)}
    .hero-mini .tiny-title{margin:20px 0 3px;font-size:20px;font-weight:900;line-height:1.32}
    .mini-stamp{width:44px;height:44px;border:1px solid rgba(77,39,38,.45);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900}
    .hero-track{grid-column:2 / 4;display:flex;align-items:center;gap:17px;padding:21px 24px;background:#eae0d5;border:1px solid #dfd2c5;border-radius:var(--radius)}
    .track-item{flex:1;min-width:0}
    .track-item b{display:block;color:var(--primary);font-size:14px}
    .track-item span{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .track-divider{width:1px;height:32px;background:#cdbbad}
    section{padding:90px 0}
    .section-kicker{display:flex;align-items:center;gap:10px;margin-bottom:11px;color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.12em}
    .section-kicker span{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid #d8b7a8;border-radius:50%;font-size:10px}
    h2{margin-bottom:12px;color:var(--ink);font-size:clamp(29px,3vw,40px);line-height:1.25;letter-spacing:-.04em}
    .section-intro{max-width:690px;color:#6b5e59;font-size:15px;line-height:1.9}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}
    .section-link{display:inline-flex;align-items:center;gap:7px;flex:none;color:var(--primary);font-size:14px;font-weight:800;border-bottom:1px solid #cda99a;padding-bottom:3px}
    .section-link:hover{color:var(--accent);border-color:var(--accent)}
    .ladder-section{background:#eee6dc;border-top:1px solid #e3d8cc;border-bottom:1px solid #e3d8cc}
    .ladder-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:stretch}
    .ladder-note{padding:30px;border-radius:var(--radius);background:var(--primary);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
    .ladder-note h3{font-size:25px;line-height:1.38;margin-bottom:15px}
    .ladder-note p{font-size:14px;color:#ead8cf}
    .note-rule{padding-top:17px;border-top:1px solid rgba(255,255,255,.2);font-size:13px;color:#edd5ca}
    .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .tier{min-height:260px;padding:23px 20px;border:1px solid var(--line);border-radius:15px;background:var(--cream);display:flex;flex-direction:column;transition:transform var(--ease),box-shadow var(--ease)}
    .tier:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .tier.hot{border-color:#bc6c59;background:#fff8f3}
    .tier-no{font-size:12px;font-weight:900;color:var(--accent);letter-spacing:.1em}
    .tier h3{margin:26px 0 8px;color:var(--primary);font-size:20px}
    .tier p{font-size:13px;color:var(--muted);line-height:1.75}
    .tier strong{margin-top:auto;padding-top:16px;color:var(--primary);font-size:14px}
    .category-section{padding-top:78px;padding-bottom:78px}
    .category-rail{display:flex;gap:15px;overflow:auto;padding:4px 3px 15px;scroll-snap-type:x proximity;scrollbar-width:thin}
    .category-card{flex:0 0 250px;min-height:180px;padding:21px;border-radius:16px;border:1px solid var(--line);background:var(--cream);scroll-snap-align:start;position:relative;overflow:hidden;transition:all var(--ease)}
    .category-card:hover{transform:translateY(-4px);border-color:#c98774;box-shadow:var(--shadow)}
    .category-card:after{content:"";width:98px;height:98px;border-radius:50%;position:absolute;right:-28px;bottom:-33px;background:#e9d3c5}
    .category-card:nth-child(2):after{background:#c38370}.category-card:nth-child(3):after{background:#ddad93}.category-card:nth-child(4):after{background:#b99b87}
    .category-card b,.category-card p,.category-card i{position:relative;z-index:1}
    .category-card b{display:block;color:var(--primary);font-size:17px}
    .category-card p{margin:8px 0 19px;color:var(--muted);font-size:13px;line-height:1.75}
    .category-card i{font-style:normal;color:var(--accent);font-size:19px}
    .compare-section{background:var(--primary-deep);color:#fff;position:relative;overflow:hidden}
    .compare-section:before{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:36px 36px}
    .compare-section h2{color:#fff}.compare-section .section-intro{color:#d6c0b7}
    .compare-layout{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
    .compare-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
    .pill{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border:1px solid rgba(255,255,255,.32);border-radius:999px;color:#e8d6ce;font-size:12px}
    .compare-card{background:#fcf7f1;color:var(--text);border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.28)}
    .compare-row{display:grid;grid-template-columns:1.15fr 1fr 1fr;border-bottom:1px solid #e6d8cc}
    .compare-row:last-child{border-bottom:0}
    .compare-row>*{padding:15px 17px;font-size:14px}
    .compare-row strong{color:var(--primary);background:#f2e6db}
    .compare-row .recommend{background:#fdf1eb;color:var(--primary);font-weight:800}
    .compare-head>*{font-weight:900;background:#e9d2c5;color:var(--primary)}
    .compare-head strong{background:#d29a86;color:#fff}
    .assurance{padding:0;background:#c9826d;color:#fff}
    .assurance-grid{display:grid;grid-template-columns:repeat(4,1fr)}
    .assure{padding:27px 25px;display:flex;align-items:center;gap:13px;border-right:1px solid rgba(255,255,255,.25)}
    .assure:last-child{border-right:0}
    .assure-icon{width:36px;height:36px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.55);border-radius:10px;font-size:16px}
    .assure b{display:block;font-size:14px}.assure span{display:block;color:#f8e5dc;font-size:12px;line-height:1.55}
    .news-layout{display:grid;grid-template-columns:1.28fr .72fr;gap:28px}
    .news-list{border-top:1px solid var(--line)}
    .news-item{display:grid;grid-template-columns:78px 1fr auto;gap:18px;align-items:center;padding:20px 2px;border-bottom:1px solid var(--line);transition:padding var(--ease),background var(--ease)}
    .news-item:hover{padding-left:12px;background:#f9f4ed}
    .news-index{color:var(--accent);font-size:13px;font-weight:900}
    .news-item h3{margin:0 0 3px;color:var(--primary);font-size:17px;line-height:1.4}
    .news-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
    .news-arrow{font-size:20px;color:var(--accent)}
    .ranking{padding:26px;background:#e9ddd0;border-radius:var(--radius);border:1px solid #ddcdbf}
    .ranking h3{color:var(--primary);font-size:20px;margin-bottom:17px}
    .rank-line{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px dashed #cbb9aa;font-size:13px}
    .rank-line:last-child{border-bottom:0}
    .rank-line b{color:var(--accent);font-size:12px}.rank-line span{font-weight:700;color:#51433e}.rank-line small{color:var(--muted)}
    .faq-section{padding-top:78px}
    .faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:68px;align-items:start}
    .faq-graphic{width:126px;height:126px;margin-top:27px;position:relative;border:1px solid #d5b7a7;border-radius:50%;background:#ead4c7}
    .faq-graphic:before,.faq-graphic:after{content:"";position:absolute;border:1px solid var(--accent);border-radius:50%}
    .faq-graphic:before{width:82px;height:82px;left:21px;top:21px}.faq-graphic:after{width:38px;height:38px;left:43px;top:43px;background:var(--primary)}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;padding:19px 3px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:0;background:transparent;text-align:left;color:var(--primary);font-weight:800;font-size:16px}
    .faq-question .sign{width:27px;height:27px;display:grid;place-items:center;flex:none;border:1px solid #c6a89b;border-radius:50%;font-size:19px;font-weight:400;transition:transform var(--ease),background var(--ease)}
    .faq-item.open .faq-question .sign{background:var(--primary);border-color:var(--primary);color:#fff;transform:rotate(45deg)}
    .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms ease}
    .faq-answer>div{overflow:hidden}
    .faq-answer p{margin:0;padding:0 4px 0;color:#675a55;font-size:14px;line-height:1.9}
    .faq-item.open .faq-answer{grid-template-rows:1fr}.faq-item.open .faq-answer p{padding-bottom:20px}
    .entry-section{padding:88px 0;background:#ead6c8}
    .entry-wrap{display:grid;grid-template-columns:1fr .9fr;gap:34px;align-items:center;padding:38px;background:var(--cream);border:1px solid #dfc8ba;border-radius:20px;box-shadow:var(--shadow)}
    .entry-copy h2{margin-bottom:13px}.entry-copy p{max-width:570px;color:#685a55;font-size:15px}
    .countdown{display:flex;gap:9px;margin:23px 0}
    .time-box{min-width:55px;padding:8px 6px;border-radius:9px;text-align:center;background:var(--primary);color:#fff}
    .time-box b{display:block;font-size:21px;line-height:1.15}.time-box span{display:block;font-size:10px;color:#e8c9bd}
    .entry-form{padding:24px;border-radius:15px;background:var(--primary);color:#fff}
    .entry-form h3{font-size:20px;margin-bottom:15px}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
    .field{margin-bottom:12px}.field label{display:block;margin-bottom:5px;color:#edd7cd;font-size:12px;font-weight:700}
    .field input,.field select,.field textarea{width:100%;border:1px solid rgba(255,255,255,.34);border-radius:9px;background:rgba(255,255,255,.1);color:#fff;padding:10px 11px;outline:none;transition:border-color var(--ease),background var(--ease)}
    .field input::placeholder,.field textarea::placeholder{color:#d9bbb0}.field select{color:#fff}.field select option{color:#211a18}
    .field input:focus,.field select:focus,.field textarea:focus{border-color:#fff;background:rgba(255,255,255,.16)}
    .form-status{min-height:20px;margin:8px 0 0;font-size:12px;color:#f0d4c7}
    .site-footer{background:#211716;color:#ddd0c9;border-top:3px solid var(--accent)}
    .footer-grid{display:grid;grid-template-columns:1.25fr .8fr 1fr;gap:45px;padding:52px 0 35px}
    .footer-brand{color:#fff}.footer-brand .brand{color:#fff}.footer-brand p{max-width:380px;margin:14px 0 0;color:#bcaea8;font-size:13px;line-height:1.8}
    .footer-title{margin:0 0 12px;color:#f1dfd7;font-size:13px;font-weight:900;letter-spacing:.08em}
    .footer-nav a,.footer-info a{display:block;padding:6px 0;color:#bcaea8;font-size:13px;transition:color var(--ease)}
    .footer-nav a:hover,.footer-info a:hover{color:#f0ab94}
    .footer-bottom{padding:16px 0;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:20px;color:#998c86;font-size:12px}
    .footer-bottom a:hover{color:#eab19b}
    @media (max-width:1024px){
      .hero-bento{grid-template-columns:1.1fr .8fr;grid-template-rows:auto 190px 150px}.hero-copy{grid-row:span 2}.hero-track{grid-column:1 / 3}.hero-mini{display:none}
      .ladder-grid,.compare-layout,.faq-layout{grid-template-columns:1fr;gap:30px}.tiers{grid-template-columns:repeat(3,1fr)}
      .news-layout{grid-template-columns:1fr}.faq-graphic{display:none}
      .entry-wrap{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.2fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(calc(100% - 36px),var(--container))}.header-inner{height:68px}.nav-links,.header-cta{display:none}.menu-toggle{display:block}
      .mobile-panel{position:fixed;z-index:70;right:0;top:0;width:min(330px,88vw);height:100dvh;padding:22px;background:var(--cream);box-shadow:-15px 0 40px rgba(33,23,22,.24);transform:translateX(105%);transition:transform var(--ease)}
      .mobile-panel.open{display:block;transform:translateX(0)}.mobile-panel:before{content:"";position:fixed;z-index:-1;inset:0 0 0 -100vw;width:100vw;background:rgba(33,23,22,.55);opacity:0;transition:opacity var(--ease);pointer-events:none}.mobile-panel.open:before{opacity:1;pointer-events:auto}
      .mobile-close{margin-left:auto;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--primary);font-size:20px}.mobile-links{margin-top:30px;border-top:1px solid var(--line)}.mobile-links a{display:block;padding:16px 3px;border-bottom:1px solid var(--line);font-weight:800;color:var(--primary)}
      .mobile-panel .btn{width:100%;margin-top:22px}.hero{padding-top:47px}.hero-topline{margin-bottom:17px}.age-note{display:none}.hero-bento{display:flex;flex-direction:column}.hero-copy{padding:30px 25px}.hero-feature{min-height:190px}.hero-track{order:5;overflow:auto;white-space:nowrap}.track-item{min-width:130px}
      section{padding:62px 0}.section-head{display:block;margin-bottom:28px}.section-link{margin-top:15px}.tiers{grid-template-columns:1fr}.tier{min-height:170px}.ladder-note{min-height:230px}.assurance-grid{grid-template-columns:1fr 1fr}.assure:nth-child(2){border-right:0}.assure{padding:20px 15px;border-bottom:1px solid rgba(255,255,255,.25)}.assure:nth-child(3),.assure:nth-child(4){border-bottom:0}
      .compare-row{grid-template-columns:1fr 1fr 1fr}.compare-row>*{padding:12px 9px;font-size:12px}.news-item{grid-template-columns:45px 1fr auto;gap:9px}.news-item h3{font-size:15px}.news-item p{font-size:12px}.entry-section{padding:55px 0}.entry-wrap{padding:25px 19px}.footer-grid{grid-template-columns:1fr;gap:24px;padding:40px 0 27px}.footer-bottom{display:block}.footer-bottom a{display:inline-block;margin-top:6px}
    }
    @media (max-width:520px){
      .container{width:min(calc(100% - 32px),var(--container))}h1{font-size:34px}.hero-copy p{font-size:15px}.hero-actions .btn{width:100%}.member-strip{align-items:flex-start}.hero-feature{padding:21px}.hero-track{padding:17px}.section-intro{font-size:14px}.category-card{flex-basis:220px}.form-row{grid-template-columns:1fr}.faq-question{font-size:15px;padding:17px 2px}.compare-card{overflow:auto}.compare-row{min-width:440px}.assure{padding:17px 12px}.assure-icon{width:32px;height:32px}.assure b{font-size:13px}
    }
    @media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* roulang page: category1 */
:root{
 --primary:#4d2726;
 --primary-deep:#291414;
 --accent:#b65d4d;
 --accent-soft:#e8b09e;
 --paper:#f5f0e8;
 --paper-deep:#e9e0d4;
 --cream:#fffdf9;
 --ink:#211a18;
 --text:#4b403c;
 --muted:#7e716a;
 --line:#ded3c8;
 --success:#55694e;
 --radius:18px;
 --radius-sm:11px;
 --shadow:0 16px 38px rgba(65,35,28,.09);
 --shadow-hover:0 22px 44px rgba(65,35,28,.16);
 --container:1240px;
 --ease:220ms ease-out;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:var(--paper);color:var(--text);
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
 font-size:16px;line-height:1.85;letter-spacing:.01em;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.site-header{
 position:sticky;top:0;z-index:50;background:rgba(245,240,232,.94);
 backdrop-filter:blur(12px);border-bottom:1px solid rgba(222,211,200,.85);
}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:18px;font-weight:800;color:var(--primary);white-space:nowrap;letter-spacing:-.03em}
.brand-mark{width:29px;height:29px;border:2px solid var(--accent);border-radius:8px;position:relative;transform:rotate(8deg)}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--primary);border-radius:999px}
.brand-mark:before{width:14px;height:2px;left:5px;top:8px}
.brand-mark:after{width:9px;height:2px;left:5px;top:15px}
.nav-wrap{display:flex;align-items:center;gap:18px}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-link{position:relative;padding:10px 13px;font-size:14px;font-weight:700;color:#655854;border-radius:8px;transition:color var(--ease),background var(--ease)}
.nav-link:hover{color:var(--primary);background:#eee4d9}
.nav-link.active{color:var(--primary)}
.nav-link.active:after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--accent);border-radius:2px}
.btn{
 min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
 padding:10px 17px;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:800;
 transition:transform var(--ease),background var(--ease),border-color var(--ease),box-shadow var(--ease),color var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{color:#fff;background:var(--primary);box-shadow:0 7px 16px rgba(77,39,38,.17)}
.btn-primary:hover{background:var(--primary-deep);box-shadow:0 10px 20px rgba(77,39,38,.26)}
.btn-outline{border-color:#bca99d;color:var(--primary);background:rgba(255,253,249,.6)}
.btn-outline:hover{border-color:var(--accent);background:#fffaf5}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--cream);color:var(--primary)}
.mobile-panel{display:none}
.breadcrumb-bar{border-bottom:1px solid var(--line);background:#eee6dc}
.breadcrumb{min-height:56px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:auto}
.breadcrumb a{font-weight:750;color:var(--primary)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:#af9d91}
.back-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:800}
.back-link:hover{color:var(--accent)}
.category-hero{position:relative;overflow:hidden;padding:54px 0 38px}
.category-hero:before{content:"";position:absolute;right:-180px;top:-180px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(182,93,77,.18),transparent 67%);pointer-events:none}
.category-head{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:stretch}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.1em}
.eyebrow:before{content:"";width:28px;height:1px;background:var(--accent)}
h1,h2,h3,p{margin-top:0}
h1{max-width:730px;margin:16px 0 16px;color:var(--ink);font-size:clamp(34px,4vw,52px);line-height:1.2;letter-spacing:-.055em}
.hero-copy p{max-width:680px;margin-bottom:23px;color:#675954;font-size:16px;line-height:1.95}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.meta-pill,.tag{display:inline-flex;align-items:center;gap:6px;border:1px solid #d8c8bc;border-radius:999px;padding:6px 11px;background:rgba(255,253,249,.72);color:#695953;font-size:12px;font-weight:750}
.dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
.cover-board{position:relative;min-height:310px;overflow:hidden;padding:27px;border:1px solid #6d3f3a;border-radius:var(--radius);background:var(--primary);box-shadow:var(--shadow)}
.cover-board:before{content:"";position:absolute;inset:15px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:repeating-linear-gradient(90deg,transparent 0,transparent 23px,rgba(255,255,255,.035) 24px)}
.cover-number{position:absolute;right:21px;top:12px;color:#e8b09e;font-size:70px;font-weight:900;line-height:1;letter-spacing:-.12em}
.cover-card{position:relative;z-index:1;width:66%;height:206px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.24);border-radius:14px;background:linear-gradient(145deg,#6b3935,#34201f);color:#fff;box-shadow:16px 17px 0 rgba(232,176,158,.24)}
.cover-card small{color:#eac5b5;font-weight:800;letter-spacing:.12em}
.cover-card strong{font-size:25px;line-height:1.32}
.cover-line{height:4px;border-radius:99px;background:rgba(255,255,255,.22)}
.cover-line span{display:block;width:76%;height:100%;border-radius:inherit;background:var(--accent-soft)}
.cover-note{position:absolute;right:21px;bottom:24px;z-index:2;width:155px;padding:13px;border-radius:11px;background:#e5b29f;color:var(--primary);font-size:12px;font-weight:800;line-height:1.55}
.filter-section{padding:18px 0 28px;border-top:1px solid #e4d8cb;border-bottom:1px solid #ded3c8;background:rgba(255,253,249,.46)}
.filter-inner{display:flex;align-items:center;gap:16px}
.filter-label{flex:none;color:var(--primary);font-size:13px;font-weight:900}
.filter-track{display:flex;gap:9px;overflow:auto;padding:4px 1px;scrollbar-width:none}
.filter-track::-webkit-scrollbar{display:none}
.filter-chip{flex:none;border:1px solid #d5c4b7;border-radius:999px;padding:8px 14px;background:var(--cream);color:#6c5e58;font-size:13px;font-weight:750;transition:var(--ease)}
.filter-chip:hover{border-color:var(--accent);color:var(--primary)}
.filter-chip.active{border-color:var(--primary);background:var(--primary);color:#fff}
.sort-select{margin-left:auto;min-width:142px;appearance:none;border:1px solid #cdb9ad;border-radius:10px;padding:10px 34px 10px 12px;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%234d2726' stroke-width='1.7'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--primary);font-size:13px;font-weight:800}
section{padding:82px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:31px}
.section-kicker{display:flex;align-items:center;gap:10px;margin-bottom:9px;color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.11em}
.section-kicker span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #d9b7a8;border-radius:50%;font-size:10px}
h2{margin-bottom:0;color:var(--ink);font-size:clamp(27px,3vw,36px);line-height:1.28;letter-spacing:-.045em}
.section-intro{max-width:590px;margin:0;color:#6a5d57;font-size:15px;line-height:1.9}
.result-count{flex:none;color:var(--muted);font-size:13px}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-result{grid-column:span 2;display:grid;grid-template-columns:.93fr 1.07fr;min-height:355px;overflow:hidden;border:1px solid #dfd3c8;border-radius:var(--radius);background:var(--cream);box-shadow:var(--shadow)}
.archive-cover{position:relative;overflow:hidden;min-height:260px;background:#56302d}
.archive-cover:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 27% 28%,rgba(232,176,158,.68) 0 3%,transparent 3.4%),radial-gradient(circle at 68% 67%,rgba(232,176,158,.24) 0 12%,transparent 12.5%),repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 1px,transparent 1px 12px),linear-gradient(145deg,#7b4941,#341d1c)}
.archive-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(31,18,17,.65))}
.card-no{position:absolute;top:15px;left:15px;z-index:1;border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:4px 9px;color:#fff;font-size:11px;font-weight:900;letter-spacing:.09em}
.card-mark{position:absolute;right:16px;bottom:11px;z-index:1;color:rgba(255,255,255,.76);font-size:58px;font-weight:900;line-height:1;letter-spacing:-.14em}
.feature-copy{display:flex;flex-direction:column;align-items:flex-start;padding:31px}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;background:#f1dfd5;color:var(--primary);font-size:11px;font-weight:900;letter-spacing:.05em}
.feature-copy h3,.archive-card h3{margin:17px 0 10px;color:var(--ink);font-size:23px;line-height:1.42;letter-spacing:-.035em}
.feature-copy p{margin-bottom:21px;color:#6a5b55;font-size:14px;line-height:1.85}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:auto;padding-top:15px;border-top:1px solid #e6dcd2;color:var(--muted);font-size:12px}
.arrow{font-size:20px;color:var(--primary);transition:transform var(--ease)}
.feature-result:hover .arrow,.archive-card:hover .arrow{transform:translateX(4px)}
.archive-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #dfd3c8;border-radius:var(--radius);background:var(--cream);box-shadow:0 9px 24px rgba(65,35,28,.06);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.archive-card:hover{transform:translateY(-5px);border-color:#c99b8b;box-shadow:var(--shadow-hover)}
.archive-card:hover .archive-cover:before{transform:scale(1.035)}
.archive-card .archive-cover:before{transition:transform 500ms ease-out}
.archive-card:nth-child(3) .archive-cover{background:#624035}
.archive-card:nth-child(3) .archive-cover:before{background:radial-gradient(circle at 73% 25%,rgba(239,190,155,.55) 0 6%,transparent 6.4%),repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 14px),linear-gradient(145deg,#8a5a44,#34221d)}
.archive-card:nth-child(4) .archive-cover:before{background:radial-gradient(circle at 28% 70%,rgba(232,176,158,.43) 0 10%,transparent 10.5%),linear-gradient(35deg,transparent 45%,rgba(255,255,255,.13) 46% 48%,transparent 49%),linear-gradient(145deg,#69413d,#28191a)}
.archive-card:nth-child(5) .archive-cover:before{background:radial-gradient(circle at 62% 32%,rgba(232,176,158,.55) 0 5%,transparent 5.5%),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 15px),linear-gradient(145deg,#704841,#301d1c)}
.archive-card:nth-child(6) .archive-cover:before{background:radial-gradient(circle at 35% 35%,rgba(232,176,158,.45) 0 9%,transparent 9.5%),linear-gradient(155deg,transparent 30%,rgba(255,255,255,.11) 30.5% 31.5%,transparent 32%),linear-gradient(145deg,#805347,#35201f)}
.archive-card .archive-cover{aspect-ratio:4/5;min-height:0}
.archive-body{display:flex;flex:1;flex-direction:column;padding:19px}
.archive-card h3{margin:12px 0 9px;font-size:19px}
.archive-card p{margin:0 0 14px;color:#756762;font-size:13px;line-height:1.75}
.pagination-wrap{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:39px}
.page-btn{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid #cfbeb2;border-radius:10px;background:var(--cream);color:var(--primary);font-size:13px;font-weight:850;transition:var(--ease)}
.page-btn:hover{border-color:var(--accent);background:#fff5ef}
.page-btn.active{border-color:var(--primary);background:var(--primary);color:#fff}
.info-section{padding:0 0 82px}
.info-box{display:grid;grid-template-columns:auto 1fr;gap:19px;padding:26px 29px;border:1px solid #d9c7ba;border-left:4px solid var(--accent);border-radius:var(--radius-sm);background:#f9f5ee}
.info-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ead0c3;color:var(--primary);font-weight:900}
.info-box h2{margin:0 0 7px;font-size:21px}
.info-box p{max-width:900px;margin:0;color:#675955;font-size:14px;line-height:1.9}
.related-section{padding:72px 0;background:var(--paper-deep)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.related-card{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 20px;border:1px solid #d6c6ba;border-radius:var(--radius-sm);background:rgba(255,253,249,.7);color:var(--primary);font-size:15px;font-weight:850;transition:var(--ease)}
.related-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 24px rgba(65,35,28,.08)}
.faq-section{padding:82px 0}
.faq-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:62px;align-items:start}
.faq-aside{position:sticky;top:102px}
.faq-aside p{margin:14px 0 0;color:#6b5d57;font-size:15px}
.faq-stamp{display:grid;place-items:center;width:76px;height:76px;margin-top:25px;border:1px dashed #bc8978;border-radius:50%;color:var(--accent);font-size:12px;font-weight:900;line-height:1.3;text-align:center;transform:rotate(-10deg)}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 2px;border:0;background:transparent;color:var(--ink);font-size:16px;font-weight:850;text-align:left}
.faq-question:hover{color:var(--primary)}
.faq-icon{display:grid;place-items:center;flex:none;width:27px;height:27px;border:1px solid #c5aaa0;border-radius:50%;color:var(--primary);font-size:20px;line-height:1;transition:var(--ease)}
.faq-item.open .faq-icon{border-color:var(--primary);background:var(--primary);color:#fff;transform:rotate(45deg)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms ease}
.faq-answer>div{overflow:hidden}
.faq-answer p{margin:0;padding:0 42px 20px 2px;color:#6b5e58;font-size:14px;line-height:1.9}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.site-footer{border-top:4px solid var(--accent);background:#261917;color:#d8ccc4}
.footer-grid{display:grid;grid-template-columns:1.45fr .75fr .85fr;gap:45px;padding:54px 0 38px}
.site-footer .brand{color:#fff}
.site-footer .brand-mark{border-color:var(--accent-soft)}
.site-footer .brand-mark:before,.site-footer .brand-mark:after{background:#fff}
.footer-brand p{max-width:420px;margin:15px 0 0;color:#b9aaa1;font-size:13px;line-height:1.85}
.footer-title{margin:0 0 12px;color:#f6e9df;font-size:14px;font-weight:850}
.footer-nav,.footer-info{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.footer-nav a,.footer-info a{padding:4px 0;color:#b9aaa1;font-size:13px;transition:color var(--ease)}
.footer-nav a:hover,.footer-info a:hover{color:#f0b29a}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:19px 0;border-top:1px solid rgba(255,255,255,.12);color:#9f9087;font-size:12px}
.footer-bottom a:hover{color:#f0b29a}
:focus-visible{outline:3px solid rgba(182,93,77,.55);outline-offset:3px}
@media(max-width:1024px){
 .category-head{grid-template-columns:1fr .72fr;gap:25px}
 .result-grid{grid-template-columns:repeat(2,1fr)}
 .feature-result{grid-column:span 2}
 .faq-layout{gap:38px}
}
@media(max-width:768px){
 .container{width:min(calc(100% - 36px),var(--container))}
 .header-inner{height:68px}
 .nav-wrap>.btn{display:none}
 .nav-links{display:none}
 .menu-toggle{display:grid;place-items:center}
 .mobile-panel{position:fixed;inset:0;z-index:80;background:rgba(34,20,18,.48);opacity:0;visibility:hidden;transition:var(--ease)}
 .mobile-panel.show{opacity:1;visibility:visible}
 .mobile-menu{position:absolute;right:0;top:0;width:min(330px,88vw);height:100%;padding:22px;background:var(--cream);transform:translateX(100%);transition:transform var(--ease);box-shadow:-14px 0 40px rgba(25,14,12,.18)}
 .mobile-panel.show .mobile-menu{transform:translateX(0)}
 .mobile-menu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
 .mobile-close{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--primary);font-size:22px}
 .mobile-menu a{display:block;padding:13px 10px;border-bottom:1px solid var(--line);color:var(--primary);font-weight:800}
 .mobile-menu .btn{width:100%;margin-top:22px}
 .category-hero{padding:38px 0 30px}
 .category-head{grid-template-columns:1fr}
 .cover-board{min-height:275px}
 .filter-inner{align-items:flex-start;flex-wrap:wrap}
 .sort-select{margin-left:0}
 .result-grid{gap:18px}
 .faq-layout{grid-template-columns:1fr}
 .faq-aside{position:static}
 .faq-stamp{display:none}
 .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
 .footer-brand{grid-column:span 2}
}
@media(max-width:640px){
 body{font-size:15px}
 .container{width:min(calc(100% - 32px),var(--container))}
 .brand{font-size:16px}
 .breadcrumb{font-size:12px}
 .back-link{font-size:0}
 .back-link:before{content:"←";font-size:20px}
 h1{font-size:32px}
 .hero-copy p{font-size:15px}
 .cover-board{padding:20px;min-height:245px}
 .cover-card{width:72%;height:175px;padding:16px}
 .cover-card strong{font-size:21px}
 .cover-note{right:14px;bottom:17px;width:130px;padding:9px;font-size:11px}
 .cover-number{font-size:55px}
 .section-head{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:25px}
 section{padding:58px 0}
 .result-grid{grid-template-columns:1fr}
 .feature-result{grid-column:span 1;grid-template-columns:1fr}
 .feature-result .archive-cover{min-height:210px}
 .feature-copy{padding:23px}
 .related-section{padding:54px 0}
 .related-grid{grid-template-columns:1fr}
 .info-section{padding-bottom:58px}
 .info-box{grid-template-columns:1fr;padding:22px}
 .faq-section{padding:58px 0}
 .footer-grid{grid-template-columns:1fr;padding:43px 0 28px}
 .footer-brand{grid-column:auto}
 .footer-bottom{flex-direction:column;gap:5px}
}
@media(max-width:375px){
 .brand{font-size:14px;gap:8px}
 .brand-mark{width:25px;height:25px}
 .cover-note{display:none}
 .btn{padding:10px 14px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}