


@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/pretendard-regular.woff2') format('woff2')}
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/pretendard-medium.woff2') format('woff2')}
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/pretendard-semibold.woff2') format('woff2')}
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/pretendard-bold.woff2') format('woff2')}
@font-face{font-family:'PretendardLocal';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/pretendard-extrabold.woff2') format('woff2')}


:root{
  
  --sy-bg:#ffffff;
  --sy-ink:#313233;
  --sy-muted:#595757;
  --sy-muted-2:#666565;
  --sy-accent:#d26161;
  --sy-accent-dark:#bf4f3b;
  --sy-pink-300:#f3a7a8;
  --sy-pink-200:#fadcdb;
  --sy-pink-100:#fce7e6;
  --sy-grid:#fdf3f3;
  --sy-rule:#c5b5b4;        
  --sy-rule-soft:#e3d6d6;   

  
  --sy-info-bg:#fce7e6;     --sy-info-fg:#313233;
  --sy-success-bg:#e6f0e7;  --sy-success-fg:#2f6b42;
  --sy-warning-bg:#fbf0d9;  --sy-warning-fg:#7a5312;
  --sy-danger-bg:#f9dedb;   --sy-danger-fg:#9c2f22;

  --sy-font:'PretendardLocal','Pretendard',-apple-system,BlinkMacSystemFont,
            'Segoe UI','Noto Sans KR',sans-serif;
  
  --sy-hand:var(--sy-font);

  
  --sy-fs-display:60px;   
  --sy-fs-title:52px;     
  --sy-fs-head:37px;      
  --sy-fs-store:28px;     
  --sy-fs-nav:20px;
  --sy-fs-lead:20px;      
  --sy-fs-body:18px;      
  --sy-fs-small:17px;     
  --sy-fs-kicker:16px;    
  --sy-fs-chip:15px;
  --sy-fs-label:13px;     

  
  --sy-container:1250px;   
  --sy-header-w:1330px;    
  --sy-inset:86px;         
  --sy-header-h:184px;
  --sy-pitch:28.6px;       
  --sy-pad:24px;           
  --sy-read:760px;         
  --sy-guide:1000px;       
  --sy-illust-w:700px;
  --sy-illust-h:325px;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}


.sy{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--sy-bg);color:var(--sy-ink);
  font-family:var(--sy-font);font-weight:500;
  line-height:1.6;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
.sy a{color:inherit;text-decoration:none}
.sy-main{flex:1 0 auto}


.sy-grid-bg{
  background-image:
    linear-gradient(var(--sy-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--sy-grid) 1px,transparent 1px);
  background-size:var(--sy-pitch) var(--sy-pitch);
  background-position:center top;
}


.sy-wrap{width:min(var(--sy-container),100% - var(--sy-pad)*2);margin-inline:auto}


.sy-topbar{flex:0 0 auto;background:var(--sy-bg)}
.sy-topbar-in{
  width:min(var(--sy-header-w),100% - var(--sy-pad)*2);margin-inline:auto;
  height:var(--sy-header-h);
  display:flex;align-items:center;gap:24px;
  border-bottom:1px solid var(--sy-rule);
}
.sy-logo{flex:0 0 auto;margin-inline-start:67px}
.sy-logo img{height:67px;width:auto}

.sy-nav{margin-inline-start:auto;display:flex;align-items:center;gap:44px;
  font-size:var(--sy-fs-nav);font-weight:700;color:var(--sy-muted);letter-spacing:-.02em}
.sy-nav a{padding:6px 2px}
.sy-nav a:hover{color:var(--sy-accent)}


.sy-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin-inline-start:40px}
.sy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:52px;padding:0 22px;border-radius:0;white-space:nowrap;
  font-family:inherit;font-size:17px;font-weight:700;letter-spacing:-.02em;
  background:var(--sy-accent);color:#fff;border:1px solid var(--sy-accent);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.sy-btn:hover{background:var(--sy-accent-dark);border-color:var(--sy-accent-dark);color:#fff}
.sy-btn--ghost{background:transparent;color:var(--sy-ink);border-color:var(--sy-rule)}
.sy-btn--ghost:hover{background:transparent;color:var(--sy-accent);border-color:var(--sy-accent)}


.sy-hero{position:relative;padding:76px 0 88px;overflow:hidden}
.sy-hero-in{position:relative;text-align:center}

.sy-eyebrow{margin:0 0 8px;font-size:var(--sy-fs-kicker);font-weight:500;
  color:var(--sy-muted-2);letter-spacing:-.02em}

.sy-h1{
  position:relative;display:inline-block;
  margin:0 0 32px;font-family:var(--sy-hand);
  font-size:var(--sy-fs-display);font-weight:800;line-height:1.4;letter-spacing:-.025em;
  color:var(--sy-muted);word-break:keep-all;
}
.sy-h1 em{font-style:normal;color:var(--sy-accent)}

.sy-h1 .sy-heart{position:absolute;top:-16px;right:-54px;width:42px;height:auto}

.sy-lead{margin:0 0 29px;font-size:var(--sy-fs-lead);font-weight:500;line-height:1.65;
  color:var(--sy-ink);word-break:keep-all}

.sy-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.sy-cta .sy-btn{height:52px;min-width:189px;padding:0 26px;font-size:var(--sy-fs-lead);gap:14px}
.sy-cta .sy-btn::after{content:"";width:0;height:0;
  border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}


.sy-bubble{position:absolute;width:225px;height:auto;pointer-events:none;user-select:none}
.sy-bubble--l{left:82px;top:84px}
.sy-bubble--r{right:117px;top:261px;transform:scaleX(-1)}


.sy-br{display:inline}


.sy-band{background:var(--sy-pink-200);padding:143px 0 103px;text-align:center}
.sy-band h2{margin:0;font-family:var(--sy-hand);
  font-size:var(--sy-fs-title);font-weight:700;line-height:1.5;letter-spacing:-.03em;
  color:var(--sy-muted);word-break:keep-all}
.sy-band em{font-style:normal;color:var(--sy-accent);font-weight:800}


.sy-band .sy-lede{position:relative;display:inline-block}
.sy-band .sy-lede .sy-heart{position:absolute;left:-40px;top:-46px;width:51px;height:auto}

.sy-band--private{padding:130px 0 134px}
.sy-band--private .sy-kicker{color:var(--sy-accent);margin:0 0 28px;font-size:14px}
.sy-band-sub{margin:24px 0 0;font-size:var(--sy-fs-lead);font-weight:500;line-height:1.5;
  color:var(--sy-muted-2);word-break:keep-all}


.sy-howto{padding:112px 0 0;text-align:center}
.sy-kicker{margin:0 0 55px;font-size:var(--sy-fs-kicker);font-weight:800;letter-spacing:.06em;
  color:var(--sy-accent)}
