@charset "UTF-8";
.step-confirm{display:flex;gap:12px;align-items:center;min-height:44px;margin-top:18px;font-size:.9rem;cursor:pointer}.step-confirm input{width:22px;height:22px;accent-color:#693b90;flex-shrink:0}.guide-reset{min-height:44px;padding:8px 12px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:6px;font:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #693b90;outline-offset:4px}.steps code{overflow-wrap:anywhere;font-size:.9em}
:root{color-scheme:dark;--bg:#151418;--surface:#201e25;--paper:#f3f0e9;--muted:#b2adb9;--line:#3b3742;--purple:#b99aff;--ink:#201b29;--max:1184px;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:16px;scroll-behavior:smooth;scroll-padding-top:32px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--paper);line-height:1.7;word-break:keep-all;overflow-wrap:break-word}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:6px}img{max-width:100%;display:block}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{line-height:1.24;letter-spacing:-.04em}h2{font-size:clamp(2rem,3.1vw,2.8rem);font-weight:750}p{font-size:1rem}b,strong{font-weight:650}.wrap{max-width:var(--max);margin-inline:auto;width:calc(100% - 96px)}.eyebrow{font-size:.75rem;letter-spacing:.13em;font-weight:650;line-height:1.6}.purple{color:var(--purple)}.skip-link{position:fixed;top:-100px;left:20px;background:var(--paper);color:var(--bg);padding:12px 24px;z-index:10}.skip-link:focus{top:10px}
.header{min-height:104px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line)}.brand{flex-shrink:0}.brand img{width:108px;height:auto}.header nav{display:flex;gap:32px;margin-left:auto;flex-wrap:wrap}.header nav a{font-size:.9rem;padding:12px 0;color:var(--muted)}.header nav a:hover{color:var(--paper)}.beta-label{font-size:.75rem;color:var(--purple);border:1px solid #5c4b79;padding:5px 12px;border-radius:20px;white-space:nowrap}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;padding-block:92px 104px}.hero .eyebrow{color:var(--purple);display:flex;align-items:center;gap:10px}.small-cross{font-size:1.5rem;line-height:1}.hero h1{font-size:clamp(2.8rem,4.8vw,4.3rem);font-weight:780;letter-spacing:-.065em;line-height:1.18;margin-block:24px}.hero-description{color:var(--muted);font-size:1.125rem;line-height:1.9}.button{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;min-height:52px;padding:13px 22px;border-radius:7px;font-size:.95rem;font-weight:650}.primary{background:var(--purple);color:#191023;margin-top:32px}.button span{font-size:1.3rem}.primary:hover{background:#cbb5ff}.hero-note{font-size:.75rem;margin-top:18px;color:var(--muted)}.brand-panel{background:var(--purple);color:var(--ink);padding:34px;min-height:414px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(2deg);border-radius:3px}.panel-overline{font-size:.75rem;letter-spacing:.1em;font-weight:650}.hero-wordmark{filter:brightness(0);width:100%;height:auto;margin-block:24px}.panel-bottom{display:flex;align-items:end;justify-content:space-between;gap:24px}.panel-bottom>span:first-child{font-size:1.75rem;font-weight:750;line-height:1.25;letter-spacing:-.05em}.panel-index{font-size:.75rem;line-height:1.9;letter-spacing:.04em;font-weight:600}
.experience{border-top:1px solid var(--line);padding-block:70px 90px}.section-intro .eyebrow{color:var(--purple);margin-bottom:16px}.section-intro>p:last-child:not(.eyebrow){color:var(--muted);margin-top:22px}.feature-grid{margin-top:50px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.feature-grid article{border-top:1px solid var(--line);padding-top:24px}.feature-number{font-size:.75rem;letter-spacing:.09em;color:var(--muted)}.feature-grid h3{font-size:1.4rem;margin-block:22px 16px}.feature-grid p{color:var(--muted)}
.start-section{background:var(--paper);color:var(--ink);padding-block:82px 90px;color-scheme:light}.start-heading{display:flex;justify-content:space-between;gap:32px;align-items:end}.start-heading .eyebrow{color:#705291;margin-bottom:16px}.start-heading>p{color:#655d6b}.route-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block:38px 58px}.route-card{border:1px solid #c8c1cf;padding:24px 24px 20px;position:relative;display:flex;flex-direction:column;min-height:176px;border-radius:8px;transition:background .2s,border-color .2s}.route-index{font-size:.75rem;letter-spacing:.1em;color:#726a7a}.route-card strong{font-size:1.35rem;letter-spacing:-.045em;margin-block:16px 4px}.route-card>span:not(.route-index):not(.route-arrow){font-size:.875rem;color:#685f70}.route-arrow{position:absolute;right:24px;top:19px;font-size:1.5rem}.route-card:hover{border-color:#79628b;background:#ebe4f2}.route-card[aria-current="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}.route-card[aria-current="true"] .route-index,.route-card[aria-current="true"]>span:not(.route-index):not(.route-arrow){color:#d4bfdc}.start-section a:focus-visible,.start-section summary:focus-visible{outline-color:#744ba7}.guide-panel{display:grid;grid-template-columns:1fr 1.75fr;gap:88px;scroll-margin-top:35px;margin-top:48px;padding-top:32px;border-top:1px solid #d5ced9}.guide-panel[hidden]{display:none}.guide-aside .eyebrow{color:#715783}.guide-aside h3{font-size:2.15rem;margin-block:17px 20px}.guide-aside>p{color:#665d6f}.notice{margin-top:28px;border-left:2px solid #8a62b2;padding:0 0 0 16px}.notice strong{font-size:.875rem}.notice p{font-size:.875rem;margin-top:8px;color:#6c6073;line-height:1.8}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps>li{counter-increment:step;display:flex;gap:22px;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid #d5ced9}.steps>li:last-child{margin-bottom:0;border:0;padding-bottom:0}.steps>li:before{content:counter(step,decimal-leading-zero);font-size:.875rem;color:#7b5a92;flex:0 0 26px;line-height:1.8;padding-top:1px;font-variant-numeric:tabular-nums}.steps h4{font-size:1.125rem;margin-bottom:12px}.steps p{color:#5e5467}.steps .step-note{font-size:.875rem;color:#725d85;margin-top:12px}.steps details{margin-top:16px;background:#e8e2ed;border-radius:4px;padding:0 16px}.steps summary{font-size:.875rem;padding-block:12px;cursor:pointer;font-weight:650}.steps details p,.steps details ul{font-size:.875rem;padding-bottom:16px}.steps details ul{padding-left:20px;padding-bottom:0;margin-top:0}.text-link{display:inline-block;color:#693b90;font-size:.95rem;font-weight:650;margin-top:16px;padding-block:5px}.text-link span{margin-left:8px}
.owner-section{display:grid;grid-template-columns:1fr 1fr;gap:88px;padding-block:90px}.owner-section .eyebrow{color:var(--purple);margin-bottom:22px}.large-copy{font-size:1.4rem;line-height:1.5;letter-spacing:-.03em}.rules{margin-top:32px;margin-bottom:0}.rules>div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding-block:20px;border-top:1px solid var(--line)}.rules dt{font-size:.875rem;color:var(--purple)}.rules dd{margin:0;font-size:.95rem;color:var(--muted)}.remote-section{display:grid;grid-template-columns:1fr 1fr;gap:88px;border-block:1px solid var(--line);padding-block:64px}.remote-section .eyebrow{color:var(--purple);margin-bottom:20px}.remote-section>div:last-child{color:var(--muted)}.remote-section p+p{margin-top:18px}.remote-section .step-note{font-size:.875rem;color:var(--paper)}
.help-section{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;padding-block:90px}.help-section h2{font-size:2rem}.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;padding-block:22px;font-size:1rem;font-weight:550;padding-right:12px}.faq summary::marker{color:var(--purple)}.faq details p{color:var(--muted);padding:0 0 24px 20px}.footer{padding-block:30px 38px;display:flex;align-items:center;gap:28px;border-top:1px solid var(--line)}.footer p{font-size:.875rem;color:var(--muted)}.footer>span{margin-left:auto;font-size:.75rem;color:var(--muted)}
@media(min-width:1600px){.hero{padding-block:115px}.brand-panel{min-height:440px}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.hero{gap:36px}.hero h1{font-size:3.2rem}.brand-panel{min-height:360px;padding:26px}.guide-panel{gap:42px;grid-template-columns:1fr 1.5fr}.route-card{padding:20px 18px}.route-card strong{font-size:1.15rem}.route-card>span:not(.route-index):not(.route-arrow){font-size:.8rem}.owner-section,.remote-section{gap:40px}.help-section{gap:40px}.rules>div{grid-template-columns:100px 1fr;gap:14px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{min-height:86px;gap:16px;flex-wrap:wrap;padding-block:16px}.header nav{gap:18px}.header nav a{font-size:.875rem}.beta-label{display:none}.brand img{width:84px}.hero{grid-template-columns:1fr;gap:46px;padding-block:52px 64px}.hero h1{font-size:clamp(2.5rem,9vw,3.7rem)}.hero-description{font-size:1rem}.hero-note{font-size:.75rem}.brand-panel{transform:rotate(0deg);min-height:280px;padding:26px}.hero-wordmark{width:80%;margin:20px auto}.panel-bottom>span:first-child{font-size:1.4rem}.panel-index{font-size:.75rem}.experience{padding-block:50px 58px}.feature-grid{grid-template-columns:1fr;gap:26px;margin-top:32px}.feature-grid h3{margin-block:12px;font-size:1.3rem}.start-section{padding-block:52px}.start-heading{display:block}.start-heading>p{margin-top:20px}.route-picker{grid-template-columns:1fr;gap:10px;margin-block:26px 34px}.route-card{min-height:100px;padding:18px 45px 18px 56px}.route-index{position:absolute;left:19px;top:24px}.route-card strong{margin:0 0 3px;font-size:1.15rem}.route-card>span:not(.route-index):not(.route-arrow){font-size:.875rem}.route-arrow{right:20px;top:24px}.guide-panel{grid-template-columns:1fr;gap:34px;margin-top:32px;padding-top:25px}.guide-aside h3{font-size:1.85rem}.guide-aside h3 br{display:none}.guide-aside>p br{display:none}.notice{margin-top:20px}.steps>li{gap:13px}.owner-section,.remote-section,.help-section{grid-template-columns:1fr;gap:32px;padding-block:52px}.rules>div{grid-template-columns:94px 1fr;gap:16px}.help-section h2{font-size:1.85rem}.footer{gap:12px 20px;flex-wrap:wrap}.footer>span{margin-left:0;width:100%}.footer p{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{transition:none!important}}
.footer{flex-wrap:wrap}.footer .contact{font-size:.875rem;min-height:44px;display:flex;align-items:center;color:var(--purple)}
@media(prefers-contrast:more){:root{--muted:#ddd6e3;--line:#807789}.notice p,.steps p,.guide-aside>p,.start-heading>p{color:#362d3d}.route-card{border-width:2px}}

/* Privacy policy: readable document layout, with a wrapping mobile contents list. */
.privacy{padding-block:72px 96px}.privacy-heading{max-width:820px}.privacy h1{font-size:clamp(2rem,4.5vw,3.7rem);margin-block:20px}.privacy-date{font-size:.875rem;color:var(--muted)}.privacy-lead{font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.5;margin-block:32px 20px}.privacy-heading>p:last-of-type{color:var(--muted)}.privacy-summary{background:var(--surface);border-left:3px solid var(--purple);padding:24px 28px;margin-top:32px;border-radius:0 8px 8px 0}.privacy-summary ul{margin-bottom:0;padding-left:20px}.privacy-summary li+li{margin-top:10px}.privacy-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;margin-top:64px}.privacy-toc{align-self:start;position:sticky;top:28px}.privacy-toc .eyebrow{color:var(--muted)}.privacy-toc ol{padding-left:22px;margin-top:18px}.privacy-toc li{padding-block:7px;color:var(--muted);font-size:.9rem}.privacy a:not(.brand){text-decoration:underline;text-underline-offset:4px;text-decoration-color:#77608c}.privacy a:hover{color:var(--purple)}.privacy-body{max-width:820px;min-width:0}.privacy-body section{border-top:1px solid var(--line);padding-top:28px;margin-bottom:44px;scroll-margin-top:28px}.privacy-body h2{font-size:1.45rem;margin-bottom:24px;line-height:1.5}.privacy-body p,.privacy-body li,.privacy-data dd{color:var(--muted);line-height:1.9}.privacy-body p+p{margin-top:18px}.privacy-body ul,.privacy-body ol{padding-left:22px}.privacy-body li+li{margin-top:18px}.privacy-body strong,.privacy-body a{color:var(--paper)}.privacy-data{margin:0 0 24px}.privacy-data>div{padding:18px 0;border-bottom:1px solid var(--line)}.privacy-data>div:first-child{padding-top:0}.privacy-data dt{font-weight:650;color:var(--paper);margin-bottom:9px}.privacy-data dd{margin:0}.privacy-note,.privacy-contact{background:var(--surface);padding:22px;border-radius:8px;margin-top:24px}.privacy-contact p{margin-top:12px}.privacy-contact>a{display:inline-block;padding-block:8px;color:var(--purple)}
@media(max-width:850px){.privacy-layout{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}.privacy-toc{position:static;border-top:1px solid var(--line);padding-top:24px}.privacy-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}.privacy{padding-block:42px 52px}.privacy-summary{padding:20px}.privacy-body h2{font-size:1.3rem}}
@media(max-width:400px){.privacy-toc ol{grid-template-columns:1fr}.privacy .privacy-lead{font-size:1.25rem}}

/* Language controls and English copy must remain usable on narrow screens. */
.language-switch { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
html[lang="en"] .hero h1 { font-size: clamp(2.5rem, 4.2vw, 3.8rem); letter-spacing: -.035em; }
html[lang="en"] .header nav { flex-wrap: wrap; }
@media (max-width: 600px) { .header { flex-wrap: wrap; gap: 10px; } .header nav { order: 3; width: 100%; justify-content: space-between; gap: 8px; } }

/* Installation maintenance and Synology remote access. */
.maintenance-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:70px;padding-block:72px;border-top:1px solid var(--line)}
.remote-section{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:70px}
.remote-section h2+p{margin-top:24px;color:var(--muted)}
.guide-content{min-width:0;color:var(--muted)}
.guide-content h3{font-size:1.15rem;color:var(--paper);line-height:1.5;margin-bottom:12px}
.guide-list{padding-left:24px;margin-block:20px}.guide-list>li{padding-left:6px;margin-bottom:24px}.guide-list>li::marker{color:var(--purple);font-weight:650}
.guide-list strong,.guide-list b{color:var(--paper)}
.guide-content code{overflow-wrap:anywhere;font-size:.9em;color:var(--paper)}
.guide-detail{border-block:1px solid var(--line);margin-block:20px}.guide-detail summary{cursor:pointer;min-height:48px;padding-block:12px;color:var(--paper)}
.image-reference{display:block;background:var(--surface);padding:18px;margin-bottom:18px;word-break:break-all}
.guide-callout{border-left:2px solid var(--purple);padding:14px 18px;background:var(--surface);font-size:.9rem;margin-top:24px;color:var(--muted)}
.proxy-settings{background:var(--surface);padding:18px 22px;border-radius:6px}.proxy-settings>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;padding-block:12px}.proxy-settings>div+div{border-top:1px solid var(--line)}.proxy-settings dt{color:var(--purple);font-weight:650}.proxy-settings dd{margin:0}
.guide-sources,.maintenance-section .step-note{font-size:.875rem;margin-top:22px;color:var(--muted)}
.guide-sources a,.maintenance-section .step-note a{color:var(--purple);text-decoration:underline;text-underline-offset:4px}
@media(max-width:1000px){.maintenance-section,.remote-section{gap:36px}.header nav{gap:18px}}
@media(max-width:760px){.maintenance-section,.remote-section{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:48px}.proxy-settings{padding:14px}.proxy-settings>div{grid-template-columns:74px minmax(0,1fr);gap:12px}.header nav{gap:8px 16px;justify-content:flex-start}.guide-list{padding-left:20px}}

/* Preserve YAML indentation without overflowing a narrow installation guide. */
.guide-detail pre{max-width:100%;overflow-x:auto;white-space:pre;padding:16px;background:var(--surface);font-size:.85rem;line-height:1.6}

/* Optional router help stays compact until opened; native details works without JS. */
.port-forwarding>p{margin-block:16px}.port-settings>div{grid-template-columns:minmax(80px,110px) minmax(0,1fr)}