.features-page { background:#f4f7fb; }
.features-page main { overflow:hidden; }
.features-page .site-breadcrumb { margin-bottom:46px; color:#9eacbd; }
.features-page .site-breadcrumb a { color:#78e7ce; }
.features-page .detail-section { scroll-margin-top:110px; }

.feature-detail-hero { position:relative; overflow:hidden; padding:42px 0 95px; color:#fff; background:radial-gradient(circle at 82% 20%,rgba(76,230,196,.2),transparent 26%),linear-gradient(125deg,#071b38,#0a3854 68%,#006b5b 140%); }
.feature-detail-hero::before { position:absolute; inset:0; opacity:.08; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:27px 27px; content:""; }
.feature-detail-hero::after { position:absolute; right:-120px; bottom:-270px; width:580px; height:580px; border:1px solid rgba(103,234,207,.24); border-radius:50%; box-shadow:0 0 0 80px rgba(103,234,207,.055),0 0 0 160px rgba(103,234,207,.035); content:""; }
.feature-detail-hero .shell { position:relative; z-index:1; }
.feature-detail-hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.7fr); gap:80px; align-items:end; }
.feature-detail-hero h1 { margin:0; font-size:clamp(52px,7vw,83px); line-height:1.2; letter-spacing:-.06em; }
.feature-detail-hero-grid > div:first-child > p:not(.eyebrow) { max-width:710px; margin:27px 0 0; color:#d1deea; font-size:16px; font-weight:600; line-height:1.9; }
.hero-detail-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:31px; }
.hero-capability-list { display:grid; grid-template-columns:44px minmax(0,1fr); overflow:hidden; border:1px solid rgba(151,237,218,.28); border-radius:17px; background:rgba(1,20,37,.35); backdrop-filter:blur(7px); }
.hero-capability-list span,.hero-capability-list strong { display:flex; align-items:center; min-height:62px; border-bottom:1px solid rgba(255,255,255,.1); }
.hero-capability-list span { justify-content:center; color:#65e2c8; font:800 10px Georgia,serif; }
.hero-capability-list strong { padding:0 17px; color:#fff; font-size:13px; }
.hero-capability-list > :nth-last-child(-n+2) { border-bottom:0; }

.feature-page-nav { position:sticky; z-index:20; top:79px; border-bottom:1px solid #dce5ed; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); }
.feature-page-nav .shell { display:flex; overflow-x:auto; scrollbar-width:none; }
.feature-page-nav .shell::-webkit-scrollbar { display:none; }
.feature-page-nav a { flex:1 0 auto; display:grid; place-items:center; min-height:55px; padding:10px 14px; border-right:1px solid #e5ebf0; color:#35445c; font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; }
.feature-page-nav a:first-child { border-left:1px solid #e5ebf0; }
.feature-page-nav a:hover { color:#007865; background:#eef9f6; }

.detail-section { padding:100px 0; background:#fff; }
.detail-section:nth-of-type(odd) { background:#f4f7fb; }
.detail-heading { max-width:760px; margin-bottom:42px; }
.detail-heading.centered { margin-inline:auto; text-align:center; }
.detail-heading h2 { margin:0; color:var(--ink); font-size:clamp(34px,4.4vw,52px); line-height:1.4; letter-spacing:-.045em; text-wrap:balance; }
.heading-unit { display:inline-block; white-space:nowrap; }
.sentence-unit { display:inline-block; white-space:nowrap; }
.detail-heading > p:last-child { margin:18px 0 0; color:#5c6980; font-size:15px; font-weight:600; line-height:1.85; }
.creation-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.creation-grid article { position:relative; overflow:hidden; min-height:270px; padding:34px; border:1px solid #d6e1ea; border-radius:18px; background:#fff; box-shadow:0 15px 38px rgba(8,31,61,.07); }
.creation-grid article::after { position:absolute; inset:0 auto 0 0; width:5px; background:#27bda0; content:""; }
.creation-grid article.creation-factory::after { background:#b5813a; }
.creation-grid article > span { color:#007865; font:800 10px Georgia,serif; letter-spacing:.15em; }
.creation-grid article h3 { margin:13px 0 12px; font-size:25px; }
.creation-grid article p { margin:0; color:#56647a; font-size:14px; font-weight:600; line-height:1.82; }
.creation-grid article strong { display:block; margin-top:22px; padding-top:16px; border-top:1px solid #e4eaf0; color:#007865; font-size:12px; }
.detail-wide-link { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:22px; padding:20px 23px; border:1px solid #cbdad6; border-radius:14px; color:var(--ink); background:#f0faf7; text-decoration:none; }
.detail-wide-link span { display:grid; gap:3px; }
.detail-wide-link b { font-size:15px; }
.detail-wide-link small { color:#617083; font-size:11px; font-weight:600; }
.detail-wide-link i { flex:0 0 38px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:#007865; font-size:17px; font-style:normal; }

.detail-section-dark { background:#071d3d!important; }
.engine-detail { display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; min-height:590px; border:1px solid rgba(217,177,103,.4); border-radius:23px; background:radial-gradient(circle at 88% 14%,rgba(63,214,180,.16),transparent 28%),linear-gradient(135deg,#071a32,#0c3150 62%,#07574d); box-shadow:0 27px 65px rgba(0,0,0,.27); }
.engine-detail-copy { align-self:center; padding:58px 25px 58px 58px; color:#fff; }
.engine-detail-copy h2 { margin:0 0 20px; font-size:clamp(34px,3.7vw,44px); line-height:1.4; letter-spacing:-.045em; }
.engine-detail-copy > p:not(.eyebrow) { margin:0 0 22px; color:#cbd9e4; font-size:15px; font-weight:600; line-height:1.9; }
.engine-detail-copy ul { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.engine-detail-copy li { padding:7px 11px; border:1px solid rgba(130,234,211,.35); border-radius:999px; background:rgba(2,14,28,.28); color:#8cebd6; font-size:11px; font-weight:800; }
.engine-detail-copy .detail-note { padding:13px 15px; border-left:3px solid #62e3c8; background:rgba(1,16,32,.28); font-size:12px!important; }
.engine-detail-preview { position:relative; min-height:590px; overflow:hidden; background:#061a31 url("../assets/images/theater_01.webp") center / cover no-repeat; }
.engine-detail-preview::after { position:absolute; inset:0; background:linear-gradient(90deg,#0b2945 0%,transparent 26%),linear-gradient(0deg,rgba(2,12,28,.48),transparent 38%); content:""; }
.engine-detail-preview > span { position:absolute; z-index:3; top:22px; right:24px; padding:6px 10px; border:1px solid rgba(255,255,255,.36); border-radius:5px; color:#fff; background:rgba(3,15,31,.55); font:800 9px Georgia,serif; letter-spacing:.14em; }
.engine-detail-preview > img { position:absolute; z-index:2; left:53%; bottom:-3%; width:min(94%,550px); height:auto; transform:translateX(-50%); filter:drop-shadow(0 20px 16px rgba(0,0,0,.55)); }
.engine-detail-preview > div { position:absolute; z-index:4; right:19px; bottom:20px; display:flex; gap:6px; }
.engine-detail-preview i { padding:6px 8px; border-radius:4px; color:#a8f2e2; background:rgba(4,18,37,.78); font:800 8px Georgia,serif; font-style:normal; letter-spacing:.08em; }

.draw-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.draw-mode-card { position:relative; overflow:hidden; min-width:0; padding:27px 25px 24px; border:1px solid #d4dfe8; border-radius:18px; background:#fff; box-shadow:0 16px 38px rgba(9,31,61,.08); }
.draw-mode-card::after { position:absolute; inset:0 0 auto; height:4px; background:var(--mode-color); content:""; }
.draw-mode-normal { --mode-color:#07816d; }
.draw-mode-double { --mode-color:#bf3f68; }
.draw-mode-count { --mode-color:#c28b16; }
.draw-mode-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.draw-mode-top > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:var(--mode-color); font:800 12px Georgia,serif; }
.draw-mode-top small { color:#718095; font:800 10px Georgia,serif; letter-spacing:.14em; }
.draw-mode-visual { display:flex; align-items:center; justify-content:center; gap:10px; min-height:118px; margin:22px 0 20px; border:1px solid #e1e8ed; border-radius:14px; background:linear-gradient(145deg,#f9fbfc,#edf2f6); }
.draw-mode-visual i { display:grid; place-items:center; width:54px; height:54px; border:2px solid #fff; border-radius:50%; color:#fff; background:var(--mode-color); box-shadow:0 7px 18px rgba(7,49,68,.16); font-size:12px; font-style:normal; font-weight:900; }
.draw-mode-double .draw-mode-visual > div,.draw-mode-count .draw-mode-visual > div { display:flex; gap:5px; }
.draw-mode-double .draw-mode-visual i { width:39px; height:39px; font-size:10px; }
.draw-mode-double .draw-mode-visual > div:last-child i { background:#142846; }
.draw-mode-double .draw-mode-visual > b { color:#8b97a8; font-size:20px; }
.draw-mode-count .draw-mode-visual { flex-direction:column; gap:10px; }
.draw-mode-count .draw-mode-visual > b { color:#48576c; font-size:13px; }
.draw-mode-count .draw-mode-visual i { width:42px; height:42px; }
.draw-mode-card h3 { margin:0 0 10px; color:var(--ink); font-size:22px; }
.draw-mode-card p { min-height:140px; margin:0; color:#56647a; font-size:14px; font-weight:600; line-height:1.78; }
.draw-mode-card > strong { display:block; margin-top:18px; padding-top:15px; border-top:1px solid #e8edf1; color:var(--mode-color); font-size:12px; }

.detail-split { display:grid; grid-template-columns:.82fr 1.18fr; gap:75px; align-items:start; }
.setting-list { display:grid; gap:10px; }
.setting-list article { display:grid; grid-template-columns:52px minmax(0,1fr); gap:15px; align-items:start; padding:21px; border:1px solid #d8e2ea; border-radius:14px; background:#fff; }
.setting-list article > span { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; color:#fff; background:#007865; font:800 10px Georgia,serif; }
.setting-list h3 { margin:1px 0 7px; font-size:18px; }
.setting-list p { margin:0; color:#5d6b7e; font-size:13px; font-weight:600; line-height:1.75; }
.step-template-feature { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:42px; align-items:center; margin-top:3px; padding:27px 30px; border:1px solid #b9dcd3; border-left:5px solid #07816d; border-radius:17px; background:linear-gradient(135deg,#effaf7,#fffaf0); box-shadow:0 14px 34px rgba(9,56,67,.07); }
.step-template-copy > span { color:#007865; font:800 9px Georgia,serif; letter-spacing:.14em; }
.step-template-copy h3 { margin:9px 0 8px; color:var(--ink); font-size:22px; }
.step-template-copy p { margin:0; color:#56647a; font-size:13px; font-weight:600; line-height:1.8; }
.step-template-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; padding:0; list-style:none; }
.step-template-list li { min-width:0; padding:16px 14px; border:1px solid #d9e5e2; border-radius:12px; background:rgba(255,255,255,.88); }
.step-template-list b,.step-template-list small { display:block; }
.step-template-list b { margin-bottom:5px; color:#075f51; font-size:14px; }
.step-template-list small { color:#68768a; font-size:10px; font-weight:700; line-height:1.55; }

.management-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.management-grid article { padding:31px; border:1px solid #d8e2ea; border-radius:18px; background:#fff; box-shadow:0 14px 35px rgba(9,31,61,.06); }
.management-grid article > span { display:inline-flex; min-height:38px; align-items:center; padding:7px 13px; border-radius:9px; color:#007865; background:#e8f8f4; font-size:11px; font-weight:900; }
.management-grid h3 { margin:20px 0 10px; font-size:23px; }
.management-grid article > h3:first-child { margin-top:0; }
.management-grid p { margin:0; color:#59677b; font-size:14px; font-weight:600; line-height:1.8; }
.management-grid small { display:block; margin-top:19px; padding-top:14px; border-top:1px solid #e5ebf0; color:#8b5a19; font-size:11px; font-weight:700; }
.management-grid small a { color:inherit; text-underline-offset:3px; }

.publish-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.publish-visual { display:grid; align-content:center; min-height:380px; padding:45px; border:1px solid rgba(213,174,102,.58); border-radius:21px; background:radial-gradient(circle at 75% 15%,rgba(91,230,200,.18),transparent 27%),linear-gradient(140deg,#071b38,#073c4d); box-shadow:0 22px 50px rgba(7,30,60,.2); }
.publish-url { display:flex; align-items:center; gap:10px; min-width:0; min-height:55px; padding:7px 9px 7px 18px; border-radius:999px; background:#fff; box-shadow:0 14px 30px rgba(0,0,0,.27); }
.publish-url i { flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:#43d9bb; }
.publish-url span { min-width:0; overflow:hidden; color:#26364d; font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.publish-url b { flex:0 0 39px; display:grid; place-items:center; width:39px; height:39px; margin-left:auto; border-radius:10px; color:#102219; background:#c9ed17; }
.publish-icons { display:flex; justify-content:center; gap:14px; margin-top:30px; }
.publish-icons span { display:grid; place-items:center; width:76px; height:76px; border:1px solid rgba(130,234,211,.42); border-radius:50%; color:#a9f1e1; background:rgba(2,15,30,.35); font:800 12px Georgia,serif; }
.plain-check-list { display:grid; gap:10px; margin:24px 0 0; padding:0; list-style:none; }
.plain-check-list li { position:relative; padding-left:27px; color:#38475e; font-size:13px; font-weight:700; }
.plain-check-list li::before { position:absolute; left:0; top:1px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; background:#007865; font-size:9px; content:"✓"; }

.option-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.option-catalog-group { scroll-margin-top:110px; overflow:hidden; border:1px solid #d7e1e9; border-radius:17px; background:#fff; box-shadow:0 14px 35px rgba(9,31,61,.055); }
.option-catalog-group > header { padding:23px 23px 19px; border-bottom:1px solid #e1e8ed; background:linear-gradient(145deg,#f8fbfc,#eff7f5); }
.option-catalog-group > header span { color:#007865; font:800 9px Georgia,serif; letter-spacing:.13em; }
.option-catalog-group > header h3 { margin:8px 0 0; color:var(--ink); font-size:20px; }
.option-catalog-list { padding:2px 22px 8px; }
.option-catalog-list article { padding:18px 1px; border-bottom:1px solid #e7edf1; }
.option-catalog-list article:last-child { border-bottom:0; }
.option-catalog-list h4 { margin:0 0 7px; color:#172a47; font-size:14px; }
.option-catalog-list p { margin:0; color:#5d697b; font-size:12px; font-weight:600; line-height:1.72; }
.option-catalog-list .option-reset-note { margin:16px 1px 12px; }
.option-catalog-list small { display:block; margin-top:7px; color:#c03a36; font-size:10px; font-weight:700; line-height:1.6; }

.feature-plan-cta { padding:84px 0; color:#fff; background:radial-gradient(circle at 82% 18%,rgba(65,218,185,.19),transparent 28%),linear-gradient(125deg,#071b38,#07384c 68%,#006a59 145%); }
.feature-plan-cta-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(430px,.9fr); gap:clamp(45px,7vw,90px); align-items:center; }
.feature-plan-copy h2 { margin:0; font-size:clamp(35px,4.3vw,52px); line-height:1.35; letter-spacing:-.045em; text-wrap:balance; }
.feature-plan-copy > p:last-child { max-width:610px; margin:19px 0 0; color:#c9d9e3; font-size:14px; font-weight:600; line-height:1.85; }
.feature-plan-card { padding:29px; border:1px solid rgba(170,238,223,.34); border-top:4px solid #c69a51; border-radius:18px; background:rgba(255,255,255,.09); box-shadow:0 20px 44px rgba(0,0,0,.2); backdrop-filter:blur(8px); }
.feature-plan-card > div:first-child { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 10px; }
.feature-plan-card small { width:100%; color:#79ead2; font-size:11px; font-weight:900; }
.feature-plan-card strong { font-size:29px; letter-spacing:-.03em; }
.feature-plan-card span { color:#dbe7ed; font-size:12px; font-weight:700; }
.feature-plan-card ul { display:grid; gap:8px; margin:20px 0 24px; padding:17px 0; border-block:1px solid rgba(255,255,255,.14); list-style:none; }
.feature-plan-card li { position:relative; padding-left:22px; color:#e3edf2; font-size:12px; font-weight:700; }
.feature-plan-card li::before { position:absolute; left:0; color:#65e2c8; content:"✓"; }
.feature-plan-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feature-plan-actions .button { min-width:0; padding-inline:15px; }

@media (max-width: 960px) {
  .feature-detail-hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero-capability-list { max-width:580px; }
  .engine-detail { grid-template-columns:1fr; }
  .engine-detail-copy { padding:48px 42px; }
  .engine-detail-preview { min-height:550px; }
  .draw-mode-grid { grid-template-columns:1fr; }
  .draw-mode-card p { min-height:0; }
  .detail-split,.publish-grid { grid-template-columns:1fr; gap:40px; }
  .step-template-feature { grid-template-columns:1fr; gap:20px; }
  .option-catalog-grid { grid-template-columns:1fr; }
  .feature-plan-cta-inner { grid-template-columns:1fr; }
}

@media (max-width: 840px) {
  .feature-page-nav { top:68px; }
}

@media (max-width: 680px) {
  .feature-detail-hero { padding:28px 0 68px; }
  .features-page .site-breadcrumb { margin-bottom:31px; }
  .feature-detail-hero h1 { font-size:clamp(43px,13vw,61px); }
  .feature-detail-hero-grid > div:first-child > p:not(.eyebrow) { font-size:14px; }
  .hero-detail-actions { display:grid; grid-template-columns:1fr 1fr; }
  .hero-detail-actions .button { min-width:0; padding-inline:12px; }
  .feature-page-nav .shell { width:100%; }
  .detail-section { padding:72px 0; }
  .detail-heading { margin-bottom:30px; }
  .detail-heading h2 { font-size:31px; }
  .creation-grid,.management-grid { grid-template-columns:1fr; }
  .creation-grid article { min-height:0; padding:28px 25px; }
  .detail-wide-link { align-items:flex-start; padding:18px; }
  .detail-wide-link small { line-height:1.6; }
  .engine-detail-copy { padding:38px 23px; }
  .engine-detail-copy h2 { font-size:31px; }
  .engine-detail-preview { min-height:455px; }
  .engine-detail-preview > img { width:min(104%,550px); }
  .engine-detail-preview > div { left:14px; right:14px; justify-content:center; flex-wrap:wrap; }
  .draw-mode-card { padding:23px 20px 22px; }
  .draw-mode-visual { min-height:108px; margin-block:18px; }
  .step-template-feature { padding:24px 21px; }
  .step-template-list { grid-template-columns:1fr; }
  .step-template-list li { display:grid; grid-template-columns:minmax(105px,.42fr) minmax(0,1fr); gap:10px; align-items:center; padding:13px 14px; }
  .step-template-list b { margin:0; }
  .publish-visual { min-height:310px; padding:25px; }
  .publish-icons span { width:62px; height:62px; }
  .feature-plan-cta { padding:68px 0; }
}

@media (max-width: 390px) {
  .engine-detail-copy h2 { font-size:28px; }
  .hero-detail-actions { grid-template-columns:1fr; }
  .hero-capability-list { grid-template-columns:38px minmax(0,1fr); }
  .hero-capability-list span,.hero-capability-list strong { min-height:56px; }
  .setting-list article { grid-template-columns:42px minmax(0,1fr); padding:17px; }
  .setting-list article > span { width:38px; height:38px; }
  .publish-url { padding-left:12px; }
  .feature-plan-card { padding:24px 20px; }
  .feature-plan-actions { grid-template-columns:1fr; }
}