.sy-howto h2{margin:0 0 30px;font-family:var(--sy-hand);
  font-size:var(--sy-fs-title);font-weight:700;line-height:1.48;letter-spacing:-.03em;
  color:var(--sy-ink);word-break:keep-all}
.sy-howto p{margin:0;font-size:var(--sy-fs-body);font-weight:500;line-height:1.67;
  color:var(--sy-muted-2);word-break:keep-all}

.sy-howto::after{content:"";display:block;width:1px;height:60px;margin:68px auto 0;
  background:var(--sy-accent);opacity:.3}


.sy-features{padding:75px 0 0}

.sy-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--sy-illust-w));
  gap:24px;align-items:center;
  padding:62px 0 70px;
  border-top:1px solid var(--sy-rule-soft);
}
.sy-feat-text{padding-inline-start:var(--sy-inset);padding-inline-end:16px}

.sy-feat-no{margin:0 0 40px;font-size:var(--sy-fs-label);font-weight:600;color:var(--sy-muted-2)}
.sy-feat-no b{font-weight:800;color:var(--sy-accent);margin-inline-end:6px}

.sy-feature h3{margin:0 0 12px;font-family:var(--sy-hand);
  font-size:var(--sy-fs-head);font-weight:800;line-height:1.46;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-feature p{margin:0;font-size:var(--sy-fs-small);font-weight:500;line-height:1.7;
  color:var(--sy-muted-2);word-break:keep-all}


.sy-chips{display:flex;gap:29px;flex-wrap:wrap;margin:22px 0 0}
.sy-chip{display:inline-flex;align-items:center;height:31px;padding:0 26px;
  background:var(--sy-pink-200);color:var(--sy-accent);
  font-size:var(--sy-fs-chip);font-weight:800;letter-spacing:-.02em}


.sy-illust{position:relative;display:grid;place-items:center}
.sy-illust img{height:var(--sy-illust-h);width:auto;max-width:100%;margin-inline:auto}


.sy-store{padding:128px 0 150px;text-align:center}
.sy-store h2{margin:0 0 22px;font-family:var(--sy-hand);
  font-size:var(--sy-fs-title);font-weight:700;line-height:1.4;letter-spacing:-.03em;
  color:var(--sy-ink);word-break:keep-all}
.sy-store h2 em{font-style:normal;color:var(--sy-accent)}
.sy-store p{margin:0 0 86px;font-size:var(--sy-fs-lead);font-weight:500;color:var(--sy-muted-2)}


.sy-stores{display:flex;justify-content:center;gap:52px;flex-wrap:wrap}
.sy-store-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  width:389px;height:103px;background:var(--sy-pink-200);color:var(--sy-ink);
  font-size:var(--sy-fs-store);font-weight:600;letter-spacing:-.02em;
  box-shadow:7px 7px 0 rgba(49,50,51,.06);
  transition:transform .15s,box-shadow .15s;
}
.sy-store-btn:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 rgba(49,50,51,.06)}
.sy-store-btn svg{flex:0 0 auto;width:42px;height:42px}

.sy-store-btn[aria-disabled="true"]{cursor:default}
.sy-store-btn[aria-disabled="true"]:hover{transform:none;box-shadow:7px 7px 0 rgba(49,50,51,.06)}


.sy-footer{flex:0 0 auto;background:var(--sy-bg);border-top:1px solid var(--sy-rule-soft)}
.sy-footer-in{
  width:min(var(--sy-header-w),100% - var(--sy-pad)*2);margin-inline:auto;
  padding:48px 67px 56px;
  display:flex;gap:28px 48px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
}

.sy-foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sy-foot-brand img{height:34px;width:auto;flex:0 0 auto}
.sy-foot-copy{font-size:14px;font-weight:500;color:var(--sy-muted-2)}
.sy-foot-links{display:flex;flex-wrap:wrap;gap:12px 26px;
  font-size:15px;font-weight:600;color:var(--sy-muted)}
.sy-foot-links a{white-space:nowrap}
.sy-foot-links a:hover{color:var(--sy-accent)}




@media (max-width:1180px){
  :root{
    --sy-fs-display:48px; --sy-fs-title:40px; --sy-fs-head:30px; --sy-fs-store:22px;
    --sy-fs-nav:16px; --sy-fs-lead:18px; --sy-fs-body:16px; --sy-fs-small:16px;
    --sy-inset:40px; --sy-header-h:132px; --sy-illust-w:460px; --sy-illust-h:300px;
  }
  .sy-logo{margin-inline-start:0}
  .sy-logo img{height:48px}
  .sy-nav{gap:24px}
  .sy-actions{margin-inline-start:24px}
  .sy-btn{height:46px;font-size:15px}
  .sy-cta .sy-btn{height:48px;min-width:168px}
  .sy-hero{padding:56px 0 76px}
  .sy-bubble{width:170px}
  .sy-bubble--l{left:24px;top:64px}
  .sy-bubble--r{right:24px;top:210px}
  .sy-band{padding:76px 0 92px}
  .sy-band--private{padding:92px 0 100px}
  .sy-howto{padding:84px 0 0}
  .sy-store{padding:92px 0 104px}
  .sy-store p{margin-bottom:56px}
  .sy-store-btn{width:300px;height:82px}
  .sy-footer-in{padding:40px 32px 44px}
}


@media (max-width:860px){
  :root{
    --sy-fs-display:40px; --sy-fs-title:30px; --sy-fs-head:26px;
    --sy-fs-lead:16px; --sy-fs-body:15px; --sy-fs-small:15px; --sy-fs-kicker:14px;
    --sy-inset:24px; --sy-pad:18px;
  }
  .sy-bubble{display:none}          
  .sy-h1 .sy-heart{width:30px;top:-10px;right:-36px}
  .sy-band .sy-lede .sy-heart{width:32px;left:-28px;top:-38px}
  .sy-howto::after{height:64px;margin-top:44px}
  .sy-features{padding:44px 0 0}
  .sy-feature{grid-template-columns:minmax(0,1fr);gap:28px;padding:52px 0 44px}
  .sy-feature{align-items:stretch}
  .sy-feat-text{padding-inline:var(--sy-inset)}
  .sy-illust{order:-1;padding-inline:var(--sy-inset)}
  .sy-illust img{height:auto;width:100%;max-width:420px;margin-inline:auto}
}


