/* Limit the local redesign to features, specifications and installation. */
@scope (.retained-sections) {
/* Local concept: bright editorial product page. */
:scope{color-scheme:light;--bg:#fff;--bg-soft:#f5f7f9;--bg-sunk:#edf1f5;--fg:#182532;--fg-dim:#596675;--fg-faint:#6c7885;--line:#e0e6ec;--card:#fff;--teal:#078b80;--blue:#285ced;--shadow:none}
html{scroll-padding-top:90px}:scope{background:#fff;letter-spacing:-.025em}.top{border:0;background:#ffffffed;backdrop-filter:blur(12px)}.top .wrap{height:76px}.brand small{font-size:10px;letter-spacing:.1em}.top nav{gap:26px}.top nav .cta{color:#384f63;background:#f0f4f7;border-radius:8px;padding:9px 17px}.slide-label{font-size:10px!important;font-weight:700;letter-spacing:.16em;color:#788392!important;margin:0 0 20px!important;line-height:1.5}
.hero{padding-block:46px 0;text-align:center;max-width:none;background:radial-gradient(ellipse at 25% 22%,#e7f8f230,transparent 48%),radial-gradient(ellipse at 80% 40%,#e7efff80,transparent 48%)}.hero-copy{max-width:850px;margin:auto}.hero .slide-label{display:none}.hero .mark{width:110.4px;height:110.4px;margin:0 auto 10px}.hero .badge{background:#fff;border:1px solid #dce5e9;color:#61717d;font-size:11px;font-weight:500;border-radius:7px;padding:5px 11px;margin-bottom:24px}.hero .hero-title{font-size:clamp(37px,5.3vw,64px);letter-spacing:-.065em;line-height:1.22;margin:0 0 26px;font-weight:750}.hero .hero-title .em{color:#078b80}.hero .lead{max-width:35em;font-size:17px;line-height:1.85;margin:0 auto 28px}.btn{border-radius:9px;padding:14px 25px;font-size:15px;box-shadow:none}.btn-main{background:#285ced}.dlmeta{font-size:11px;line-height:1.9;margin:18px auto 0;max-width:540px}.dlmeta code{font-size:10px;color:#778592}.hero-summary{display:flex;justify-content:center;gap:0;max-width:850px;margin:46px auto 0;border-top:1px solid #dfe7ee;padding:22px 0;color:#637582;font-size:12px}.hero-summary span{padding:0 28px}.hero-summary span+span{border-left:1px solid #d6dfe6}
section{padding-block:72px;border-top:1px solid var(--line)}section>.wrap>h2{font-size:34px;line-height:1.4;letter-spacing:-.045em;margin:0 0 16px}section>.wrap>p.sub{font-size:15px;line-height:1.9;margin:0 0 34px;max-width:48em}#why{background:#fff}#why>.wrap>h2{max-width:730px}#why .slide-label{color:#506b85!important}.ba{gap:24px}.ba>div{padding:28px 32px;border-radius:12px}.ba .before{background:#edf1f5;border-color:transparent}.ba .after{background:#fff;border:1px solid #219b8a}.ba h3{font-size:17px;margin-bottom:22px}.ba .after h3{color:#078373}.ba ul{gap:16px}.ba li{font-size:14px;line-height:1.8}
.formats{padding-block:16px 8px;gap:30px}.fmt{gap:17px}.fmt b{font-size:18px;margin-bottom:8px}.ext-badge{border-radius:4px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}.card{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:26px 0 30px}.card h3{font-size:19px;line-height:1.5;margin-bottom:16px}.card h3 .ico{width:22px;height:22px}.card p{font-size:14px;line-height:1.9}
.spec-section{background:#fff}.spec-section>.wrap{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:64px}.spec-section .sub{font-size:14px!important}.spec{border-top:2px solid #c4d3e2;font-size:13px}.spec th,.spec td{padding:18px 12px;line-height:1.9}.spec th{width:24%;font-size:12px;color:#5c7186}
.steps{gap:0}.note{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:0 42px;border:0;border-top:1px solid var(--line);border-radius:0;padding:30px 0;background:none;align-content:start}.note h3{grid-column:1;font-size:19px;line-height:1.6;margin-bottom:16px}.note>p{grid-column:1;font-size:14px;line-height:1.9}.note>p+p{margin-top:12px}.note .open-with-guide{grid-column:2;grid-row:1 / span 4;display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;padding:0;background:none}.screenshot-link{display:block;width:196px;max-width:100%;line-height:0;outline-offset:5px}.smartscreen-guide .screenshot-link{width:196px}.open-with-guide img,.smartscreen-guide img{width:100%;height:auto;border-radius:0;box-shadow:0 3px 16px #16304a12}.open-with-guide figcaption{font-size:12px;line-height:1.8;color:#617383;margin:0;max-width:280px}.image-hint{display:block;margin-top:8px;font-size:11px;color:#738394}
.support{padding:0 36px 52px;background:white;border:0}.support>.wrap{max-width:1088px;padding:48px;background:#eef3ff;border-radius:18px}.support .box{max-width:640px}.support h2{font-size:32px;letter-spacing:-.04em;margin:0 0 18px}.support .sub{font-size:15px;color:#57687c;line-height:1.9;margin-bottom:24px}.support .slide-label{color:#5271b0!important}.support .btn-main{background:#285ced}footer{padding:24px 0 32px;border-top:1px solid var(--line);font-size:12px}
@media(max-width:900px){.formats{grid-template-columns:repeat(2,minmax(0,1fr))}.spec-section>.wrap{grid-template-columns:210px minmax(0,1fr);column-gap:30px}.note{grid-template-columns:minmax(0,1fr) 270px;column-gap:26px}}
@media(max-width:700px){.top .wrap{height:64px}.top nav{gap:16px}.top nav .cta{font-size:12px;padding:7px 12px}.hero{padding-top:28px}.hero .mark{margin-bottom:6px}.hero .hero-title{font-size:clamp(31px,8.2vw,48px)}.hero .lead{font-size:15px;margin-bottom:25px}.hero .badge{font-size:10px}.hero-summary{margin-top:32px;padding:18px 0;font-size:10px}.hero-summary span{padding:0 10px}.dlmeta{font-size:10px}.dlmeta code{font-size:9px}section{padding-block:46px}section>.wrap>h2{font-size:27px}section>.wrap>p.sub{font-size:14px;margin-bottom:25px}.slide-label{margin-bottom:15px!important}.ba{grid-template-columns:1fr;gap:15px}.ba>div{padding:24px}.ba ul{gap:13px}.grid{grid-template-columns:1fr;gap:0}.card h3{font-size:18px}.formats{gap:28px 14px}.fmt{gap:10px}.fmt b{font-size:16px}.fmt-icon{width:34px;height:44px;flex-basis:34px}.fmt code{font-size:10px}.spec-section>.wrap{display:block}.spec th,.spec td{padding-inline:0}.note{display:block;padding-block:26px}.note h3{font-size:18px}.note .open-with-guide{margin-top:22px}.open-with-guide figcaption{width:100%;max-width:310px}.support{padding:0 16px 30px}.support>.wrap{padding:32px 22px;border-radius:12px}.support h2{font-size:27px}.support .sub{font-size:14px}footer{font-size:11px}}
@media(prefers-reduced-motion:no-preference){.btn{transition:background .2s,transform .2s}.btn:hover{transform:translateY(-2px)}}

}

.retained-sections .shortcut-list{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.retained-sections .shortcut-list>div{border-top:1px solid var(--line);padding:22px 0}
.retained-sections .shortcut-list dt{font-size:14px;min-height:34px}.retained-sections .shortcut-list dt span{color:var(--fg-dim);font-size:12px;margin:0 5px}
.retained-sections .shortcut-list kbd{display:inline-block;font-family:inherit;font-size:13px;line-height:1.6;padding:3px 9px;border:1px solid #d5dee6;border-bottom-width:3px;border-radius:6px;background:#f7f9fb}
.retained-sections .shortcut-list dd{margin:12px 0 0;color:var(--fg-dim);font-size:14px;line-height:1.8}
.retained-sections .shortcut-help{font-size:12px;color:var(--fg-dim);margin:12px 0 0}
@media(max-width:700px){.retained-sections .shortcut-list{grid-template-columns:1fr;gap:0}.retained-sections .shortcut-list>div{padding:18px 0}}

.retained-sections .shortcut-group-title{font-size:18px;margin:0 0 18px;color:var(--fg)}
.retained-sections .shortcut-image-group{border-top:1px dashed var(--fg-dim);margin-top:24px;padding-top:32px}
.retained-sections .shortcut-rotation dd p{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin:0 0 10px}
.retained-sections .shortcut-rotation dd p span{margin-left:6px}
.retained-sections .shortcut-rotation .rotation-note{font-size:12px}

.retained-sections .shortcut-list .shortcut-next-key{margin-top:20px}
/* UI 토글 켬·끔 비교 — 같은 구도 2장을 화살표로 이은 4:3 안내 이미지. 누르면 모달(image-modal.js) */
.retained-sections .toggle-compare{display:block;width:128px;margin:12px 0 0;line-height:0;border-radius:4px;overflow:hidden;cursor:zoom-in}
.retained-sections .toggle-compare img{display:block;width:100%;height:auto;transition:transform .15s}
.retained-sections .toggle-compare:hover img{transform:scale(1.04)}
.retained-sections .toggle-compare:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.retained-sections .toggle-compare img{transition:none}}

.retained-sections .shortcut-help{display:flex;align-items:baseline;gap:8px}
.retained-sections .shortcut-info-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 15px;height:15px;border:1px solid currentColor;border-radius:50%;font-size:11px;font-weight:600;line-height:1}

/* Keep the two specification tables in one flow; never stack them in a shared grid area. */
.spec-section>.wrap{align-items:start}
.spec-intro{min-width:0}
.spec-intro h2{font-size:36px;line-height:1.3;margin:0 0 20px}
.spec-groups{min-width:0}
.spec-groups>.spec-group-title:first-child{margin-top:0}
.spec-groups>.spec{table-layout:fixed}
.spec-groups .spec th{white-space:normal;overflow-wrap:anywhere}
.spec-groups .spec td{overflow-wrap:anywhere}
#strengths .card p+p{margin-top:12px;font-size:13px;color:var(--fg-dim)}
@media(max-width:700px){.spec-intro h2{font-size:27px}.spec-groups{margin-top:28px}}

#strengths .grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:700px){#strengths .grid{grid-template-columns:1fr}}

/* Specifications should read as a single document section; long rows break the old two-column presentation layout. */
.retained-sections .spec-section {
  background:#fff;
}
.retained-sections .spec-section > .wrap {
  display:block;
}
.retained-sections .spec-intro {
  max-width:760px;
  margin:0 0 34px;
}
.retained-sections .spec-intro .slide-label {
  margin-bottom:16px!important;
}
.retained-sections .spec-intro h2 {
  font-size:36px;
  line-height:1.3;
  margin:0 0 16px;
}
.retained-sections .spec-intro .sub {
  margin:0;
  max-width:52em;
  font-size:14px!important;
  line-height:1.9;
}
.retained-sections .spec-groups {
  display:grid;
  gap:18px;
  min-width:0;
}
.retained-sections .spec-group-title {
  margin:38px 0 0;
  font-size:20px;
  line-height:1.5;
}
.retained-sections .spec-groups > .spec-group-title:first-child {
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.retained-sections .spec {
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  border-top:2px solid #c4d3e2;
  background:#fff;
  font-size:13.5px;
}
.retained-sections .spec th,
.retained-sections .spec td {
  padding:18px 16px;
  border-bottom:1px solid #e0e6ec;
  line-height:1.9;
  vertical-align:top;
}
.retained-sections .spec th {
  width:22%;
  min-width:150px;
  color:#526b83;
  font-size:12.5px;
  font-weight:700;
  white-space:normal;
  overflow-wrap:break-word;
}
.retained-sections .spec td {
  color:#1d2b39;
  overflow-wrap:anywhere;
}
@media(max-width:700px){
  .retained-sections .spec-section > .wrap{display:block}
  .retained-sections .spec-intro{margin-bottom:26px}
  .retained-sections .spec-intro h2{font-size:27px}
  .retained-sections .spec,
  .retained-sections .spec tbody,
  .retained-sections .spec tr,
  .retained-sections .spec th,
  .retained-sections .spec td{display:block;width:100%}
  .retained-sections .spec th{padding:16px 0 4px;border-bottom:0;min-width:0}
  .retained-sections .spec td{padding:0 0 16px}
}

/* HanaView specification section hardening: keep this after legacy presentation rules. */
.retained-sections #specifications.spec-section > .wrap {
  display: block !important;
}
.retained-sections #specifications .spec-intro {
  max-width: 760px;
  margin: 0 0 34px;
}
.retained-sections #specifications .spec-groups {
  display: block;
  min-width: 0;
}
.retained-sections #specifications .spec-group-title {
  display: block;
  margin: 52px 0 12px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg);
}
.retained-sections #specifications .spec-groups > .spec-group-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.retained-sections #specifications .spec {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 2px solid #c4d3e2;
  background: #fff;
  font-size: 13.5px;
}
.retained-sections #specifications .spec tbody { display: table-row-group; }
.retained-sections #specifications .spec tr { display: table-row; }
.retained-sections #specifications .spec th,
.retained-sections #specifications .spec td {
  display: table-cell;
  padding: 18px 16px;
  border-bottom: 1px solid #e0e6ec;
  line-height: 1.9;
  vertical-align: top;
}
.retained-sections #specifications .spec th {
  width: 22%;
  min-width: 150px;
  color: #526b83;
  font-size: 12.5px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: break-word;
}
.retained-sections #specifications .spec td {
  color: #1d2b39;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .retained-sections #specifications.spec-section > .wrap { display: block !important; }
  .retained-sections #specifications .spec-intro { margin-bottom: 26px; }
  .retained-sections #specifications .spec,
  .retained-sections #specifications .spec tbody,
  .retained-sections #specifications .spec tr,
  .retained-sections #specifications .spec th,
  .retained-sections #specifications .spec td {
    display: block;
    width: 100%;
  }
  .retained-sections #specifications .spec th {
    min-width: 0;
    padding: 16px 0 4px;
    border-bottom: 0;
  }
  .retained-sections #specifications .spec td { padding: 0 0 16px; }
}
/* 히어로 꽃 연출 (hero-bloom.js) — 물감 번짐·왕꽃·둘레 꽃·들꽃·꽃잎 비. 꽃은 글자·단추 뒤 층(.bloom-stage)에 있다.
   bloom-lab 시안 11번(1+2+4+6)을 옮긴 것. 누르면 .bloom-stage 에 .is-blooming 이 붙는다. */
