/* 홈에만 적용. 도구 편집 화면의 공통 디자인은 유지한다. */
body.home { --page-w:1240px; --home-bg:#fafbf8; --hero-tint:#eef2e9; background:var(--home-bg); font-size:17px; }
.home main { max-width:1240px; padding:0 40px; }
.landing-header { position:relative; z-index:20; background:var(--home-bg); }
.landing-nav { max-width:1240px; margin:auto; padding:20px 40px; display:flex; align-items:center; gap:32px; }
.landing-nav .brand { gap:10px; font-size:20px; letter-spacing:-.04em; }
.landing-links { display:flex; gap:28px; margin-left:auto; }
.landing-links a { display:flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; }
.landing-links a:hover { color:var(--primary); }
.tool-menu { position:relative; }
.tool-menu summary { display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:8px; font-weight:600; }
.tool-menu summary::-webkit-details-marker { display:none; }
.tool-menu[open] summary { background:var(--primary-soft); }
.tool-dropdown { position:absolute; top:calc(100% + 10px); right:0; width:300px; max-width:calc(100vw - 32px); padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-pop); }
.tool-dropdown a { display:flex; align-items:center; gap:14px; padding:12px; min-height:68px; color:var(--text); text-decoration:none; border-radius:6px; }
.tool-dropdown a:hover { background:var(--surface-2); }
.tool-dropdown a > span:first-child { display:flex; width:24px; color:var(--primary); flex:none; }
.tool-dropdown svg { width:24px; height:24px; }
.tool-dropdown strong,.tool-dropdown small { display:block; }
.tool-dropdown small { color:var(--muted); font-size:16px; margin-top:2px; }
.hero { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:38px; padding:54px 0 62px; }
.eyebrow { color:var(--primary); font-size:16px; font-weight:600; letter-spacing:-.025em; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.hero-copy .eyebrow > span { width:7px; height:7px; border-radius:50%; background:var(--primary); }
.hero h1 { font-size:clamp(38px,4.25vw,56px); line-height:1.22; font-weight:700; letter-spacing:-.065em; margin:0 0 26px; }
.hero h1 em { color:var(--primary); font-style:normal; }
.hero-description { color:var(--muted); font-size:19px; line-height:1.75; letter-spacing:-.025em; margin-bottom:30px; }
.start-button { display:inline-flex; align-items:center; justify-content:space-between; gap:34px; padding:17px 24px; min-height:60px; border-radius:8px; background:var(--primary); color:var(--primary-ink); text-decoration:none; font-size:18px; font-weight:700; transition:background .18s; }
.start-button:hover { background:var(--primary-hover); }
.start-button > span { font-size:24px; font-weight:400; line-height:1; }
.start-note { color:var(--muted); font-size:16px; margin:12px 0 25px; }
.privacy-note { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:16px; color:var(--muted); text-decoration:none; }
.privacy-note:hover { text-decoration:underline; }
.privacy-note svg { width:18px; height:18px; }
.scan-demo { min-width:0; margin:0; border-radius:18px; padding:24px; background:var(--hero-tint); position:relative; }
.demo-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; font-weight:600; font-size:16px; }
.demo-file { color:var(--muted); font-size:16px; font-weight:400; white-space:nowrap; }
.demo-scenes { display:grid; grid-template-columns:1fr 32px 1fr; align-items:center; gap:8px; }
.scene { min-width:0; }
.scene-label { font-size:16px; font-weight:600; margin:0 0 12px; display:flex; align-items:center; justify-content:center; gap:8px; }
.done-mark { background:var(--primary); color:var(--primary-ink); width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.photo-stage,.paper-stage { height:290px; display:flex; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; position:relative; }
.photo-stage { background:#777568; }
.photo-stage img { width:100%; height:100%; object-fit:contain; }
.paper-stage { padding:14px; background:#e0e5dc; }
.paper-stage img { width:100%; height:100%; object-fit:contain; }
.scene-note { text-align:center; font-size:16px; color:var(--muted); margin:12px 0 0; }
.transform-arrow { color:var(--primary); font-size:28px; text-align:center; margin-top:-5px; }
.scan-demo figcaption { border-top:1px solid var(--line); margin-top:22px; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:16px; line-height:1.55; }
.scan-demo figcaption > span { max-width:280px; }
.demo-replay { padding:8px 0 8px 8px; min-height:44px; border:0; background:transparent; color:var(--primary); font:inherit; font-weight:600; cursor:pointer; flex:none; }
.demo-replay[hidden] { display:none; }
.scan-line { display:none; pointer-events:none; position:absolute; top:0; left:0; right:0; height:3px; background:#b8f4d6; box-shadow:0 -14px 32px 14px #b8f4d63a; }
.hero-copy { animation:hero-enter .7s ease-out both; }
.scan-demo { animation:hero-enter .9s ease-out both; }
.is-playing .scan-line { display:block; animation:sweep 6s ease-in-out infinite; }
.is-playing .paper-stage img { animation:resolve 6s ease-in-out infinite; }
.is-playing .transform-arrow { animation:transfer 6s ease-in-out infinite; }
.is-playing .done-mark { animation:complete 6s ease-in-out infinite; }
@keyframes hero-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes sweep { 0%,5% { top:0; opacity:0; } 10% { opacity:1; } 45% { top:100%; opacity:1; } 50%,100% { top:100%; opacity:0; } }
@keyframes resolve {
  0%,10% { clip-path:inset(0 0 82% 0); opacity:.5; transform:perspective(700px) rotateY(-10deg); }
  50%,92% { clip-path:inset(0); opacity:1; transform:none; }
  100% { clip-path:inset(0 0 82% 0); opacity:.5; transform:perspective(700px) rotateY(-10deg); }
}
@keyframes transfer { 0%,10%,90%,100% { transform:none; opacity:.55; } 35%,55% { transform:translateX(4px); opacity:1; } }
@keyframes complete { 0%,35%,100% { transform:scale(.75); opacity:.35; } 55%,90% { transform:scale(1); opacity:1; } }
.benefits { display:flex; justify-content:space-between; gap:24px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.benefits p { display:flex; gap:12px; align-items:center; font-size:16px; margin:0; }
.benefits span { display:flex; color:var(--primary); flex:none; }
.benefits svg { width:22px; height:22px; }
.benefits strong { font-weight:500; }
.home-how { padding:84px 0 70px; }
.section-heading { margin-bottom:38px; }
.section-heading .eyebrow { margin-bottom:12px; }
.home h2 { font-size:clamp(24px,2.8vw,32px); line-height:1.4; letter-spacing:-.045em; }
.home-how ol { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; margin:0 0 26px; gap:38px; }
.home-how li { border-top:1px solid var(--line); padding-top:22px; }
.step-number { display:block; font-size:16px; color:var(--primary); margin-bottom:18px; }
.home-how strong { display:block; font-size:20px; margin-bottom:10px; letter-spacing:-.025em; }
.home-how li p { color:var(--muted); line-height:1.8; }
.text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; font-size:16px; font-weight:600; }
.text-link:hover { text-decoration:underline; }
.privacy-section { display:flex; gap:30px; padding:42px; border-radius:12px; background:var(--hero-tint); }
.privacy-symbol { width:52px; flex:none; color:var(--primary); }
.privacy-symbol svg { width:52px; height:52px; }
.privacy-section h2 { font-size:28px; margin-bottom:14px; }
.privacy-section p { color:var(--muted); line-height:1.85; margin-bottom:12px; }
.home-help { max-width:820px; margin:0 auto; padding:80px 0; }
.home-help h2 { margin-bottom:28px; }
.home-help details { border-top:1px solid var(--line); }
.home-help details:last-child { border-bottom:1px solid var(--line); }
.home-help summary { padding:22px 28px 22px 0; min-height:64px; list-style:none; cursor:pointer; position:relative; font-size:18px; }
.home-help summary::-webkit-details-marker { display:none; }
.home-help summary::after { content:'+'; position:absolute; right:0; font-size:22px; color:var(--muted); }
.home-help details[open] summary::after { content:'−'; }
.home-help details p { padding-bottom:22px; color:var(--muted); line-height:1.85; }
.closing { border-top:1px solid var(--line); padding:46px 0 58px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.closing h2 { font-size:28px; margin:0; }
.landing-footer { max-width:1240px; margin:auto; padding:28px 40px; display:flex; align-items:center; gap:24px; border-top:1px solid var(--line); font-size:16px; }
.landing-footer p { color:var(--muted); margin:0; }
.landing-footer nav { display:flex; gap:24px; margin-left:auto; }
.landing-footer nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; }
.skip-link { position:fixed; top:-160px; left:16px; z-index:1000; padding:16px; background:var(--surface); }
.skip-link:focus { top:8px; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) body.home { --home-bg:#111514; --hero-tint:#202c26; } }
:root[data-theme="dark"] body.home { --home-bg:#111514; --hero-tint:#202c26; }
@media (max-width:1050px) {
  .home main,.landing-nav { padding-left:28px; padding-right:28px; }
  .hero { gap:26px; }
  .hero h1 { font-size:43px; }
  .scan-demo { padding:18px; }
  .photo-stage,.paper-stage { height:250px; }
  .demo-scenes { gap:4px; grid-template-columns:1fr 24px 1fr; }
  .demo-file { display:none; }
  .scan-demo figcaption { flex-wrap:wrap; }
}
@media (max-width:800px) {
  .landing-nav { padding-top:14px; padding-bottom:14px; gap:16px; }
  .landing-links { display:none; }
  .tool-menu { margin-left:auto; }
  .hero { grid-template-columns:1fr; gap:30px; padding:30px 0 38px; }
  .hero-copy { max-width:560px; }
  .hero h1 { font-size:clamp(34px,6.4vw,50px); margin-bottom:18px; }
  .hero-copy .eyebrow { margin-bottom:16px; }
  .hero-description { font-size:18px; margin-bottom:22px; }
  .start-note { margin-bottom:6px; }
  .scan-demo { max-width:620px; width:100%; padding:20px; }
  .photo-stage,.paper-stage { height:270px; }
  .demo-file { display:block; }
  .benefits { flex-wrap:wrap; gap:18px; }
  .home-how { padding:56px 0; }
  .home-how ol { gap:20px; }
  .home-how li p br { display:none; }
  .privacy-section { padding:30px; gap:20px; }
  .home-help { padding:56px 0; }
  .closing { flex-direction:column; align-items:flex-start; }
  .landing-footer { flex-wrap:wrap; padding:24px 28px; gap:8px 24px; }
  .landing-footer nav { margin-left:0; }
}
@media (max-width:480px) {
  .home main { padding:0 20px; }
  .landing-nav { padding:12px 20px; gap:8px; }
  .landing-nav .brand { font-size:18px; gap:8px; }
  .landing-nav .brand img { width:26px; height:26px; }
  .tool-menu summary { padding:0 12px; gap:8px; font-size:16px; }
  .hero { padding-top:24px; gap:24px; }
  .hero-copy .eyebrow { display:none; }
  .privacy-note { min-height:44px; }
  .hero h1 { font-size:clamp(30px,8.1vw,38px); letter-spacing:-.06em; }
  .hero-description { font-size:17px; }
  .desktop-break { display:none; }
  .start-button { padding:15px 22px; min-height:56px; }
  .scan-demo { padding:16px 12px; border-radius:12px; }
  .demo-topline { margin-bottom:16px; }
  .demo-file { display:none; }
  .photo-stage,.paper-stage { height:180px; }
  .paper-stage { padding:8px; }
  .scene-label { gap:4px; margin-bottom:10px; }
  .scene-note { font-size:16px; line-height:1.5; }
  .scan-demo figcaption { margin-top:16px; padding-top:8px; }
  .scan-demo figcaption > span { max-width:none; flex:1 1 170px; }
  .benefits { padding:22px 0; display:grid; gap:16px; }
  .section-heading { margin-bottom:26px; }
  .home-how ol { grid-template-columns:1fr; gap:22px; }
  .home-how li { position:relative; padding:20px 0 0 44px; }
  .step-number { position:absolute; top:22px; left:0; }
  .home-how li p { margin:0; }
  .privacy-section { padding:26px 22px; display:block; }
  .privacy-symbol { display:block; margin-bottom:16px; width:32px; }
  .privacy-symbol svg { width:32px; height:32px; }
  .privacy-section h2,.closing h2 { font-size:24px; }
  .privacy-section p br { display:none; }
  .landing-footer { padding:24px 20px; display:grid; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-copy,.scan-demo { animation:none; }
  .is-playing .scan-line { display:none; animation:none; }
  .is-playing .paper-stage img { animation:none; }
  .is-playing .transform-arrow,.is-playing .done-mark { animation:none; }
  .start-button { transition:none; }
}