@media (max-width:600px){
  :root{
    --sy-fs-display:31px; --sy-fs-title:24px; --sy-fs-head:22px; --sy-fs-store:17px;
    --sy-fs-nav:12.5px; --sy-fs-lead:15px; --sy-fs-body:14px; --sy-fs-small:14px;
    --sy-fs-kicker:13px; --sy-fs-label:12px; --sy-fs-chip:13px;
    --sy-pitch:20px; --sy-header-h:64px; --sy-pad:16px; --sy-inset:16px;
  }
  .sy-br{display:none}              
  .sy-topbar-in{gap:10px}
  .sy-logo img{height:32px}
  
  .sy-nav{gap:12px;font-weight:600}
  .sy-nav a{padding:4px 0}
  .sy-actions{display:none}         
  .sy-hero{padding:40px 0 48px}
  .sy-h1{margin-bottom:20px}
  .sy-h1 .sy-heart{width:22px;top:-8px;right:-26px}
  .sy-lead{line-height:1.8;margin-bottom:26px}
  .sy-cta .sy-btn{height:48px;min-width:0;width:100%;max-width:280px}
  .sy-band{padding:52px 0 56px}
  .sy-band h2{line-height:1.55}
  .sy-band--private{padding:56px 0 60px}
  .sy-band--private .sy-kicker{margin-bottom:18px;font-size:12px}
  .sy-band-sub{margin-top:16px}
  .sy-band .sy-lede .sy-heart{width:24px;left:-20px;top:-28px}
  .sy-howto{padding:52px 0 0}
  .sy-howto h2{margin-bottom:18px}
  .sy-howto::after{height:44px;margin-top:30px}
  .sy-kicker{margin-bottom:18px}
  .sy-features{padding:30px 0 0}
  .sy-feature{padding:36px 0 32px;gap:22px}
  .sy-feat-no{margin-bottom:16px}
  .sy-feature h3{margin-bottom:12px}
  .sy-chips{gap:10px;margin-top:18px}
  .sy-chip{height:29px;padding:0 15px}
  .sy-illust img{height:auto;width:100%;max-width:280px}
  .sy-store{padding:56px 0 64px}
  .sy-store h2{margin-bottom:14px}
  .sy-store p{margin-bottom:32px}
  .sy-stores{gap:14px}
  .sy-store-btn{width:100%;max-width:280px;height:60px;box-shadow:4px 4px 0 rgba(49,50,51,.06)}
  .sy-store-btn svg{width:24px;height:24px}
  .sy-footer-in{padding:30px 16px 36px;gap:20px}
  .sy-foot-brand img{height:26px}
  .sy-foot-links{font-size:13px;gap:8px 16px}
}


@media (max-width:360px){
  .sy-nav{gap:9px;font-size:11.5px}
  .sy-logo img{height:28px}
}

@media (prefers-reduced-motion:reduce){
  .sy-store-btn{transition:none}
  .sy-store-btn:hover{transform:none}
}




body .sy-banner{
  font-family:var(--sy-font);font-size:14px;font-weight:600;
  letter-spacing:-.015em;border-bottom:1px solid var(--sy-rule-soft);
}
body .sy-banner.sev-INFO{background:var(--sy-info-bg);color:var(--sy-info-fg)}
body .sy-banner.sev-WARNING{background:var(--sy-warning-bg);color:var(--sy-warning-fg)}
body .sy-banner.sev-CRITICAL{background:var(--sy-danger-bg);color:var(--sy-danger-fg)}

body .sy-popup{
  background:var(--sy-bg);color:var(--sy-ink);
  border:1px solid var(--sy-rule);border-radius:0;
  box-shadow:8px 8px 0 rgba(49,50,51,.10);
}
body .sy-popup-title{
  font-family:var(--sy-font);font-size:21px;font-weight:800;
  letter-spacing:-.03em;color:var(--sy-ink);
}
body .sy-popup-text{font-size:15px;line-height:1.7;color:var(--sy-muted-2)}
body .sy-popup-btn{
  background:var(--sy-accent);border:1px solid var(--sy-accent);color:#fff;
  border-radius:0;font-family:var(--sy-font);font-size:15px;font-weight:700;padding:13px;
}
body .sy-popup-btn:hover{background:var(--sy-accent-dark);border-color:var(--sy-accent-dark);opacity:1}
body .sy-popup-foot{background:var(--sy-pink-100);border-top:1px solid var(--sy-rule-soft)}
body .sy-popup-foot button{font-family:var(--sy-font);font-size:13px;color:var(--sy-muted-2)}
body .sy-popup-foot button:hover{color:var(--sy-accent)}


@keyframes syPopupPulse{
  0%,100%{box-shadow:8px 8px 0 rgba(49,50,51,.10)}
  50%{box-shadow:8px 8px 0 rgba(49,50,51,.10),0 0 0 3px color-mix(in srgb,var(--sy-accent) 55%,transparent)}
}



.sy-callout{
  display:block;padding:16px 20px;border-left:3px solid currentColor;
  font-size:15px;font-weight:600;line-height:1.7;word-break:keep-all;
  background:var(--sy-info-bg);color:var(--sy-info-fg);
}
.sy-callout--success{background:var(--sy-success-bg);color:var(--sy-success-fg)}
.sy-callout--warning{background:var(--sy-warning-bg);color:var(--sy-warning-fg)}
.sy-callout--danger{background:var(--sy-danger-bg);color:var(--sy-danger-fg)}

.sy-callout{margin:26px 0}
.sy-callout:last-child{margin-bottom:0}

.sy-callout{border-inline-start-color:var(--sy-accent)}
.sy-callout--success,.sy-callout--warning,.sy-callout--danger{
  border-inline-start-color:currentColor}


.sy-doc-wrap{width:min(var(--sy-read),100% - var(--sy-pad)*2);margin-inline:auto;
  padding:72px 0 96px}
.sy-doc-title{margin:0 0 10px;font-family:var(--sy-hand);
  font-size:44px;font-weight:800;line-height:1.3;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-doc-meta{margin:0 0 36px;font-size:14px;font-weight:500;color:var(--sy-muted-2);
  font-variant-numeric:tabular-nums}
.sy-doc-wrap .sy-callout{margin:0 0 36px}

.sy-doc{font-size:17px;font-weight:500;line-height:1.9;color:var(--sy-ink);word-break:keep-all}
.sy-doc h2{
  margin:52px 0 14px;padding-top:26px;border-top:1px solid var(--sy-rule-soft);
  font-size:23px;font-weight:800;line-height:1.5;letter-spacing:-.03em;color:var(--sy-ink);
}
.sy-doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.sy-doc p{margin:0 0 18px}
.sy-doc b{font-weight:700;color:var(--sy-ink)}
.sy-doc ul{margin:0 0 18px;padding:0;list-style:none}
.sy-doc li{position:relative;padding-inline-start:18px;margin-bottom:8px;color:var(--sy-muted-2)}
.sy-doc li::before{content:"";position:absolute;inset-inline-start:2px;top:.78em;
  width:5px;height:5px;background:var(--sy-accent)}
.sy-doc > :last-child{margin-bottom:0}

.sy-doc-back{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--sy-rule-soft);
  font-size:15px;font-weight:600}
.sy-doc-back a{color:var(--sy-muted-2)}
.sy-doc-back a:hover{color:var(--sy-accent)}


.sy-err{min-height:100vh;display:grid;place-items:center;padding:40px 24px;text-align:center}
.sy-err-in{max-width:520px}