.hero.hana-bloom{width:100%;max-width:none;position:relative;isolation:isolate;overflow:hidden;padding-bottom:36px;background:linear-gradient(180deg,#fffafb 0,#fffdfb 55%,#f3faf6)}
@media(max-width:700px){.hero.hana-bloom{padding-bottom:28px;padding-inline:22px}.hero .dlmeta code{overflow-wrap:anywhere}}
.bloom-stage{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:800px}
.hv-sakura{display:block;overflow:visible}
.hv-petal{position:absolute;left:0;top:0;width:14px;height:14px;opacity:0;will-change:transform,opacity;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -46 24 48'%3E%3CradialGradient id='g' cx='50%25' cy='100%25' r='100%25'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%23fde6ed'/%3E%3Cstop offset='1' stop-color='%23f5b6c9'/%3E%3C/radialGradient%3E%3Cpath d='M0 0C-17-10-21-31-10-43L0-36L10-43C21-31 17-10 0 0Z' fill='url(%23g)' stroke='%23f0afc2' stroke-width='1.2'/%3E%3C/svg%3E")}

/* 단추 빛 */
.bloom-glow{position:absolute;width:520px;height:220px;transform:translate(-50%,-50%) scale(.6);border-radius:50%;background:radial-gradient(closest-side,#fbd3df99,#fbd3df00);opacity:0}
.bloom-glow.on{animation:bloom-glow 3.2s ease-out both}
@keyframes bloom-glow{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}30%{opacity:1}100%{opacity:.55;transform:translate(-50%,-50%) scale(1.25)}}

/* 물감 번짐 */
.bloom-wash{position:absolute;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;background:radial-gradient(closest-side,var(--c),transparent);filter:blur(24px);mix-blend-mode:multiply;opacity:0;transform:translate(calc(-50% + var(--from-x)),calc(-50% + var(--from-y))) scale(.05)}
.is-blooming .bloom-wash{transition:transform 2.6s cubic-bezier(.16,.8,.25,1) calc(var(--i) * .12s),opacity 1.4s ease calc(var(--i) * .12s);transform:translate(-50%,-50%) scale(1);opacity:.6}

/* 왕꽃 — 봉오리가 꽃잎 한 장씩 펼쳐진다 */
.bloom-king{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%)}
.bloom-king>svg{position:absolute;inset:0;width:100%;height:100%}
.bloom-king .hv-sakura{opacity:.36}
.bloom-bud{opacity:.28;scale:.5;transform-origin:50% 72%;animation:bloom-breathe 4s ease-in-out infinite}
.bloom-king.open .bloom-bud{animation:bloom-bud-out .7s ease forwards}
.bloom-petal>path,.bloom-copy-petal>path{transform-origin:0 0;transform:scale(.08) rotate(-40deg);opacity:0}
.bloom-king .hv-stamen,.bloom-copy .hv-stamen{transform-origin:0 0;transform:scale(0);opacity:0}
.bloom-king.open .bloom-petal>path{animation:bloom-petal 1.4s cubic-bezier(.2,.9,.25,1.1) calc(.35s + var(--i) * .17s) forwards}
.bloom-king.open .hv-stamen{transition:transform .9s cubic-bezier(.2,.9,.3,1.3) 1.3s,opacity .6s ease 1.3s;transform:scale(1);opacity:1}
@keyframes bloom-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes bloom-bud-out{to{opacity:0;transform:scale(1.4)}}
@keyframes bloom-petal{0%{transform:scale(.08) rotate(-40deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}

/* 둘레 꽃(왕꽃 복제본) — 단추에서 가까운 것부터 */
.bloom-copy{position:absolute;transform:translate(-50%,-50%) rotate(var(--turn))}
.bloom-copy .hv-sakura{opacity:.36}
.is-blooming .bloom-copy-petal>path{animation:bloom-petal 1.3s cubic-bezier(.2,.9,.25,1.1) calc(var(--d) + var(--i) * .12s) forwards}
.is-blooming .bloom-copy .hv-stamen{transition:transform .8s cubic-bezier(.2,.9,.3,1.3) calc(var(--d) + .7s),opacity .5s ease calc(var(--d) + .7s);transform:scale(1);opacity:1}

/* 들꽃 — 줄기(.bloom-stalk)만 자라고 꽃(.bloom-head)은 줄기 끝을 따라 올라온다 */
.bloom-meadow{position:absolute;left:0;right:0;bottom:0;height:260px}
.bloom-stem{position:absolute;bottom:0;width:2px;margin-left:-1px;transform-origin:50% 100%;transform:rotate(var(--lean))}
.bloom-stalk{position:absolute;inset:0;background:linear-gradient(#9ccab0,#7fb397);border-radius:2px;transform-origin:50% 100%;transform:scaleY(.18)}
.bloom-leaf{position:absolute;bottom:22%;left:50%;width:12px;height:6px;border-radius:0 100% 0 100%;background:#a9d2bb;transform-origin:0 50%;transform:scaleX(var(--side)) rotate(-30deg)}
.bloom-head{position:absolute;left:50%;top:0;transform:translate(-50%,calc(-50% + var(--h) * .82)) scale(.25);opacity:.6}
.bloom-meadow.grow .bloom-stalk{transition:transform 1.4s cubic-bezier(.2,.8,.25,1.05) var(--d);transform:scaleY(1)}
.bloom-meadow.grow .bloom-head{transition:transform 1.4s cubic-bezier(.2,.8,.25,1.05) var(--d),opacity .6s ease calc(var(--d) + 1s);transform:translate(-50%,-50%) scale(1);opacity:1}
.bloom-meadow.grow .bloom-head .hv-sakura{animation:bloom-open 1s cubic-bezier(.2,.9,.3,1.3) calc(var(--d) + 1.1s) both}
.bloom-meadow.grow .bloom-stem{animation:bloom-sway 5s ease-in-out calc(var(--d) + 2.6s) infinite alternate}
@keyframes bloom-open{from{transform:scale(.3) rotate(-40deg)}to{transform:none}}
@keyframes bloom-sway{from{rotate:0deg}to{rotate:2.5deg}}
@media(max-width:700px){.bloom-meadow{height:180px}}
@media(prefers-reduced-motion:reduce){.bloom-bud,.bloom-meadow.grow .bloom-stem{animation:none}}

/* 내려받기 단추 — 청록(로고·"이제 안녕" 색)으로 꽃 정원과 어울리게 */
.hero .btn-main[data-bloom-download]{background:linear-gradient(180deg,#19c3ad,#0fa995);box-shadow:0 8px 22px #0fa99538;color:#fff}
.hero .btn-main[data-bloom-download]:hover{background:linear-gradient(180deg,#14b3a0,#0d9787);filter:none}

/* 새로 생긴 기능 — 실제 앱 화면과 함께. 페이지 카드와 같은 색 변수를 써서 어두운 모드도 따른다 */
.feature-showcase{display:grid;gap:18px;margin:34px 0 44px}
.feature-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:34px;align-items:center;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.feature-row-flip .feature-copy{order:2}
.feature-new{display:inline-block;margin-bottom:12px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;color:#c4692a;background:color-mix(in srgb,#f6a86b 18%,transparent)}
.feature-copy h3{margin:0 0 10px;font-size:21px;line-height:1.45;letter-spacing:-.02em;color:var(--fg)}
.feature-copy h3 kbd{font-family:inherit;font-size:.82em;font-weight:600;line-height:1;padding:3px 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--bg-sunk);color:var(--fg);vertical-align:2px}
.feature-copy p{margin:0;font-size:15px;line-height:1.75;color:var(--fg-dim)}
.feature-chips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.feature-chips li{padding:4px 10px;border-radius:999px;font-size:12.5px;color:var(--fg-dim);background:var(--bg-sunk)}
.feature-frame{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--bg-sunk);transition:transform .2s,box-shadow .2s}
.feature-frame:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.feature-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.feature-frame img.feature-frame-top{object-position:top}
.feature-note{margin:4px 0 0;text-align:center;font-size:12.5px;color:var(--fg-faint)}
/* PC 에서는 카드가 너무 높아 여백이 많다 — 이미지 칸을 줄이고 비율을 낮춘다 (모바일은 그대로) */
@media(min-width:761px){.feature-row{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:30px;padding:22px 26px}.feature-row-flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.feature-frame{aspect-ratio:16/9}.feature-frame img[src*="archive-images"]{object-position:center bottom}}
@media(max-width:760px){.feature-row{grid-template-columns:1fr;gap:18px;padding:20px}.feature-row-flip .feature-copy{order:0}.feature-copy h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.feature-frame{transition:none}.feature-frame:hover{transform:none}}

/* 사진 크게 보기 모달 (image-modal.js) */
.image-modal{padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible}
.image-modal::backdrop{background:rgba(16,26,36,.62);backdrop-filter:blur(3px)}
.image-modal img{display:block;max-width:min(94vw,1280px);max-height:86vh;width:auto;height:auto;border-radius:12px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.28)}
/* 닫기: 이미지 오른쪽 위 바깥에 띄운 반투명 유리 원 + 선 아이콘 */
.image-modal-close{position:absolute;top:-50px;right:0;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;transition:background .15s}
.image-modal-close svg{width:18px;height:18px}
.image-modal-close:hover{background:rgba(255,255,255,.32)}
.image-modal-close:focus-visible{outline:2px solid #8be1d6;outline-offset:3px}
.image-modal[open]{animation:image-modal-in .18s ease-out}
@keyframes image-modal-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.image-modal[open]{animation:none}}
html:has(.image-modal[open]){overflow:hidden}