.sy-err .sy-err-code{margin:0 0 6px;font-size:96px;font-weight:800;line-height:1;
  letter-spacing:-.05em;color:var(--sy-accent);font-variant-numeric:tabular-nums}
.sy-err h1{margin:0 0 14px;font-family:var(--sy-hand);
  font-size:34px;font-weight:800;line-height:1.35;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-err p{margin:0 0 34px;font-size:17px;line-height:1.8;color:var(--sy-muted-2);
  word-break:keep-all}
.sy-err-reason{display:block;margin-top:10px;font-size:13px;color:var(--sy-muted-2);opacity:.75}
.sy-err .sy-btn{min-width:200px}

@media (max-width:600px){
  .sy-doc-wrap{padding:44px 0 64px}
  .sy-doc-title{font-size:30px}
  .sy-doc-meta{margin-bottom:26px;font-size:13px}
  .sy-doc{font-size:16px;line-height:1.85}
  .sy-doc h2{margin-top:40px;padding-top:22px;font-size:20px}
  .sy-callout{padding:14px 16px;font-size:14px}
  .sy-err .sy-err-code{font-size:64px}
  .sy-err h1{font-size:25px}
  .sy-err p{font-size:15px;margin-bottom:28px}
}




.sy-auth{min-height:100vh;display:grid;place-items:center;padding:48px 20px}
.sy-auth-box{
  width:min(460px,100%);background:var(--sy-bg);
  border:1px solid var(--sy-rule);padding:44px 40px 38px;
}
.sy-auth-mark{display:block;width:fit-content;margin:0 auto 12px}
.sy-auth-mark img{height:38px;width:auto}
.sy-auth-tag{margin:0 0 28px;text-align:center;font-size:15px;font-weight:500;
  color:var(--sy-muted-2);word-break:keep-all}
.sy-auth-box .sy-callout{margin:0 0 20px}


.sy-f-group{margin:0 0 18px}
.sy-f-label{display:block;margin:0 0 8px;font-size:14px;font-weight:700;
  letter-spacing:-.02em;color:var(--sy-ink)}
.sy-f-input{
  display:block;width:100%;height:52px;padding:0 15px;
  font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-.01em;
  color:var(--sy-ink);background:var(--sy-bg);
  border:1px solid var(--sy-rule-soft);border-radius:0;
  transition:border-color .15s,box-shadow .15s;
}
.sy-f-input::placeholder{color:var(--sy-muted-2);opacity:.6}
.sy-f-input:hover{border-color:var(--sy-rule)}
.sy-f-input:focus{outline:none;border-color:var(--sy-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sy-accent) 18%,transparent)}
.sy-f-input:disabled{background:var(--sy-pink-100);color:var(--sy-muted-2);cursor:not-allowed}
.sy-f-input[aria-invalid="true"]{border-color:var(--sy-danger-fg)}


.sy-f-row{display:flex;gap:8px}
.sy-f-row .sy-f-input{flex:1 1 auto;min-width:0}
.sy-f-row .sy-btn{flex:0 0 auto;height:52px;padding:0 16px;font-size:14px}


.sy-f-hint{margin:8px 0 0;font-size:13px;font-weight:500;line-height:1.6;
  color:var(--sy-muted-2);word-break:keep-all;min-height:1.2em}
.sy-f-hint--ok{color:var(--sy-success-fg)}
.sy-f-hint--error{color:var(--sy-danger-fg)}


.sy-keep{display:flex;align-items:flex-start;gap:10px;margin:2px 0 18px;
  cursor:pointer;font-size:14px;line-height:1.5;color:var(--sy-muted-2);word-break:keep-all}
.sy-keep input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--sy-accent);cursor:pointer}
.sy-keep em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--sy-muted-2)}


.sy-agree{margin:24px 0 26px;border:1px solid var(--sy-rule-soft)}
.sy-agree-all{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
  padding:15px 16px;background:var(--sy-pink-100);cursor:pointer}
.sy-agree-all b{font-size:15px;font-weight:800;color:var(--sy-ink)}
.sy-agree-sub{flex:1 1 100%;font-size:12.5px;color:var(--sy-muted-2)}
.sy-agree-list{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px}
.sy-agree-item{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:14px;line-height:1.6;color:var(--sy-muted-2);word-break:keep-all}
.sy-agree-item a{color:var(--sy-accent);text-decoration:underline}
.sy-agree input[type=checkbox]{
  flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--sy-accent);cursor:pointer;
}


.sy-btn--block{display:flex;width:100%}
.sy-btn--kakao{
  background:#FEE500;border-color:#FEE500;color:#191600;
}
.sy-btn--kakao:hover{background:#f2da00;border-color:#f2da00;color:#191600}
.sy-btn--kakao svg{width:19px;height:19px;flex:0 0 auto}


.sy-auth-or{display:flex;align-items:center;gap:12px;margin:20px 0;
  font-size:13px;font-weight:600;color:var(--sy-muted-2)}
.sy-auth-or::before,.sy-auth-or::after{content:"";flex:1;height:1px;background:var(--sy-rule-soft)}


.sy-auth-alt{margin:16px 0 0;text-align:center;font-size:14px;color:var(--sy-muted-2)}
.sy-auth-alt a{color:var(--sy-accent);font-weight:700}
.sy-auth-alt a:hover{color:var(--sy-accent-dark);text-decoration:underline}
.sy-auth-alt + .sy-auth-alt{margin-top:8px}


.sy-auth-foot{margin:26px 0 0;text-align:center;font-size:12.5px;color:var(--sy-muted-2);
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px}
.sy-auth-foot a{color:var(--sy-muted-2)}
.sy-auth-foot a:hover{color:var(--sy-accent)}

@media (max-width:600px){
  .sy-auth{padding:28px 16px;place-items:start center}
  .sy-auth-box{padding:32px 22px 28px;border-left:0;border-right:0;
    width:calc(100% + 32px);margin-inline:-16px}
  .sy-auth-mark img{height:32px}
  .sy-auth-tag{margin-bottom:22px;font-size:14px}
  .sy-f-row{flex-wrap:wrap}
  .sy-f-row .sy-btn{width:100%}
}




.sy-guide{width:min(var(--sy-guide),100% - var(--sy-pad)*2);margin-inline:auto;padding:0 0 96px}

.sy-guide-hero{padding:72px 0 56px;text-align:center}
.sy-guide-hero h1{margin:0 0 14px;font-family:var(--sy-hand);
  font-size:44px;font-weight:800;line-height:1.3;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-guide-hero p{margin:0 auto;max-width:38em;font-size:17px;font-weight:500;line-height:1.85;
  color:var(--sy-muted-2);word-break:keep-all}
.sy-guide-hero .sy-cta{margin-top:30px}

.sy-sec{padding:52px 0 0;border-top:1px solid var(--sy-rule-soft)}
.sy-sec > h2{margin:0 0 10px;font-family:var(--sy-hand);
  font-size:30px;font-weight:800;line-height:1.4;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-sec-lead{margin:0 0 28px;font-size:16px;font-weight:500;line-height:1.8;
  color:var(--sy-muted-2);word-break:keep-all}
.sy-sec + .sy-sec{margin-top:52px}

.sy-sec--quiet{padding-top:44px}
.sy-sec--quiet > h2{font-size:23px;letter-spacing:-.03em;color:var(--sy-muted)}
.sy-sec--quiet + .sy-sec--quiet{margin-top:38px}
.sy-sec h3{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--sy-ink)}


.sy-tablewrap{overflow-x:auto;border:1px solid var(--sy-rule-soft)}
.sy-table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.sy-table th,.sy-table td{text-align:left;padding:14px 18px;
  border-bottom:1px solid var(--sy-rule-soft);vertical-align:top;line-height:1.6}
.sy-table thead th{background:var(--sy-pink-100);font-size:13px;font-weight:800;
  letter-spacing:.02em;color:var(--sy-ink);white-space:nowrap}
.sy-table tbody tr:last-child th,.sy-table tbody tr:last-child td{border-bottom:0}
.sy-table td:first-child{font-weight:700;color:var(--sy-ink)}
.sy-table .sy-t-free{color:var(--sy-muted-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sy-table .sy-t-plus{color:var(--sy-accent);font-weight:700;white-space:nowrap}


.sy-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:2px}
.sy-tile{border:1px solid var(--sy-rule-soft);padding:22px 20px 20px;background:var(--sy-bg)}
.sy-tile .ico{font-size:26px;line-height:1;margin-bottom:12px}
.sy-tile h3{margin:0 0 7px}
.sy-tile p{margin:0;font-size:14px;line-height:1.75;color:var(--sy-muted-2);word-break:keep-all}


.sy-steps{list-style:none;margin:0;padding:0;counter-reset:sy-step;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px}
.sy-steps li{counter-increment:sy-step;position:relative;
  border:1px solid var(--sy-rule-soft);padding:44px 20px 22px;background:var(--sy-bg)}
.sy-steps li::before{content:counter(sy-step);position:absolute;top:-1px;left:-1px;
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--sy-accent);color:#fff;font-size:14px;font-weight:800}
.sy-steps h3{margin:0 0 8px}
.sy-steps p{margin:0;font-size:14px;line-height:1.75;color:var(--sy-muted-2);word-break:keep-all}


.sy-faq{border:1px solid var(--sy-rule-soft);background:var(--sy-bg)}
.sy-faq details{border-bottom:1px solid var(--sy-rule-soft)}
.sy-faq details:last-child{border-bottom:0}
.sy-faq summary{
  display:flex;align-items:flex-start;gap:12px;list-style:none;cursor:pointer;
  padding:17px 20px;font-size:16px;font-weight:700;letter-spacing:-.02em;
  color:var(--sy-ink);word-break:keep-all;
}
.sy-faq summary::-webkit-details-marker{display:none}
.sy-faq summary::before{content:"Q";flex:0 0 auto;width:20px;
  font-size:15px;font-weight:800;color:var(--sy-accent)}
.sy-faq summary::after{content:"";flex:0 0 auto;margin-inline-start:auto;margin-top:.42em;
  width:8px;height:8px;border-right:2px solid var(--sy-muted-2);border-bottom:2px solid var(--sy-muted-2);
  transform:rotate(45deg);transition:transform .18s}
.sy-faq details[open] summary::after{transform:rotate(-135deg)}
.sy-faq summary:hover{color:var(--sy-accent)}
.sy-faq .sy-faq-a{padding:0 20px 20px 52px;font-size:15px;line-height:1.85;
  color:var(--sy-muted-2);white-space:pre-line;word-break:keep-all}
.sy-faq .sy-faq-a a{color:var(--sy-accent);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.sy-faq summary::after{transition:none}}


.sy-app{display:grid;grid-template-columns:170px minmax(0,1fr);gap:26px;align-items:center;
  border:1px solid var(--sy-rule-soft);padding:26px}
.sy-qr{width:170px;height:170px;display:grid;place-items:center;text-align:center;
  border:2px dashed var(--sy-rule);background:var(--sy-pink-100);
  font-size:13px;font-weight:600;line-height:1.6;color:var(--sy-muted-2)}
.sy-app p{margin:0 0 8px;font-size:14.5px;line-height:1.8;color:var(--sy-muted-2);word-break:keep-all}
.sy-soon{display:inline-block;margin-top:8px;padding:5px 11px;
  background:var(--sy-pink-200);color:var(--sy-accent-on-pink);font-size:12.5px;font-weight:800}


.sy-contact{border:1px solid var(--sy-rule-soft);padding:28px 26px;margin-top:52px}
.sy-contact h2,.sy-contact h3{margin:0 0 10px}
.sy-contact p{margin:0 0 10px;font-size:15px;line-height:1.8;color:var(--sy-muted-2);word-break:keep-all}
.sy-contact p:last-child{margin-bottom:0}
.sy-contact a{color:var(--sy-accent);font-weight:600}
.sy-contact a:hover{text-decoration:underline}
.sy-contact form{margin-top:20px}
.sy-contact .sy-callout{margin:0 0 18px}


.sy-f-select{
  display:block;width:100%;height:52px;padding:0 40px 0 15px;
  font-family:inherit;font-size:16px;font-weight:500;color:var(--sy-ink);
  background:var(--sy-bg) no-repeat right 15px center;
  background-image:linear-gradient(45deg,transparent 50%,var(--sy-muted-2) 50%),
                   linear-gradient(135deg,var(--sy-muted-2) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;background-position:right 19px center,right 13px center;
  border:1px solid var(--sy-rule-soft);border-radius:0;appearance:none;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.sy-f-textarea{
  display:block;width:100%;min-height:150px;padding:14px 15px;resize:vertical;
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.7;color:var(--sy-ink);
  background:var(--sy-bg);border:1px solid var(--sy-rule-soft);border-radius:0;
  transition:border-color .15s,box-shadow .15s;
}
.sy-f-textarea::placeholder{color:var(--sy-muted-2);opacity:.6}
.sy-f-select:hover,.sy-f-textarea:hover{border-color:var(--sy-rule)}
.sy-f-select:focus,.sy-f-textarea:focus{outline:none;border-color:var(--sy-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sy-accent) 18%,transparent)}
.sy-f-foot{margin-top:18px;display:flex;justify-content:flex-end}

@media (max-width:860px){
  .sy-app{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
}
@media (max-width:600px){
  .sy-guide{padding-bottom:64px}
  .sy-guide-hero{padding:44px 0 40px}
  .sy-guide-hero h1{font-size:30px}
  .sy-guide-hero p{font-size:15px}
  .sy-sec{padding-top:40px}
  .sy-sec + .sy-sec{margin-top:40px}
  .sy-sec > h2{font-size:24px}
  .sy-sec-lead{margin-bottom:22px;font-size:15px}
  
  .sy-table{min-width:0;font-size:13px}
  .sy-table th,.sy-table td{padding:11px 10px}
  .sy-table thead th{font-size:11.5px}
  .sy-table td:first-child{word-break:keep-all}
  .sy-faq summary{padding:15px 16px;font-size:15px}
  .sy-faq .sy-faq-a{padding:0 16px 18px 42px;font-size:14px}
  .sy-contact{padding:22px 18px;margin-top:40px}
  .sy-f-foot .sy-btn{width:100%}
}





.sy-head{padding:56px 0 26px}
.sy-head h1{margin:0 0 8px;font-family:var(--sy-hand);
  font-size:36px;font-weight:800;line-height:1.3;letter-spacing:-.035em;
  color:var(--sy-ink);word-break:keep-all}
.sy-head p{margin:0;font-size:15px;line-height:1.75;color:var(--sy-muted-2);word-break:keep-all}


.sy-back{display:inline-block;margin:36px 0 18px;font-size:14px;font-weight:600;
  color:var(--sy-muted-2)}
.sy-back:hover{color:var(--sy-accent)}


.gd-lead{font-size:15px;color:var(--sy-muted-2);margin:6px 0 0;line-height:1.75}
.gd-count{font-size:13px;color:var(--sy-muted-2);margin:0 0 18px}
.gd-count b{color:var(--sy-ink);font-weight:700}

.gd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px;align-items:start}
.sy a.gd-card{display:block;color:inherit}
.gd-thumb{position:relative;width:100%;aspect-ratio:1/1;
  border:1px solid var(--sy-rule-soft);background:var(--sy-pink-100);
  display:grid;place-items:center;text-align:center;color:var(--sy-muted-2);
  font-size:12px;line-height:1.7;transition:border-color .16s}
.gd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sy a.gd-card:hover .gd-thumb{border-color:var(--sy-accent)}
.sy a.gd-card:hover .gd-title{color:var(--sy-accent)}

.gd-body{padding:12px 2px 0}
.gd-badge{display:inline-block;margin-bottom:7px;padding:3px 8px;font-size:11px;font-weight:800;
  background:var(--sy-pink-200);color:var(--sy-accent-on-pink)}
.gd-name{font-family:var(--sy-hand);font-size:19px;font-weight:800;letter-spacing:-.03em;
  color:var(--sy-ink);margin:0 0 4px;line-height:1.3}
.gd-title{font-size:13.5px;line-height:1.6;color:var(--sy-muted-2);margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:keep-all;transition:color .16s}
.gd-price{font-size:13.5px;font-weight:700;color:var(--sy-accent);margin:0 0 5px;
  line-height:1.5;word-break:keep-all}
.gd-meta{font-size:12px;color:var(--sy-muted-2);margin:0;line-height:1.6;opacity:.85}

.gd-notice{margin-top:44px;padding-top:22px;border-top:1px solid var(--sy-rule-soft);
  font-size:12.5px;line-height:1.9;color:var(--sy-muted-2)}
.gd-notice b{color:var(--sy-ink)}


.gd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-bottom:36px}
.gd-shots{display:flex;flex-direction:column;gap:10px}
.gd-shot{width:100%;aspect-ratio:1/1;border:1px solid var(--sy-rule-soft);background:var(--sy-pink-100);
  display:grid;place-items:center;text-align:center;color:var(--sy-muted-2);
  font-size:13px;line-height:1.7;padding:16px}
.gd-shot img{width:100%;height:100%;object-fit:cover;display:block}
.gd-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.gd-thumbs .gd-thumb{aspect-ratio:1/1;display:block;padding:0;cursor:pointer;overflow:hidden}
.gd-thumbs .gd-thumb[aria-current="true"]{border-color:var(--sy-accent)}

.gd-fullname{font-size:21px;font-weight:800;line-height:1.45;letter-spacing:-.025em;
  color:var(--sy-ink);margin:0 0 8px;word-break:keep-all}
.gd-hero-copy{font-size:14px;line-height:1.75;color:var(--sy-muted-2);margin:0 0 20px;word-break:keep-all}
.gd-price-val{font-size:20px;font-weight:800;color:var(--sy-ink);line-height:1.4;word-break:keep-all}
.gd-hero .gd-price{padding:15px 0;border-top:2px solid var(--sy-ink);
  border-bottom:1px solid var(--sy-rule-soft);margin:0 0 2px}
.gd-facts{margin:0 0 22px}
.gd-fact{display:grid;grid-template-columns:82px 1fr;gap:12px;padding:10px 0;
  font-size:13.5px;line-height:1.7;border-bottom:1px solid var(--sy-rule-soft)}
.gd-fact dt{color:var(--sy-muted-2)}
.gd-fact dd{margin:0;color:var(--sy-ink);word-break:keep-all}


.gd-opts{margin:0 0 20px}
.gd-opt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px;
  padding:10px 12px;border:1px solid var(--sy-rule-soft);background:var(--sy-pink-100);
  margin-bottom:6px;font-size:13.5px;line-height:1.6}
.gd-opt b{color:var(--sy-ink);font-weight:700}
.gd-opt em{font-style:normal;font-size:11.5px;color:var(--sy-accent);white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}


.gd-buy{border:1px solid var(--sy-rule-soft);background:var(--sy-bg);padding:20px}
.gd-buy-t{font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--sy-muted-2);margin:0 0 12px}
.sy .gd-in{width:100%;box-sizing:border-box;background:var(--sy-bg);
  border:1px solid var(--sy-rule-soft);border-radius:0;padding:12px 13px;
  font-family:inherit;font-size:16px;color:var(--sy-ink);margin-bottom:8px;
  transition:border-color .15s,box-shadow .15s}
.sy .gd-in:focus{outline:none;border-color:var(--sy-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sy-accent) 18%,transparent)}
.sy textarea.gd-in{min-height:96px;line-height:1.7;resize:vertical}
.gd-agree{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.7;
  color:var(--sy-muted-2);margin:6px 0 14px;cursor:pointer}
.gd-agree input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--sy-accent)}
.gd-agree a{color:var(--sy-accent)}
.sy a.gd-kakao{display:flex;width:100%;box-sizing:border-box;margin-bottom:8px}
.gd-or{margin:16px 0 10px;font-size:12px;color:var(--sy-muted-2);text-align:center;
  display:flex;align-items:center;gap:10px}
.gd-or::before,.gd-or::after{content:"";flex:1;height:1px;background:var(--sy-rule-soft)}
.gd-msg{padding:14px 18px;margin:0 0 18px;font-size:14.5px;line-height:1.7;
  border-left:3px solid currentColor}
.gd-msg.ok{background:var(--sy-success-bg);color:var(--sy-success-fg)}
.gd-msg.no{background:var(--sy-danger-bg);color:var(--sy-danger-fg)}


.gd-detail{border-top:2px solid var(--sy-ink);margin-top:10px}
.gd-detail-tab{display:flex;border-bottom:1px solid var(--sy-rule-soft);margin-bottom:28px}
.gd-detail-tab span{padding:14px 20px;font-size:14px;font-weight:800;color:var(--sy-ink);
  border-bottom:2px solid var(--sy-ink);margin-bottom:-1px}
.gd-imgs{max-width:860px;margin:0 auto;font-size:0}
.gd-imgs img{width:100%;display:block}
.gd-imgs-empty{padding:64px 20px;text-align:center;color:var(--sy-muted-2);
  font-size:13.5px;line-height:1.8;border:1px dashed var(--sy-rule);background:var(--sy-pink-100)}


.gd-notice-t{font-size:14px;font-weight:800;color:var(--sy-ink);margin:40px 0 12px}
.gd-specs{margin:0;border-top:1px solid var(--sy-ink)}
.gd-spec{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:11px 12px;
  border-bottom:1px solid var(--sy-rule-soft);font-size:13px;line-height:1.7}
.gd-spec dt{color:var(--sy-muted-2)}
.gd-spec dd{margin:0;color:var(--sy-ink);word-break:keep-all}
.gd-seller{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--sy-rule-soft);
  font-size:12.5px;line-height:1.85;color:var(--sy-muted-2)}
.gd-seller b{color:var(--sy-ink)}

@media(max-width:1000px){.gd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){
  .gd-hero{grid-template-columns:minmax(0,1fr);gap:24px}
  .gd-spec{grid-template-columns:104px 1fr}
}
@media(max-width:760px){.gd-grid{grid-template-columns:1fr 1fr;gap:22px 14px}}
@media(max-width:600px){
  .sy-head{padding:40px 0 20px}
  .sy-head h1{font-size:26px}
  .sy-back{margin:24px 0 14px}
  .gd-fullname{font-size:19px}
  .gd-buy{padding:16px}
  .gd-detail-tab span{padding:12px 16px;font-size:13px}
  .gd-imgs-empty{padding:44px 16px}
}
@media(max-width:420px){.gd-grid{grid-template-columns:minmax(0,1fr)}}




.sy-appbar{flex:0 0 auto;position:sticky;top:0;z-index:40;background:var(--sy-bg);
  border-bottom:1px solid var(--sy-rule)}
.sy-appbar-in{
  width:min(var(--sy-header-w),100% - var(--sy-pad)*2);margin-inline:auto;
  height:76px;display:flex;align-items:center;gap:20px;
}
.sy-appbar .sy-logo{margin-inline-start:0}
.sy-appbar .sy-logo img{height:34px}


.sy-anav{display:flex;align-items:stretch;height:76px;margin-inline-start:22px}
.sy-anav-group{position:relative;display:flex;align-items:stretch}
.sy-anav-top{
  display:flex;align-items:center;height:100%;padding:0 15px;border:0;background:none;
  font-family:inherit;font-size:15.5px;font-weight:700;letter-spacing:-.02em;
  color:var(--sy-muted-2);cursor:pointer;white-space:nowrap;position:relative;
}
.sy-anav-top:hover,.sy-anav-group:hover .sy-anav-top{color:var(--sy-ink)}
.sy-anav-top.active{color:var(--sy-accent)}
.sy-anav-top.active::after{content:"";position:absolute;left:15px;right:15px;bottom:-1px;
  height:2px;background:var(--sy-accent)}

.sy-anav-drop{
  position:absolute;top:100%;left:0;min-width:158px;display:none;flex-direction:column;
  background:var(--sy-bg);border:1px solid var(--sy-rule);box-shadow:6px 6px 0 rgba(49,50,51,.07);
  padding:6px 0;z-index:50;
}
.sy-anav-group:hover .sy-anav-drop,.sy-anav-group:focus-within .sy-anav-drop{display:flex}
.sy-anav-drop a{padding:10px 18px;font-size:14.5px;font-weight:600;color:var(--sy-muted-2);
  white-space:nowrap}
.sy-anav-drop a:hover{background:var(--sy-pink-100);color:var(--sy-accent)}


.sy-dot{display:inline-block;width:5px;height:5px;margin-inline-start:5px;
  background:var(--sy-accent);vertical-align:middle}
.sy-dot--top{position:absolute;top:22px;right:8px;margin:0}


.sy-appbar .sy-actions{margin-inline-start:auto;gap:10px}
.sy-iconbtn{
  display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:1px solid var(--sy-rule-soft);background:var(--sy-bg);border-radius:0;
  font-size:17px;line-height:1;color:var(--sy-ink);cursor:pointer;position:relative;
}
.sy-iconbtn:hover{border-color:var(--sy-accent);color:var(--sy-accent)}
.sy-burger{display:none}


.sy-bell{position:relative}
.sy-bell-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;
  background:var(--sy-accent);border:1.5px solid var(--sy-bg)}
.sy-bell-drop{
  position:absolute;top:calc(100% + 8px);right:0;width:302px;max-width:86vw;
  transform:translateX(var(--bell-shift,0px));
  background:var(--sy-bg);border:1px solid var(--sy-rule);box-shadow:6px 6px 0 rgba(49,50,51,.07);
  z-index:60;
}
.sy-bell-head{padding:13px 16px;font-size:13px;font-weight:800;color:var(--sy-ink);
  border-bottom:1px solid var(--sy-rule-soft)}
.sy-bell-list{list-style:none;margin:0;padding:0;max-height:322px;overflow:auto}
.sy-bell-item{display:flex;gap:10px;align-items:baseline;padding:12px 16px;
  border-bottom:1px solid var(--sy-rule-soft);font-size:14px;line-height:1.6;color:var(--sy-ink)}
.sy-bell-list li:last-child .sy-bell-item{border-bottom:0}
.sy-bell-item:hover{background:var(--sy-pink-100)}
.sy-bell-text{flex:1;min-width:0;word-break:keep-all}
.sy-bell-ago{flex:0 0 auto;font-size:12px;color:var(--sy-muted-2);white-space:nowrap}
.sy-bell-none{padding:26px 16px;text-align:center;font-size:13.5px;color:var(--sy-muted-2)}


.sy-avatar{
  display:block;max-width:132px;min-width:0;height:40px;line-height:38px;padding:0 14px;
  border:1px solid var(--sy-rule-soft);background:var(--sy-bg);
  font-size:14px;font-weight:700;color:var(--sy-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sy-avatar:hover{border-color:var(--sy-accent);color:var(--sy-accent)}


.sy-quota{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 18px;margin:0 0 22px;
  background:var(--sy-warning-bg);color:var(--sy-warning-fg);
  border-left:3px solid currentColor;font-size:14.5px;font-weight:600;line-height:1.6}
.sy-quota a{margin-inline-start:auto;color:inherit;font-weight:800;text-decoration:underline;
  white-space:nowrap}


.sy-appfoot{flex:0 0 auto;background:var(--sy-bg);border-top:1px solid var(--sy-rule-soft)}
.sy-appfoot-in{width:min(var(--sy-header-w),100% - var(--sy-pad)*2);margin-inline:auto;
  padding:26px 0 32px;display:flex;gap:14px 26px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;font-size:13px;color:var(--sy-muted-2)}
.sy-appfoot nav{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;font-weight:600}
.sy-appfoot a{color:var(--sy-muted-2)}
.sy-appfoot a:hover{color:var(--sy-accent)}
.sy-logout{border:0;background:none;padding:0;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--sy-muted-2);cursor:pointer}
.sy-logout:hover{color:var(--sy-accent)}


.sy-page{width:min(var(--sy-guide),100% - var(--sy-pad)*2);margin-inline:auto;padding:44px 0 80px}
.sy-page--narrow{width:min(var(--sy-read),100% - var(--sy-pad)*2)}

@media (max-width:980px){
  
  .sy-appbar-in,.sy-anav{height:64px}
  .sy-burger{display:grid}
  .sy-anav{
    position:absolute;top:64px;left:0;right:0;height:auto;margin:0;
    flex-direction:column;align-items:stretch;display:none;
    background:var(--sy-bg);border-bottom:1px solid var(--sy-rule);
    box-shadow:0 6px 0 rgba(49,50,51,.05);
  }
  .sy-anav.open{display:flex}
  .sy-anav-group{flex-direction:column;align-items:stretch}
  .sy-anav-top{height:46px;padding:0 20px;justify-content:flex-start;
    border-bottom:1px solid var(--sy-rule-soft)}
  .sy-anav-top.active::after{display:none}
  .sy-anav-drop{position:static;display:flex;min-width:0;border:0;box-shadow:none;
    padding:0;background:var(--sy-pink-100)}
  .sy-anav-drop a{padding:11px 20px 11px 34px}
  .sy-dot--top{position:static;margin-inline-start:6px}
  .sy-appbar{position:relative}
}
@media (max-width:600px){
  .sy-appbar-in{gap:10px}
  .sy-appbar .sy-logo img{height:26px}
  .sy-avatar{max-width:88px;padding:0 10px;font-size:13px}
  .sy-iconbtn{width:36px;height:36px}
  .sy-page{padding:28px 0 56px}
  .sy-quota{font-size:13.5px;padding:12px 14px}
  .sy-quota a{margin-inline-start:0;flex-basis:100%}
  .sy-appfoot-in{padding:22px 0 26px;font-size:12.5px}
}




.sy-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sy-plan-card{position:relative;background:var(--sy-bg);
  border:1px solid var(--sy-rule-soft);padding:32px 28px 30px}
.sy-plan-card--plus{border-color:var(--sy-accent);box-shadow:inset 0 0 0 1px var(--sy-accent)}
.sy-plan-tag{position:absolute;top:-1px;right:-1px;padding:5px 12px;
  background:var(--sy-accent);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em}
.sy-plan-name{margin:0 0 4px;font-family:var(--sy-hand);
  font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--sy-ink)}
.sy-plan-card--plus .sy-plan-name{color:var(--sy-accent)}
.sy-plan-note{margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--sy-rule-soft);
  font-size:13.5px;color:var(--sy-muted-2)}
.sy-plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;
  font-size:14.5px;line-height:1.6;color:var(--sy-ink)}
.sy-plan-list li{position:relative;padding-inline-start:17px;word-break:keep-all}
.sy-plan-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.55em;
  width:5px;height:5px;background:var(--sy-rule)}
.sy-plan-card--plus .sy-plan-list li::before{background:var(--sy-accent)}
.sy-plan-list b{font-weight:800}
.sy-plan-list .num{color:var(--sy-muted-2);font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .sy-plans{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .sy-plan-card{padding:26px 20px 24px}
  .sy-plan-name{font-size:26px}
}


.sy-band--tight{padding:74px 0 78px}
.sy-band--tight h2{font-size:40px;line-height:1.45}
@media (max-width:860px){.sy-band--tight{padding:56px 0 60px}.sy-band--tight h2{font-size:28px}}
@media (max-width:600px){.sy-band--tight{padding:44px 0 48px}.sy-band--tight h2{font-size:23px}}



.sy-freelist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sy-freelist li{padding:9px 16px;background:var(--sy-pink-100);color:var(--sy-ink);
  font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
@media (max-width:600px){
  .sy-freelist{gap:6px}
  .sy-freelist li{padding:8px 13px;font-size:14px}
}


.sy-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.sy-jump a{display:inline-flex;align-items:center;height:38px;padding:0 18px;
  border:1px solid var(--sy-rule-soft);background:var(--sy-bg);
  font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--sy-muted-2)}
.sy-jump a:hover{border-color:var(--sy-accent);color:var(--sy-accent)}


.sy-contact--split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;
  align-items:start}
.sy-contact-il{text-align:center}
.sy-contact-il img{width:100%;max-width:200px;height:auto;margin:0 auto 12px}
.sy-contact-il p{margin:0;font-size:13px;line-height:1.7;color:var(--sy-muted-2);word-break:keep-all}

@media (max-width:760px){
  .sy-contact--split{grid-template-columns:minmax(0,1fr);gap:20px}
  .sy-contact-il img{max-width:150px}
}
@media (max-width:600px){
  .sy-jump{gap:6px;margin-top:20px}
  .sy-jump a{height:34px;padding:0 13px;font-size:13px}
}


.sy-guide-hero{position:relative}
.sy-guide-bubble{position:absolute;top:26px;width:132px;height:auto;
  pointer-events:none;user-select:none}
.sy-guide-bubble--l{left:0}
.sy-guide-bubble--r{right:0;top:120px;transform:scaleX(-1)}

@media (max-width:1040px){.sy-guide-bubble{width:104px}}
@media (max-width:900px){.sy-guide-bubble{display:none}}


.sy-guide .sy-sec[id]{scroll-margin-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}


.sy-note{margin:22px 0 0;padding-inline-start:16px;
  border-inline-start:1px solid var(--sy-rule-soft);
  font-size:14px;line-height:1.85;color:var(--sy-muted-2);word-break:keep-all}
.sy-note b{font-weight:700;color:var(--sy-muted)}


.sy-plan-card--plus .sy-plan-list .num{color:var(--sy-accent);font-weight:700}


.sy-sec-lead a,.sy-note a,.sy-callout a,.sy-freelist a{
  color:var(--sy-accent);font-weight:700;
  text-decoration:underline;text-underline-offset:2px}
