/* JPHost 리뉴얼 시안 v2 — 라이트 · 에디토리얼 · 레드 포인트 */
:root{
  --paper:#f6f4ef; --paper-2:#efece5; --white:#fff;
  --ink:#111111; --ink-2:#2b2b2b; --text:#3d3d3d; --muted:#7a766d; --line:#e2ddd3; --line-2:#d3cdc1;
  --red:#e5372b; --red-d:#c62a1f; --red-soft:#fdecea;
  --blue:var(--red); --blue-600:var(--red-d); --sky:var(--red-soft); --cyan:var(--red);
  --ok:#1f9d6b; --warn:#e3a008;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  /* 굵기 (10-30 정리) — Pretendard 400 본문 · 700 버튼·링크·라벨 · 800 소제목·카드 제목 · 900 큰 제목·가격.
     600 은 쓰지 않음(3곳 때문에 파일 768KB 를 더 받았음). 모노(JetBrains)는 500·700 만 불러옴 */
  /* 제목 자간·굵기 (10-30, 사용자 "제목 자간 너무 촘촘" → -.045~-.055em/900 에서 바꿈). 큰 제목·카드 제목이 같이 따라옴, 가격·숫자는 별도 */
  --ls-title:-.02em; --fw-title:800;
  --radius:6px; --wrap:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--text);background:var(--paper);line-height:1.65;font-size:16px;word-break:keep-all;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ico{width:20px;height:20px;flex:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;letter-spacing:-.03em}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--radius);font-weight:700;font-size:15px;border:1.5px solid transparent;transition:.25s var(--ease);cursor:pointer;white-space:nowrap;font-family:inherit;overflow:hidden}
.btn .ico{width:17px;height:17px}
.btn-lg{height:56px;padding:0 28px;font-size:16px}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-block{width:100%}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--ink)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--red);color:#fff}
.btn-ghost-w{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost-w:hover{background:#fff;color:var(--ink)}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(246,244,239,.96);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo-mark{display:block;width:54px;height:35px}
.logo-mark svg{display:block;width:100%;height:100%;overflow:visible}
.lg-cloud{fill:none;stroke:currentColor;stroke-width:7;stroke-linejoin:round}
.lg-arrow{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:0}
.lg-head{stroke-dasharray:none}
.logo:hover .lg-arrow:not(.lg-head){animation:lgdraw .7s var(--ease)}
.logo:hover .lg-head{animation:lghead .7s var(--ease)}
@keyframes lgdraw{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
@keyframes lghead{0%,55%{opacity:0;transform:translate(-6px,6px)}100%{opacity:1;transform:none}}
.logo-text{display:flex;flex-direction:column;line-height:1}
.lg-word{font-size:25px;font-weight:900;letter-spacing:-.02em;color:currentColor}
.lg-word b{color:var(--red);font-weight:900;margin-right:1px}
.logo-text small{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;color:var(--muted);margin-top:5px}
.logo-inv{color:#fff;margin-bottom:28px}
.logo-inv .logo-text small{color:#8f8b82}
.gnb{display:flex;align-items:center;gap:22px}
.gnb>ul{display:flex}
.gnb>ul>li{position:relative}
.gnb-top{position:relative;display:flex;align-items:center;gap:4px;height:76px;padding:0 18px;color:var(--ink);font-weight:700;font-size:15.5px;background:none;border:0;cursor:pointer;font-family:inherit}
.gnb-top::after{content:"";position:absolute;left:18px;right:18px;bottom:22px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.gnb li:hover>.gnb-top::after,.gnb li.active>.gnb-top::after{transform:scaleX(1)}
.caret{width:14px;height:14px;opacity:.5;transition:.25s}
.sub{position:absolute;left:0;top:100%;min-width:300px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);padding:8px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s var(--ease)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.has-sub:hover .caret{transform:rotate(180deg)}
.sub a{display:grid;grid-template-columns:34px 1fr;padding:12px 14px;border-radius:4px;transition:.2s}
.sub-no{grid-row:span 2;font-family:var(--mono);font-size:12px;color:var(--red);padding-top:3px}
.sub b{color:var(--ink);font-size:15px}
.sub small{color:var(--muted);font-size:13px}
.sub a:hover,.sub a[aria-current]{background:var(--paper)}
.sub a:hover b{color:var(--red)}
.scroll-bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.nav-toggle{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;padding:10px}
.nav-toggle span{display:block;height:2px;background:var(--ink);transition:.25s}

/* home hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;opacity:.5;mask-image:radial-gradient(circle at 20% 40%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 20% 40%,#000,transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:88px}
.hero-kicker{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:10px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(31,157,107,.6);animation:live 2s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(31,157,107,0)}100%{box-shadow:0 0 0 0 rgba(31,157,107,0)}}
.hero-title{font-size:74px;font-weight:var(--fw-title);letter-spacing:var(--ls-title);line-height:1.08;margin:22px 0 26px}
.hero-title .ln{display:block;overflow:hidden}
.hero-title .ln>span{display:inline-block;transform:translateY(105%);animation:rise 1s var(--ease) forwards}
.hero-title .ln:nth-child(2)>span{animation-delay:.12s}
.hero-title em{font-style:normal;color:var(--red);position:relative}
.hero-title em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.1em;background:var(--red);opacity:.18;transform:scaleX(0);transform-origin:left;animation:underline .9s .9s var(--ease) forwards}
@keyframes rise{to{transform:none}}
@keyframes underline{to{transform:scaleX(1)}}
.hero .lead{font-size:18px;max-width:540px;color:var(--text);opacity:0;animation:fadeup .9s .35s var(--ease) forwards}
.hero .hero-actions{opacity:0;animation:fadeup .9s .5s var(--ease) forwards}
.hero-stats{opacity:0;animation:fadeup .9s .65s var(--ease) forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:40px;margin-top:52px;padding-top:28px;border-top:1px solid var(--line-2)}
.hero-stats dt{font-size:30px;font-weight:900;color:var(--ink);letter-spacing:-.04em}
.hero-stats dd{font-size:13.5px;color:var(--muted)}
.hero-visual{position:relative;height:560px}
.hv-photo{position:absolute;inset:0 0 0 40px;border-radius:4px;overflow:hidden;clip-path:inset(0 0 100% 0);animation:reveal 1.3s .2s var(--ease) forwards}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
.hv-img{position:absolute;inset:-6%;background-size:cover;background-position:center;animation:kenburns 22s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-2%)}}
.hv-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.35))}
.hv-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 20px;box-shadow:0 24px 50px -24px rgba(0,0,0,.35);opacity:0;animation:pop .8s var(--ease) forwards}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.hv-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.hv-status{left:0;bottom:48px;width:290px;animation-delay:1s}
.hv-status li{display:flex;align-items:center;gap:10px;padding:7px 0;font-weight:700;color:var(--ink);font-size:14px}
.hv-status li+li{border-top:1px dashed var(--line)}
.hv-status b{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ok);display:flex;align-items:center;gap:6px}
.hv-status b i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:blink 1.4s infinite}
.hv-status li:nth-child(2) b i{animation-delay:.4s}.hv-status li:nth-child(3) b i{animation-delay:.8s}
@keyframes blink{50%{opacity:.2}}
.hv-price{right:-12px;top:40px;animation-delay:1.25s;animation-name:pop,float;animation-duration:.8s,6s;animation-delay:1.25s,2.1s;animation-iteration-count:1,infinite;animation-timing-function:var(--ease),ease-in-out;animation-direction:normal,alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.hv-big{font-size:28px;font-weight:900;color:var(--red);letter-spacing:-.04em;line-height:1.1}
.hv-sub{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px}
.hv-badge{position:absolute;right:24px;bottom:24px;display:flex;gap:6px;opacity:0;animation:fadeup .8s 1.5s var(--ease) forwards}
.hv-badge span{font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.6);padding:5px 9px;border-radius:3px;backdrop-filter:blur(4px);background:rgba(0,0,0,.2)}
.flag{display:inline-grid;place-items:center;width:28px;height:20px;border-radius:3px;font-family:var(--mono);font-weight:700;font-size:10px;color:#fff;background:var(--ink);flex:none}
.flag.jp{background:var(--red)}.flag.kr{background:#1e3a8a}.flag.hk{background:#b45309}

/* marquee */
.marquee{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;border-bottom:1px solid #000}
.marquee-track{display:inline-flex;align-items:center;gap:28px;padding:18px 0;animation:marquee 38s linear infinite;font-weight:800;font-size:18px;letter-spacing:-.01em}
.marquee-track i{color:var(--red);font-size:10px;font-style:normal}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sub hero (photo) */
.page-hero{position:relative;color:#e8e6e1;overflow:hidden;background:var(--ink)}
.ph-bg{position:absolute;inset:-4%;background-size:cover;background-position:center;animation:kenburns 26s ease-in-out infinite alternate;opacity:.55}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.7) 45%,rgba(10,10,10,.25) 100%);pointer-events:none}
.ph-inner{position:relative;z-index:1;padding-top:88px;padding-bottom:96px}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:#b9b5ac;display:flex;align-items:center;gap:12px;margin-bottom:22px;text-transform:uppercase}
.crumb i{width:24px;height:1px;background:var(--red)}
.crumb a:hover{color:#fff}
.page-hero h1{color:#fff;font-size:52px;font-weight:var(--fw-title);max-width:860px;letter-spacing:var(--ls-title);line-height:1.15}
.split-lines{opacity:0;animation:fadeup 1s .1s var(--ease) forwards}
.page-hero .lead{margin-top:20px;font-size:17.5px;max-width:680px;color:#d6d3cc;opacity:0;animation:fadeup 1s .25s var(--ease) forwards}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;opacity:0;animation:fadeup 1s .4s var(--ease) forwards}
.chips li{font-family:var(--mono);font-size:12.5px;padding:7px 12px;border:1px solid rgba(255,255,255,.28);border-radius:3px;color:#f1efea}
.page-hero .hero-actions{margin-top:32px;opacity:0;animation:fadeup 1s .5s var(--ease) forwards}
.ph-tabs{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.14);background:rgba(10,10,10,.55)}
.ph-tabs ul{display:flex;overflow-x:auto;scrollbar-width:none}
.ph-tabs ul::-webkit-scrollbar{display:none}
.ph-tabs a{display:block;padding:18px 26px;font-weight:700;font-size:15px;color:#b9b5ac;border-bottom:3px solid transparent;white-space:nowrap;transition:.2s}
.ph-tabs a:hover{color:#fff}
.ph-tabs a[aria-current]{color:#fff;border-bottom-color:var(--red)}

/* sections */
.sec{padding:112px 0}
.sec-soft{background:var(--paper-2)}
.sec-dark{background:var(--ink);color:#bdb9b0}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-photo{position:relative;overflow:hidden}
.sec-bg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;opacity:.28;will-change:transform}
.sec-photo .wrap{position:relative}
.sec-head{max-width:780px;margin-bottom:52px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.eyebrow::before{content:"";width:28px;height:1.5px;background:currentColor}
.eyebrow.light{color:#fff}
.sec-head h2{font-size:40px;font-weight:var(--fw-title);letter-spacing:var(--ls-title);line-height:1.18}
.sec-head p{margin-top:18px;font-size:17px;color:var(--muted);max-width:640px}
.sec-dark .sec-head p{color:#a8a49b}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .sec-head{margin-bottom:28px}
.sub-title{font-size:22px;font-weight:var(--fw-title);letter-spacing:var(--ls-title);margin:64px 0 22px;display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.sub-title:first-child{margin-top:0}
.sec-dark .sub-title{border-color:rgba(255,255,255,.3)}
.note{font-size:14.5px;color:var(--muted);margin-top:22px}
.note a{color:var(--ink);font-weight:700;border-bottom:1.5px solid var(--red)}

/* home service list */
.svc-list{border-top:2px solid var(--ink)}
.svc-row{position:relative;display:grid;grid-template-columns:70px 1.1fr 1.6fr 140px 40px;align-items:center;gap:24px;padding:30px 8px;border-bottom:1px solid var(--line-2);transition:padding .35s var(--ease),background .35s}
.svc-row:hover{background:#fff;padding-left:22px;padding-right:22px}
.svc-no{font-family:var(--mono);font-size:13px;color:var(--muted)}
.svc-name b{display:block;font-size:24px;font-weight:var(--fw-title);color:var(--ink);letter-spacing:var(--ls-title);transition:color .25s}
.svc-row:hover .svc-name b{color:var(--red)}
.svc-name small{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.svc-desc{font-size:15px;color:var(--text)}
.svc-price{font-weight:800;color:var(--ink);text-align:right}
.svc-go{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;color:var(--ink);font-weight:700;transition:.3s var(--ease)}
.svc-row:hover .svc-go{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-45deg)}
.svc-thumb{position:absolute;right:230px;top:50%;width:220px;height:140px;background-size:cover;background-position:center;border-radius:4px;pointer-events:none;opacity:0;transform:translateY(-50%) rotate(-4deg) scale(.9);transition:.4s var(--ease);box-shadow:0 20px 40px -18px rgba(0,0,0,.5);z-index:2}
.svc-row:hover .svc-thumb{opacity:1;transform:translateY(-50%) rotate(-2deg) scale(1)}

/* tabs */
.tab-btns{display:inline-flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:28px}
.tab-btns button{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:5px;background:transparent;font:inherit;font-weight:700;font-size:15px;color:var(--muted);cursor:pointer;transition:.2s}
.tab-btns button[aria-selected=true]{background:var(--ink);color:#fff}
.tab-panel{display:none}
.tab-panel.is-on{display:block;animation:fadeup .5s var(--ease)}

/* features / cards */
.f-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--red-soft);color:var(--red);transition:.3s var(--ease)}
.f-ico .ico{width:22px;height:22px}
.sec-dark .f-ico{background:rgba(229,55,43,.16);color:#ff6b5f}
.features{display:grid;gap:0;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.sec-dark .features{border-color:rgba(255,255,255,.12)}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
.feature{padding:30px 28px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transition:background .3s}
.sec-dark .feature{border-color:rgba(255,255,255,.12)}
.feature:hover{background:#fff}
.sec-dark .feature:hover{background:rgba(255,255,255,.04)}
.feature:hover .f-ico{background:var(--red);color:#fff;transform:rotate(-8deg)}
.feature h3{font-size:18px;margin:18px 0 8px;font-weight:800}
.feature p{font-size:15px;color:var(--muted)}
.sec-dark .feature p{color:#a8a49b}
.features.compact .feature{padding:24px 22px}
.features.compact .feature h3{margin-top:14px;font-size:16.5px}
.cards{display:grid;gap:20px}
.card{position:relative;padding:32px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);transition:.35s var(--ease);overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(0,0,0,.45)}
.card:hover::before{transform:scaleX(1)}
.card h3{font-size:19px;margin:20px 0 8px;font-weight:800}
.card p{font-size:15px;color:var(--muted)}
.sec-dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);backdrop-filter:blur(2px)}
.sec-dark .card p{color:#a8a49b}
.card .more{display:inline-block;margin-top:18px;font-weight:700;color:#ff6b5f;font-size:14px}

/* plans */
.plans{display:grid;gap:18px}
.plan{position:relative;display:flex;flex-direction:column;padding:30px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;transition:.35s var(--ease)}
.plan:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 28px 44px -30px rgba(0,0,0,.5)}
.plan.is-featured{background:var(--ink);border-color:var(--ink);color:#d9d5cd}
.plan.is-featured h3,.plan.is-featured .price strong{color:#fff}
.plan.is-featured .plan-sub,.plan.is-featured .price span{color:#a8a49b}
.plan.is-featured .price{border-color:rgba(255,255,255,.14)}
.plan.is-featured .specs li{color:#e8e6e1}
.plan.is-featured .btn-primary:hover{background:#fff;color:var(--ink)}
.plan-badge{position:absolute;top:20px;right:20px;background:var(--red);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:3px}
.plan h3{font-size:19px;font-weight:var(--fw-title);letter-spacing:var(--ls-title)}
.plan-sub{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px;letter-spacing:.02em}
.price{margin:22px 0;padding-bottom:22px;border-bottom:1px solid var(--line)}
.price strong{font-size:34px;font-weight:900;color:var(--ink);letter-spacing:-.05em}
.price span{font-size:14px;color:var(--muted);margin-left:4px}
.specs{flex:1;margin-bottom:24px}
.specs li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:15px;color:var(--text)}
.specs .ico{width:16px;height:16px;color:var(--red);margin-top:4px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.opt{padding:22px 24px;border-radius:var(--radius);background:#fff;border:1px dashed var(--line-2)}
.opt h4{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;text-transform:uppercase}
.opt p{display:flex;justify-content:space-between;font-size:15px;padding:2px 0}
.opt p b{color:var(--red)}

/* tables */
.table-wrap{overflow-x:auto;border-top:2px solid var(--ink);background:#fff}
table{width:100%;border-collapse:collapse;min-width:860px;font-size:14.5px}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:17px 18px;border-bottom:1px solid var(--line);white-space:nowrap;transition:background .2s}
tbody tr:hover td{background:var(--paper)}
td.cpu{font-weight:700;color:var(--ink);white-space:normal}
td.num{font-family:var(--mono);font-weight:700;color:var(--ink)}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:3px;margin-left:6px;vertical-align:2px}
.tag-new{background:#e5f5ee;color:var(--ok)}.tag-sale{background:var(--red);color:#fff}

/* band photo (home stats) */
.band-photo{position:relative;color:#fff;overflow:hidden;background:#000}
.band-bg{position:absolute;inset:-20% 0;background-size:cover;background-position:center;opacity:.5;will-change:transform}
.band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,.2))}
.band-inner{position:relative;z-index:1;padding-top:140px;padding-bottom:80px}
.band-inner h2{color:#fff;font-size:40px;font-weight:var(--fw-title);letter-spacing:var(--ls-title);max-width:640px}
.band-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border-top:1px solid rgba(255,255,255,.3)}
.band-stats>div{padding:28px 24px 0 0}
.band-stats b{display:block;font-size:56px;font-weight:900;letter-spacing:-.05em;line-height:1}
.band-stats>div>span{font-size:14.5px;color:#d6d3cc;display:block;margin-top:10px}

/* network map */
.map{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.map svg{display:block;width:100%;height:auto}
.route{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:6 8;animation:dash 1.6s linear infinite}
.route.r2{animation-duration:2.1s}.route.r3{animation-duration:2.6s;stroke:var(--ink);opacity:.5}
@keyframes dash{to{stroke-dashoffset:-28}}
.node circle{fill:var(--red)}
.node .pulse{fill:var(--red);opacity:.35;transform-origin:center;transform-box:fill-box;animation:ping 2.4s var(--ease) infinite}
.node:nth-of-type(2) .pulse{animation-delay:.8s}.node:nth-of-type(3) .pulse{animation-delay:1.6s}
@keyframes ping{0%{transform:scale(1);opacity:.45}100%{transform:scale(3.4);opacity:0}}
.node text{font-family:var(--mono);font-size:13px;font-weight:700;fill:var(--ink);letter-spacing:.06em}
.map-legend{display:flex;gap:22px;padding:14px 16px 6px;font-size:13px;color:var(--muted)}
.map-legend span{display:flex;align-items:center;gap:8px}
.map-legend i{width:10px;height:10px;border-radius:50%;background:var(--red)}
.map-legend b{width:22px;height:0;border-top:2px dashed var(--red)}

/* faq */
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.faq-side p{color:var(--muted);margin:0 0 24px}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:24px 56px 24px 0;font-weight:800;font-size:17px;color:var(--ink);position:relative;transition:color .2s}
.faq summary:hover{color:var(--red)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg);background:linear-gradient(var(--red),var(--red)) center/100% 2px no-repeat,linear-gradient(var(--red),var(--red)) center/2px 100% no-repeat}
.faq-a{padding:0 0 26px;color:var(--text);font-size:15.5px;animation:fadeup .4s var(--ease)}
.faq-a ul{margin-top:6px}
.faq-a li{padding:4px 0 4px 16px;position:relative}
.faq-a li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:2px;background:var(--red)}

/* cta band */
.cta-band{position:relative;overflow:hidden;background:var(--red);color:#fff}
.cta-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;mix-blend-mode:multiply;opacity:.35;filter:grayscale(1)}
.cta-band .wrap{position:relative;display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:88px;padding-bottom:88px}
.cta-band .eyebrow{color:#fff}
.cta-band h2{color:#fff;font-size:40px;font-weight:var(--fw-title);letter-spacing:var(--ls-title)}
.cta-band p{margin-top:12px;max-width:620px;color:#ffe9e6}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* data center */
.dc{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.dc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.35s var(--ease)}
.dc-card:hover{box-shadow:0 30px 50px -34px rgba(0,0,0,.5);transform:translateY(-4px)}
.dc-img{height:240px;background-size:cover;background-position:center;transition:transform 1.2s var(--ease)}
.dc-card:hover .dc-img{transform:scale(1.06)}
.dc-body{position:relative;padding:30px 32px 32px;background:#fff}
.dc-body .flag{margin-bottom:14px}
.dc-body h3{font-size:22px;font-weight:var(--fw-title);letter-spacing:var(--ls-title)}
.dc-body p{margin-top:10px;font-size:15px;color:var(--muted)}
.dc-body ul{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.dc-body li{font-family:var(--mono);font-size:11.5px;padding:5px 10px;border:1px solid var(--line-2);border-radius:3px;color:var(--ink)}
/* about 페이지 등 기존 마크업(.dc-card 안에 바로 텍스트) 호환 */
.dc-card>.flag{margin:30px 32px 14px}
.dc-card>h3{font-size:22px;font-weight:var(--fw-title);letter-spacing:var(--ls-title);padding:0 32px}
.dc-card>p{margin-top:10px;font-size:15px;color:var(--muted);padding:0 32px}
.dc-card>ul{margin:18px 32px 32px;display:flex;flex-wrap:wrap;gap:6px}
.dc-card>ul li{font-family:var(--mono);font-size:11.5px;padding:5px 10px;border:1px solid var(--line-2);border-radius:3px;color:var(--ink)}

/* ssl compare */
.ssl-types{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ssl-type{padding:30px;border-radius:var(--radius);border:1px solid var(--line-2);background:#fff;transition:.35s var(--ease)}
.ssl-type:hover{border-color:var(--ink);transform:translateY(-4px)}
.ssl-type .lv{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:700;padding:4px 10px;border-radius:3px;background:var(--ink);color:#fff}
.ssl-type h3{margin:16px 0 8px;font-size:19px;font-weight:var(--fw-title);letter-spacing:var(--ls-title)}
.ssl-type p{font-size:15px;color:var(--muted)}
.meter{display:flex;gap:4px;margin:20px 0}
.meter i{flex:1;height:6px;border-radius:1px;background:var(--line)}
.meter i.on{background:var(--red)}
.pros{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:14px}
.pros h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.pros li{padding:2px 0}
.fit{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-2);font-size:14px}
.fit b{color:var(--red);margin-right:6px}

/* ddos plans */
.dplan .effects{margin:4px 0 18px}
.dplan h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:16px;text-transform:uppercase}
.plan.is-featured.dplan h4{color:#a8a49b}
.plan.is-featured.dplan p{color:#c9c5bc!important}
.refund{font-size:13px;color:var(--ok);font-weight:700;margin-bottom:14px}

/* vpn locations */
.loc{display:flex;flex-wrap:wrap;gap:8px}
.loc li{font-family:var(--mono);padding:9px 14px;border-radius:3px;border:1px solid rgba(255,255,255,.2);font-size:13px;color:#e8e6e1;transition:.2s}
.loc li:hover{background:var(--red);border-color:var(--red)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.form{padding:40px;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:var(--radius);background:#fff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:6px}
.field label em{color:var(--red);font-style:normal}
.field input,.field select,.field textarea{width:100%;height:50px;padding:0 14px;border:1px solid var(--line-2);border-radius:4px;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);transition:.2s}
.field textarea{height:150px;padding:12px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink);background:#fff}
.form-msg{display:none;margin-top:14px;padding:14px;border-radius:4px;background:var(--red-soft);color:var(--red-d);font-size:14px}
.form-msg.show{display:block;animation:fadeup .4s var(--ease)}
.info-card{padding:30px;border-radius:var(--radius);background:var(--ink);color:#bdb9b0}
.info-card+.info-card{margin-top:14px}
.info-card h3{color:#fff;font-size:17px;margin-bottom:14px}
.info-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14.5px}
.info-list li:last-child{border-bottom:0}
.info-list b{color:#fff;font-weight:700;text-align:right}

/* portfolio */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:.35s var(--ease)}
.case:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px rgba(0,0,0,.5)}
.case-visual{height:240px;background:var(--ink) url(../img/rack.jpg) center/cover;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.case:nth-child(2) .case-visual{background-image:url(../img/earth.jpg)}
.case-visual::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.case-visual .ico{width:64px;height:64px;position:relative}
.case-body{padding:30px}
.case-body h3{font-size:20px;font-weight:var(--fw-title);letter-spacing:var(--ls-title)}
.case-body p{margin-top:8px;color:var(--muted);font-size:15px}

/* footer */
.site-footer{background:var(--ink);color:#8f8b82;font-size:14px;overflow:hidden}
.foot-top{display:grid;grid-template-columns:1fr 2fr;gap:48px;padding-top:88px;padding-bottom:56px}
.foot-slogan{font-family:var(--mono);font-size:13px;letter-spacing:.06em;margin-bottom:24px}
.foot-slogan b{display:block;font-family:Pretendard,sans-serif;font-size:28px;font-weight:var(--fw-title);color:#fff;letter-spacing:var(--ls-title);margin-top:10px;line-height:1.3}
.foot-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.foot-col h4{color:#fff;font-size:14px;margin-bottom:14px}
.foot-col li{padding:4px 0}
.foot-col a{transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-mark{font-weight:900;font-size:clamp(80px,19vw,280px);letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);text-align:center;white-space:nowrap;user-select:none;margin-bottom:-.06em}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;padding-bottom:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#6d6a63}
.float-tg{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(229,55,43,.8);z-index:50;transition:.3s var(--ease)}
.float-tg:hover{background:var(--ink);transform:rotate(-12deg) scale(1.05)}
.float-tg .ico{width:24px;height:24px}

/* scroll reveal (JS 가 .rv 부여) */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* responsive */
@media (max-width:1100px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr}
  .svc-row{grid-template-columns:50px 1fr 120px 40px}
  .svc-desc,.svc-thumb{display:none}
  .hero-title{font-size:60px}
}
@media (max-width:960px){
  .nav-toggle{display:flex}
  .gnb{position:fixed;inset:76px 0 0 0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 32px;overflow-y:auto;transform:translateX(100%);transition:transform .35s var(--ease)}
  body.nav-open .gnb{transform:none}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .gnb>ul{flex-direction:column}
  .gnb-top{height:62px;width:100%;justify-content:space-between;padding:0;border-bottom:1px solid var(--line);font-size:19px;font-weight:800}
  .gnb-top::after{display:none}
  .gnb li.active>.gnb-top{color:var(--red)}
  .sub{position:static;transform:none;opacity:1;visibility:visible;border:0;background:transparent;padding:6px 0 12px;display:none;min-width:0}
  .has-sub.open .sub{display:block}
  .has-sub.open .caret{transform:rotate(180deg)}
  .has-sub:hover .sub{transform:none}
  .nav-cta{margin-top:24px;height:52px}
  .hero-grid{grid-template-columns:1fr;padding-top:48px;padding-bottom:56px;gap:40px}
  .hero-visual{height:420px}
  .hv-photo{left:0}
  .hv-price{right:12px}
  .services,.cols-3,.ssl-types,.opts{grid-template-columns:1fr 1fr}
  .split,.faq-layout,.contact-grid,.dc,.cases{grid-template-columns:1fr;gap:36px}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .band-stats{grid-template-columns:repeat(2,1fr)}
  .band-stats>div{padding-bottom:20px}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
  .sec{padding:84px 0}
  .page-hero h1{font-size:40px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero-title{font-size:42px}
  .hero .lead,.page-hero .lead{font-size:16px}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:14px}
  .hero-stats dt{font-size:22px}
  .hero-visual{height:340px}
  .hv-status{width:240px;bottom:16px;padding:14px 16px}
  .hv-price{top:16px;padding:14px 16px}
  .hv-big{font-size:22px}
  .hv-badge{display:none}
  .page-hero h1{font-size:30px}
  .ph-inner{padding-top:56px;padding-bottom:60px}
  .sec-head h2,.band-inner h2,.cta-band h2{font-size:30px}
  .cols-2,.cols-3,.cols-4,.ssl-types,.opts,.form-row{grid-template-columns:1fr}
  .svc-row{grid-template-columns:1fr 40px;gap:8px 16px;padding:22px 4px}
  .svc-row:hover{padding-left:4px;padding-right:4px}
  .svc-no{display:none}
  .svc-price{grid-column:1;grid-row:2;text-align:left;font-size:14px;color:var(--red)}
  .svc-go{grid-column:2;grid-row:1/span 2}
  .svc-name b{font-size:20px}
  .band-stats b{font-size:40px}
  .band-inner{padding-top:96px;padding-bottom:56px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .form{padding:24px}
  .hero-actions .btn{flex:1}
  .tab-btns{display:flex}
  .tab-btns button{flex:1;padding:0 10px;font-size:14px}
}

/* home hero — split-flap headline (v6) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-sf-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:64px;padding-bottom:72px}
.hero-sf .hero-kicker{justify-content:center}
.hero-sf .lead{margin:0 auto}
.hero-sf .hero-actions{justify-content:center;margin-top:28px}
.hero-sf .hero-stats{justify-content:center;margin-top:44px;width:100%;max-width:860px}

.sf-panel{--gap:6px;--cw:min(76px,calc((100vw - 48px - 40px - 9 * var(--gap)) / 10));--ch:calc(var(--cw) * 1.3);position:relative;margin:26px 0 34px;padding:16px 20px 18px;border-radius:12px;background:#111;overflow:hidden;box-shadow:0 44px 80px -40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05);opacity:0;animation:fadeup .9s .1s var(--ease) forwards}
.sf-panel-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:.2;filter:grayscale(.4);animation:kenburns 22s ease-in-out infinite alternate}
.sf-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(0,0,0,.55));pointer-events:none}
.sf-bar{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#8d887e;margin:0 2px 12px}
.sf-board{position:relative;z-index:1;display:grid;gap:8px}
.sf-row{display:grid;grid-template-columns:repeat(10,var(--cw));gap:var(--gap)}
.sf-row.is-red{color:var(--red)}

/* 판 한 칸: 위·아래 반쪽 사이 1px 틈이 경첩선 */
.sf-cell{position:relative;display:block;height:var(--ch);perspective:calc(var(--ch) * 4);border-radius:4px;background:#050505;color:#f4f1ea;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.sf-row.is-red .sf-cell{color:#ff4a3d}
.sf-t,.sf-ft,.sf-b,.sf-fb{position:absolute;left:0;right:0;overflow:hidden}
.sf-t,.sf-ft{top:0;height:calc(50% - .5px);background:linear-gradient(#2c2c2c,#232323);border-radius:4px 4px 0 0;transform-origin:50% 100%}
.sf-b,.sf-fb{bottom:0;height:calc(50% - .5px);background:linear-gradient(#1d1d1d,#191919);border-radius:0 0 4px 4px;transform-origin:50% 0}
.sf-ft,.sf-fb{visibility:hidden;backface-visibility:hidden;z-index:2}
.sf-ft{background:linear-gradient(#2c2c2c,#1a1a1a)}
.sf-fb{background:linear-gradient(#262626,#191919)}
.sf-cell.is-flip .sf-ft,.sf-cell.is-flip .sf-fb{visibility:visible}
.sf-in{position:absolute;left:0;right:0;height:var(--ch);display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw) * .64);font-weight:800;line-height:1;letter-spacing:-.02em;white-space:pre}
.sf-t .sf-in,.sf-ft .sf-in{top:0}
.sf-b .sf-in,.sf-fb .sf-in{top:calc(var(--ch) / -2 + .5px)}
.sf-cell:not(.sf-ready){display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw) * .64);font-weight:800;background:linear-gradient(#2a2a2a 0 50%,#1b1b1b 50%)}

.sf-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:6px;margin-top:16px}
.sf-dots i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .4s,width .4s var(--ease)}
.sf-dots i.on{width:34px;background:var(--red)}

/* 지금 많이 찾는 서버 */
.hot{width:100%;max-width:860px;margin-top:52px;text-align:left}
.hot-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);padding:0 4px 10px;border-bottom:1.5px solid var(--ink)}
.hot-h a{color:var(--ink);font-weight:700}
.hot-h a:hover{color:var(--red)}
.hot-r{position:relative;display:grid;grid-template-columns:64px 130px 1fr auto 28px;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line-2);color:var(--ink);transition:background .25s,padding .25s var(--ease)}
.hot-r::before{content:"";position:absolute;left:-14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--red);opacity:0;transition:opacity .25s}
.hot-r:hover{background:rgba(255,255,255,.55);padding-left:12px}
.hot-r:hover::before{opacity:1}
.hot-code{font-family:var(--mono);font-size:15px;letter-spacing:.06em}
.hot-type{font-weight:700;font-size:15px}
.hot-spec{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-price{font-weight:900;font-size:16px;letter-spacing:-.02em}
.hot-go{color:var(--muted);transition:transform .25s var(--ease),color .25s}
.hot-r:hover .hot-go{color:var(--red);transform:translateX(4px)}

@media (max-width:960px){
  .hero-sf-in{padding-top:44px;padding-bottom:56px}
}
@media (max-width:640px){
  .sf-panel{--gap:3px;--cw:calc((100vw - 32px - 24px - 9 * var(--gap)) / 10);padding:12px 12px 14px;border-radius:10px;margin:20px 0 26px}
  .sf-board{gap:5px}
  .sf-cell,.sf-t,.sf-ft{border-radius:3px 3px 0 0}
  .sf-cell{border-radius:3px}
  .sf-b,.sf-fb{border-radius:0 0 3px 3px}
  .sf-bar{font-size:9.5px;letter-spacing:.08em;margin-bottom:9px}
  .sf-dots{margin-top:12px}
  .hot{margin-top:40px}
  .hot-r{grid-template-columns:48px 1fr auto;gap:4px 12px;padding:14px 2px}
  .hot-r:hover{padding-left:6px}
  .hot-spec{grid-column:2/4;grid-row:2;font-size:11.5px}
  .hot-go{display:none}
  .hot-code{grid-row:1/3;font-size:13px}
  .hero-sf .hero-stats{margin-top:36px}
}

/* home services — 탭형 (2026-10-28, DigitalOcean "Open at every layer" 식) : 왼쪽 목록 · 가운데 사진 · 오른쪽 설명 */
.svx .sec-head{margin:0 auto 64px;text-align:center}
.svx .sec-head p{margin-left:auto;margin-right:auto}
.svx-body{display:grid;grid-template-columns:240px 340px minmax(0,1fr);gap:56px;align-items:center;max-width:1120px;margin:0 auto}
.svx-nav{display:flex;flex-direction:column;gap:6px}
.svx-tab{display:flex;align-items:center;gap:14px;width:100%;padding:8px 20px 8px 8px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:16px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;transition:background .3s var(--ease),color .3s}
.svx-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--white);color:var(--red);transition:.3s var(--ease)}
.svx-ico .ico{width:18px;height:18px}
.svx-tab:hover{color:var(--red)}
.svx-tab[aria-selected="true"]{background:var(--red);color:#fff}
.svx-tab[aria-selected="true"] .svx-ico{border-color:transparent}
.svx-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.svx-stage{display:grid;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--ink);box-shadow:0 40px 70px -40px rgba(0,0,0,.55)}
.svx-shot{position:relative;grid-area:1/1;opacity:0;transition:opacity .5s var(--ease)}
.svx-shot.is-on{opacity:1}
.svx-shot-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 1.2s var(--ease)}
.svx-shot.is-on .svx-shot-img{transform:none}
.svx-shot::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 55% at 50% 118%,rgba(229,55,43,.6),transparent 62%),linear-gradient(180deg,rgba(0,0,0,.15) 35%,rgba(0,0,0,.72))}
.svx-shot-no,.svx-shot-sub{position:absolute;z-index:1;left:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:#fff}
.svx-shot-no{top:16px;opacity:.8}
.svx-shot-sub{bottom:16px;font-weight:700}
.svx-detail{display:grid}
.svx-pane{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.svx-pane.is-on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.svx-pane h3{font-size:30px;font-weight:var(--fw-title);letter-spacing:var(--ls-title)}
.svx-desc{margin-top:10px;font-size:16px;color:var(--text)}
.svx-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.svx-label{margin-bottom:8px;font-size:14px;color:var(--muted)}
.svx-links{display:grid;gap:6px;padding-left:18px;list-style:disc}
.svx-links li::marker{color:var(--red)}
.svx-links a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:3px}
.svx-links a:hover{color:var(--red)}
.svx-links span{font-size:14px;color:var(--muted)}
.svx-inc{font-size:15px;color:var(--ink)}
.svx-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.svx-price{display:flex;flex-direction:column;font-size:22px;font-weight:900;line-height:1.25;letter-spacing:-.03em;color:var(--ink)}
.svx-price small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--muted)}
.svx-more{display:flex;justify-content:center;margin-top:72px}
.svx-more .btn{border-radius:999px}
@media (max-width:1100px){
  .svx-body{grid-template-columns:200px 280px minmax(0,1fr);gap:36px}
}
@media (max-width:960px){
  .svx-body{grid-template-columns:minmax(0,1fr);gap:28px}
  .svx-nav{flex-direction:row;overflow-x:auto;margin:0 -24px;padding:0 24px 4px;scrollbar-width:none}
  .svx-nav::-webkit-scrollbar{display:none}
  .svx-tab{flex:none;width:auto;white-space:nowrap}
  .svx-stage{aspect-ratio:16/9}
}
@media (max-width:640px){
  .svx .sec-head{margin-bottom:40px}
  .svx-nav{margin:0 -16px;padding:0 16px 4px}
  .svx-tab{font-size:15px;padding-right:16px}
  .svx-ico{width:32px;height:32px}
  .svx-pane h3{font-size:24px}
  .svx-foot{flex-wrap:wrap}
  .svx-more{margin-top:48px}
}

/* home network — 지구본 (10-30, 사용자 참조 mercury.com) : 옛 .map(점 지도) 대체, .map CSS 는 남김 */
.globe{position:relative;aspect-ratio:4/5;max-height:640px;width:100%;overflow:hidden;border-radius:var(--radius);
  background:
    radial-gradient(circle closest-side at 50% 50%,rgba(0,0,0,0) 50%,rgba(118,132,122,.17) 55%,rgba(118,132,122,.08) 68%,rgba(0,0,0,0) 80%,rgba(70,70,60,.06) 90%,rgba(0,0,0,0) 97%),
    radial-gradient(circle farthest-side at 50% 50%,rgba(0,0,0,0) 78%,rgba(70,70,60,.06) 87%,rgba(0,0,0,0) 95%),
    #f7f6f2}
.globe::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .4 0 0 0 0 .38 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.globe svg{position:absolute;left:7%;top:50%;width:86%;height:auto;transform:translateY(-50%);overflow:visible}
.g-halo{fill:none;stroke:#b3b8b0;stroke-width:24;opacity:.3}
.g-body{fill:url(#g-shade)}
.g-mer path{fill:none;stroke:#2f2f2d;stroke-width:.9;stroke-opacity:.9}
.g-mer-soft path{fill:none;stroke:#6f726d;stroke-width:1.8;stroke-opacity:.7}
.g-rim{fill:none;stroke:#7d807a;stroke-width:1.5;opacity:.65}
.g-pt circle{fill:#1d1d1b}
.g-pt .pulse{opacity:.35;transform-origin:center;transform-box:fill-box;animation:ping 2.4s var(--ease) infinite}
.g-pt text{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:#f5f4ef;stroke-width:4px;stroke-linejoin:round;transition:opacity .4s}
.g-pt.is-back circle{fill:#8a8c88}
.g-pt.is-back .pulse{display:none}
.g-pt.is-back text{opacity:0}
.globe-cap{position:absolute;left:0;right:0;bottom:22px;z-index:1;display:flex;justify-content:center;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.globe-cap i{width:8px;height:8px;border-radius:50%;background:var(--red)}
@media (max-width:640px){
  .globe{aspect-ratio:1/1}
  .globe-cap{bottom:14px;font-size:11px}
}

/* home dedicated — 요금제 카드 (10-30, 사용자 참조 digitalocean.com 사례 카드) : 가운데 정렬, 가격 → 요약 → 사양 → 나라 로고+상품명 → 신청하기 →
   서브페이지 .plan 카드는 그대로 */
.hplans-sec .sec-head{margin:0 auto 44px;text-align:center}
.hplans-sec .sec-head p{margin-left:auto;margin-right:auto}
.hplans-sec .tabs{text-align:center}
.hplans-sec .tab-btns{margin-bottom:32px}
.hplans-sec .tab-panel{text-align:left}
.hplans-sec .note{text-align:center;margin-top:28px}
.cm-ico{width:22px;height:22px;flex:none;color:var(--ink)}
.hplans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1080px;margin:0 auto}
.hplan{position:relative;display:flex;flex-direction:column;padding:34px 32px 30px;border:1px solid var(--line-2);border-radius:14px;background:#fff;transition:.35s var(--ease)}
.hplan:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 28px 44px -30px rgba(0,0,0,.5)}
.hplan.is-featured{background:var(--ink);border-color:var(--ink)}
.hp-price{display:flex;align-items:baseline;gap:4px}
.hp-price strong{font-size:32px;font-weight:900;color:var(--ink);letter-spacing:-.01em;line-height:1.1}
.hp-price span{font-size:13px;color:var(--muted)}
.hp-sub{margin:22px 0 18px;font-size:16px;font-weight:800;letter-spacing:-.02em}/* 10-30 기획안 p10: 가격↔요약↔사양 위아래 같은 여백(22 = 18 + 사양 첫 줄 padding 4) */
.hp-specs{flex:1;margin:0 0 28px}
.hp-specs li{display:flex;gap:9px;align-items:flex-start;padding:4px 0;font-size:14px;color:var(--text)}
.hp-specs .ico{width:15px;height:15px;margin-top:3px;color:var(--red);flex:none}
.hp-mark{display:flex;align-items:center;gap:10px;color:var(--ink)}
.hp-mark .cm-ico{width:30px;height:30px}
.hp-mark span{display:flex;flex-direction:column;line-height:1.1}
.hp-mark b{font-size:18px;font-weight:900;letter-spacing:-.03em}
.hp-mark small{margin-top:4px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.hp-go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:30px;font-weight:800;font-size:14px;color:var(--ink)}
.hp-go .arr{transition:transform .25s var(--ease)}
.hp-go:hover{color:var(--red)}
.hp-go:hover .arr{transform:translateX(4px)}
.hplan.is-featured .hp-price strong,.hplan.is-featured .hp-sub,.hplan.is-featured .hp-mark,.hplan.is-featured .hp-go{color:#fff}
.hplan.is-featured .hp-price span,.hplan.is-featured .hp-mark small{color:#a8a49b}
.hplan.is-featured .hp-specs li{color:#e8e6e1}
.hplan.is-featured .hp-go:hover{color:#ff6b5f}
@media (max-width:960px){
  .hplans{grid-template-columns:minmax(0,1fr);max-width:520px}
}
@media (max-width:640px){
  .hplan{padding:28px 24px 26px}
  .hp-price strong{font-size:28px}
}

/* home network — 서술형 목록 (10-30, 사용자 참조 mercury.com) : 박스형 .features 대체. 선택된 줄 위 선이 6초 동안 차오르면 다음 줄 */
.netlist{margin-top:44px;border-bottom:1px solid var(--line-2)}
.nl-item{position:relative;border-top:1px solid var(--line-2)}
.nl-bar{position:absolute;left:0;top:-1px;width:100%;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.nl-item.is-on .nl-bar{transform:scaleX(1)}
.netlist.is-run .nl-item.is-on .nl-bar{animation:nlbar 6s cubic-bezier(.4,.1,.8,.1) forwards}   /* 10-30: 처음부터 조금씩 차다가 끝에서 확 빨라짐(1초 4%, 3초 15%, 5초 51%). (.6,0,1,1) → "더 확" (.5,0,.75,0) → "출발만 당겨" */
.netlist.is-paused .nl-bar{animation-play-state:paused}
@keyframes nlbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nl-head{display:flex;align-items:center;gap:10px;width:100%;padding:17px 0;background:none;border:0;font:inherit;font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--muted);text-align:left;cursor:pointer;transition:color .3s}
.nl-head:hover,.nl-item.is-on .nl-head{color:var(--ink)}
.nl-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;transform:scale(0);transition:transform .3s var(--ease)}
.nl-item.is-on .nl-dot{transform:scale(1)}
.nl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.nl-item.is-on .nl-body{grid-template-rows:1fr}
.nl-body p{min-height:0;overflow:hidden;padding-left:16px;max-width:500px;font-size:15px;color:var(--muted);opacity:0;transition:opacity .35s,padding .45s var(--ease)}
.nl-item.is-on .nl-body p{padding-bottom:20px;opacity:1;transition-delay:.1s,0s}

/* home in stock — A안 (10-30) : 공통 사양 한 줄 + CPU·코어·클럭·가격 비교 목록. 서브페이지 .stock 표는 그대로 */
.hstock{border-top:2px solid var(--ink);background:#fff}
.hs-common{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:20px 28px;border-bottom:1px solid var(--line);background:var(--paper)}
.hs-live{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--ink)}
.hs-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:live 2s infinite}
.hs-common dl{display:flex;flex-wrap:wrap;gap:8px 28px;margin-left:auto}
.hs-common dl div{display:flex;align-items:baseline;gap:8px}
.hs-common dt{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hs-common dd{font-size:15px;font-weight:700;color:var(--ink)}
.hs-head,.hs-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 150px 96px;gap:28px;align-items:center;padding:0 28px}
.hs-head{height:46px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hs-row{min-height:74px;border-bottom:1px solid var(--line);transition:background .25s}
.hs-row:last-child{border-bottom:0}
.hs-row:hover{background:#faf9f6}
.hs-cpu{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px}
.hs-cpu b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.hs-cpu .tag{margin-left:0}
.hs-cpu small{flex-basis:100%;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.hs-spec{display:flex;align-items:center;gap:12px}
.hs-bar{flex:1;height:4px;border-radius:2px;background:var(--paper-2);overflow:hidden}
.hs-bar i{display:block;height:100%;border-radius:2px;background:var(--ink);transition:width 1.1s var(--ease) .2s}
.hs-row:hover .hs-bar i{background:var(--red)}
.hs-row.rv:not(.in) .hs-bar i{width:0!important}
.hs-spec em{flex:none;min-width:72px;font-style:normal;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.hs-price{display:flex;align-items:baseline;gap:3px}
.hs-price strong{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink)}
.hs-price small{font-size:12px;color:var(--muted)}
@media (max-width:960px){
  .hs-common dl{margin-left:0}
  .hs-head{display:none}
  .hs-row{grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;padding:20px}
  .hs-cpu{grid-column:1}
  .hs-price{grid-column:2;grid-row:1;justify-content:flex-end}
  .hs-spec{grid-column:1/-1}
  .hs-row .btn{grid-column:1/-1}
}
@media (max-width:640px){
  .hs-common{padding:18px 20px;gap:12px}
  .hs-common dl{gap:6px 18px}
}

/* 메인 섹션 제목 가운데 정렬 (10-30) : 05 In Stock · 06 Data Center 에 .sec-c (Services·Dedicated 는 각자 규칙).
   FAQ 는 가운데로 바꿔 봤다가 "너무 비어 보임" → 2단(faq-layout) 그대로 */
.sec-c .sec-head{margin:0 auto 52px;text-align:center}
.sec-c .sec-head p{margin-left:auto;margin-right:auto}

/* 하단 문의 띠 — 검정 + 박스 (10-30 기획안 p6, 참조 digitalocean.com "Start building today").
   바탕은 푸터와 같은 --ink, 박스 안 = 점 격자 + 양옆 점선 원호 + 아래에서 올라오는 빨간 빛(우리 색). 옛 .cta-band/.cta-bg 규칙은 남김 */
.cta-band.cta-dark{background:var(--ink)}
.cta-dark .wrap{display:block;padding-top:96px;padding-bottom:8px}
.cta-box{position:relative;overflow:hidden;isolation:isolate;border-radius:18px;border:1px solid rgba(255,255,255,.08);padding:88px 48px 104px;text-align:center;
  background:
    radial-gradient(ellipse 60% 88% at 50% 136%, #ffb3a6 0%, #f4705f 26%, #e5372b 44%, rgba(150,26,18,.8) 62%, rgba(60,10,7,.45) 80%, transparent 100%),
    radial-gradient(ellipse 100% 90% at 50% 140%, rgba(229,55,43,.25), transparent 72%),
    #0c0c0c}
.cta-box::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1.6px);background-size:24px 24px;background-position:12px 12px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 70%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 70%,rgba(0,0,0,.35) 100%)}
.cta-arcs{position:absolute;top:0;left:0;z-index:-1;height:100%;width:220px;color:rgba(255,255,255,.34);pointer-events:none}
.cta-arcs-r{left:auto;right:0;transform:scaleX(-1)}
.cta-tag{position:absolute;top:50%;z-index:-1;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;color:rgba(255,255,255,.38);writing-mode:vertical-rl;white-space:nowrap}
.cta-tag-l{left:20px;transform:translateY(-50%) rotate(180deg)}
.cta-tag-r{right:20px;transform:translateY(-50%)}
.cta-in{max-width:660px;margin:0 auto}
.cta-dark .eyebrow{justify-content:center}
.cta-dark h2{margin-top:6px}
.cta-dark p{margin:14px auto 0;color:rgba(255,255,255,.76)}
.cta-dark .cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:32px}
.cta-dark .btn-white:hover{background:var(--ink);color:#fff}
@media (max-width:640px){
  .cta-dark .wrap{padding-top:64px;padding-bottom:48px}
  .cta-box{padding:56px 22px 76px;border-radius:14px}
  .cta-arcs{width:110px;opacity:.7}
  .cta-tag{display:none}
}

/* 문의 박스 + 푸터 한 화면에 (10-30 기획안 p7, 시안 v8 에서 확정해 옮김).
   한꺼번에 줄였을 땐 "비율이 이상" → 박스는 안쪽 여백만 줄이고 박스↔푸터 사이 여백은 넓힘.
   큰 JPHOST(.foot-mark)는 크기 그대로 푸터 내용 뒤 배경으로 깔아 높이를 아낌. 제목만 살짝 작게(40→36). 모바일(≤640)은 위 규칙 그대로 */
@media (min-width:641px){
  .cta-dark .wrap{padding-top:64px;padding-bottom:40px}
  .cta-box{padding:40px 48px 48px}
  .cta-dark h2{font-size:36px}
  .site-footer{position:relative}
  .foot-top{position:relative;z-index:1;padding-top:56px;padding-bottom:48px}
  .foot-bottom{position:relative;z-index:1;background:var(--ink)}
  .foot-mark{position:absolute;left:0;right:0;bottom:66px;margin:0;pointer-events:none;-webkit-text-stroke-color:rgba(255,255,255,.1)}
}

/* 01 Services 위쪽 맞춤 (10-30 기획안 p8, 참조 digitalocean "Built for agents") : 탭·사진·설명 세 칸의 윗선을 맞춤(원래 가운데 정렬).
   사진 키운 비교안(?svx=big)은 사용자가 고르지 않아 삭제 — 사진 340px 그대로 */
.svx-body{align-items:start}
.svx-pane h3{line-height:1.1}

/* 10-31 히어로 설명 2줄 : index.php 에서 문장 사이 <br>, 데스크톱은 폭 제한(540px)을 풀어 둘째 문장이 한 줄에 들어가게 */
@media (min-width:641px){
  .hero-sf .lead{max-width:none}
}

/* 10-31 기획안 p11 : 04 Network 설명 문단 ↔ 목록 사이 여백 44 → 80px (섹션이 세로로 커지는 건 괜찮다고 함)
   2차("목록을 줄이더라도 여백 더") : 여백 80 → 120px, 목록 줄 높이 17 → 12px·글자 16.5 → 15.5px, 설명 15 → 14px */
.net .netlist{margin-top:120px}
.net .nl-head{padding:12px 0;font-size:15.5px}
.net .nl-body p{font-size:14px}
.net .nl-item.is-on .nl-body p{padding-bottom:14px}
@media (max-width:640px){
  .net .netlist{margin-top:56px}
}

/* 10-31 기획안 p12 : 회사소개 Vision — 위 2단(제목 | 설명) + 아래 "What we do" 4칸(윗선 + 아이콘 + 제목 + 설명). 아이콘 있음/없음 비교 후 "있음" 확정 */
.vis-top{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.vis-top h2{font-size:40px;font-weight:var(--fw-title);letter-spacing:var(--ls-title);line-height:1.18}
.vis-top p{padding-top:34px;font-size:17px;color:var(--text)}
.vis-label{margin-top:96px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vis-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:16px}
.vis-col{padding-top:20px;border-top:1px solid var(--line-2)}
.vis-col .f-ico{width:40px;height:40px;margin-bottom:18px}
.vis-col .f-ico .ico{width:20px;height:20px}
.vis-col h3{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.vis-col p{margin-top:8px;font-size:14.5px;color:var(--muted)}
@media (max-width:960px){
  .vis-top{grid-template-columns:1fr;gap:20px}
  .vis-top p{padding-top:0}
  .vis-label{margin-top:64px}
  .vis-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
}
@media (max-width:640px){
  .vis-top h2{font-size:30px}
  .vis-top p{font-size:16px}
}

/* 10-31 기획안 p13 : 회사소개 Our Promise — 칸이 붙은 표(feature_grid) 대신 떨어진 흰 박스. feature_grid(…, 'apart') 에만 적용 */
.features.apart{gap:20px;border:0}
.features.apart .feature{border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.35s var(--ease)}
.features.apart .feature:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(0,0,0,.35)}
@media (max-width:640px){
  .features.apart{gap:14px}
}

/* ===== v9 (10-31, v6 복사본) : 하위 페이지도 메인처럼 정렬을 섞음 =====
   - 서브 상단(page-hero) = 메인 히어로처럼 가운데
   - 상품·표·목록 섹션(요금제, In Stock, 비교, 데이터센터 등) = .sec-c 제목 가운데
   - 설명형 섹션(Bare Metal, Why…, Mitigation 등) = .sec-lr 제목 왼쪽 | 설명 오른쪽 (회사소개 Vision 과 같은 2단)
   - 2단 split·FAQ 는 그대로 왼쪽 */
.page-hero::after{background:radial-gradient(ellipse at 50% 45%,rgba(10,10,10,.55) 0%,rgba(10,10,10,.82) 70%)}
.ph-inner{text-align:center}
.page-hero h1,.page-hero .lead{margin-left:auto;margin-right:auto}
.crumb,.chips,.page-hero .hero-actions{justify-content:center}
.ph-tabs ul{justify-content:center}
.sec-c .tab-btns{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.sec-c .note{text-align:center}
.sec-lr .sec-head{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start;margin-bottom:56px}
.sec-lr .sec-head .eyebrow{grid-column:1;grid-row:1;justify-self:start}
.sec-lr .sec-head h2{grid-column:1;grid-row:2}
.sec-lr .sec-head p{grid-column:2;grid-row:2;margin-top:6px;max-width:none}
@media (max-width:960px){
  .sec-lr .sec-head{display:block}
  .sec-lr .sec-head p{margin-top:18px}
  .ph-tabs ul{justify-content:flex-start}
}

/* ===== v9 (10-31) 하위 페이지 가격표 =====
   A형 = plan_cards() 가 메인 요금제 카드(.hplan) 마크업을 씀 → 열 수(cols-2/3/4)만 여기서 맞춤
   B형 = plan_table() 비교표(.ptable) — 상품이 많은 한국 특가·일본 VPS 스탠다드 */
.hplans.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.hplans.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.hplans.cols-4 .hplan{padding:30px 26px 26px}
.sub-title+.hplans,.sub-title+.ptable{margin-top:0}
.sub-title+.ptable{border-top:0}
.hplans+.opts{max-width:1080px;margin-left:auto;margin-right:auto}
.hp-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;flex:none}
.hp-ico .ico{width:16px;height:16px}
.plan-badge-soon{background:var(--line);color:var(--muted)}
.hplan.is-soon .hp-price strong{color:var(--muted)}
.ptable{border-top:2px solid var(--ink);background:#fff;text-align:left}
.pt-head,.pt-row{display:grid;grid-template-columns:var(--pt-cols);align-items:center;gap:16px;padding:0 24px}
.pt-head{height:46px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pt-row{min-height:70px;border-bottom:1px solid var(--line);transition:background .25s}
.pt-row:hover{background:var(--paper)}
/* 추천 줄 = 상품명 옆 '추천' 뱃지만 (10-31 사용자 "이상한 핑크색" → 줄 바탕 red-soft 삭제) */
.pt-name b{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pt-spec{font-size:14px;color:var(--text)}
.pt-price{display:flex;align-items:baseline;gap:3px}
.pt-price strong{font-size:20px;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.pt-price small{font-size:12.5px;color:var(--muted)}
.pt-row .btn{justify-self:end}
@media (max-width:1100px){
  .hplans.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}
@media (max-width:960px){
  .hplans.cols-2,.hplans.cols-4{grid-template-columns:minmax(0,1fr);max-width:520px}
  .ptable{display:grid;gap:12px;border-top:0;background:none}
  .pt-head{display:none}
  .pt-row{grid-template-columns:1fr 1fr;gap:10px 16px;padding:20px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff}
  .pt-name{grid-column:1/-1}
  .pt-spec::before{content:attr(data-l);display:block;margin-bottom:2px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .pt-row .btn{justify-self:end}
}

/* ===== 표 디자인 — 흰색 바탕 판 (11-04 확정, 사용자: "흰색이 좋은 거 같아") =====
   대상 = 메인 .hstock · 서브 재고표 .table-wrap · 비교표 .ptable. 10-31 비교(1 흰색 바탕 / 2 진한 베이지) 중 1안만 남김.
   :root 는 옛 [data-tbl] 선택자와 우선순위를 같게 두려고 붙임(앞쪽 기본 표 규칙을 덮어야 함).
   공통(참조 contabo "Max Performance VPS" 표) = 위 굵은 검정 선 없음, 머리줄 굵은 본문 글씨, 줄 높이 넉넉히, 가격 22px 800(단위 작게), 버튼 알약 검정 */
:root :is(.hstock,.table-wrap,.ptable){border-top:0;background:#fff;border-radius:16px;padding:8px 20px}
:root .hs-common{background:transparent;border-bottom:1px solid var(--line-2);padding:22px 28px}
:root .hs-common dt{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
:root :is(.hs-head,.pt-head){height:64px;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink);border-bottom:1px solid var(--line-2)}
:root th{padding:22px 18px;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink);border-bottom:1px solid var(--line-2)}
:root :is(.hs-row,.pt-row){min-height:86px;border-bottom:1px solid var(--line-2)}
:root td{padding:26px 18px;border-bottom:1px solid var(--line-2)}
:root .hs-row:last-child{border-bottom:0}
:root tbody tr:last-child td{border-bottom:0}
:root .hs-bar{background:rgba(0,0,0,.08)}
:root :is(.hs-price,.pt-price){gap:4px;white-space:nowrap}
:root :is(.hs-head,.hs-row){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 190px 104px}
:root :is(.hs-price,.pt-price) strong{font-family:inherit;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
:root :is(.hs-price,.pt-price) small{font-size:12.5px;font-weight:700;color:var(--muted)}
:root td.num{font-family:inherit;font-size:18px;font-weight:800;letter-spacing:-.02em}
:root :is(.hstock,.table-wrap,.ptable) .btn{height:42px;padding:0 20px;border-radius:999px;border-color:var(--ink);background:var(--ink);color:#fff}
:root :is(.hstock,.table-wrap,.ptable) .btn:hover{border-color:var(--red);background:var(--red)}
:root :is(.hs-row,.pt-row):hover,:root tbody tr:hover td{background:var(--paper)}
:root :is(.hs-common,.hs-head,.hs-row,.pt-head,.pt-row){padding-left:8px;padding-right:8px}
:root .hs-common,:root :is(.hs-head,.hs-row,.pt-head,.pt-row),:root :is(th,td){border-color:var(--line)}

@media (max-width:960px){
  :root .ptable{padding:0;background:none;border-radius:0}
  :root .pt-row{min-height:0;padding:20px;border:1px solid transparent;background:#fff}
  :root .hstock{padding:4px 8px}
}
/* ===== v8 = v6 복사 + 기존 v7 의 검정 히어로 (10-30, 아래는 옛 v7 style.css 557~609 줄 그대로) ===== */
/* home hero — dark (v7) : contabo 처럼 메인 히어로만 검정 바탕, 나머지는 베이지 그대로 */
.hero-dark{background:#0b0b0c;color:#d8d4cc;border-bottom:0}
.hero-dark::before{display:none}
.hd-bg{position:absolute;inset:-4%;background-size:cover;background-position:center;opacity:.38;filter:grayscale(.35);animation:kenburns 26s ease-in-out infinite alternate}
.hero-dark::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,.8) 55%,#0b0b0c 100%);pointer-events:none}
.hero-dark .hero-sf-in{z-index:1}
.hero-dark .hero-kicker{color:#a7a297}
.hero-dark .sf-panel{background:rgba(6,6,6,.72);box-shadow:0 44px 80px -40px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.09);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hd-grid{width:100%;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:48px;align-items:center;text-align:left;margin-top:6px}
.hero-dark .lead{margin:0;max-width:none;font-size:17px;color:#e6e2da}
.hd-points{display:grid;gap:10px;margin-top:22px;font-size:15px;color:#bdb8ae;opacity:0;animation:fadeup .9s .45s var(--ease) forwards}
.hd-points li{position:relative;padding-left:17px}
.hd-points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.hd-points b{color:#fff}
.hero-dark .hero-actions{justify-content:flex-start;margin-top:30px}
.hd-hot{opacity:0;animation:fadeup .9s .6s var(--ease) forwards}
.hd-hot-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 12px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#a7a297}
.hd-hot-h a{color:#fff;font-weight:700}
.hd-hot-h a:hover{color:var(--red)}
.hd-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hd-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 14px 14px;border-radius:12px;background:#fff;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.hd-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -20px rgba(229,55,43,.6)}
.hd-code{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--red)}
.hd-type{margin-top:4px;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.hd-from{margin-top:14px;font-size:12px;color:var(--muted)}
.hd-price{font-size:40px;font-weight:900;letter-spacing:-.05em;line-height:1.05}
.hd-price small{margin-left:2px;font-size:14px;font-weight:700;letter-spacing:-.02em}
.hd-spec{min-height:3em;margin:10px 0 14px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--muted)}
.hd-card .btn{margin-top:auto}
.hd-card:hover .btn{background:var(--ink)}
@media (max-width:1100px){
  .hd-grid{grid-template-columns:1fr;gap:36px;text-align:center}
  .hd-copy{max-width:640px;margin:0 auto}
  .hd-points{justify-items:center}
  .hero-dark .hero-actions{justify-content:center}
}
@media (max-width:760px){
  .hd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 10-30 히어로 카드(.hd-hot) 삭제 → 설명·포인트·버튼을 전광판 아래 가운데 한 줄로 */
.hd-grid{grid-template-columns:1fr;text-align:center}
.hd-copy{max-width:720px;margin:0 auto}
.hd-points{grid-auto-flow:column;justify-content:center;gap:10px 28px}
.hero-dark .hero-actions{justify-content:center}
@media (max-width:760px){
  .hd-points{grid-auto-flow:row;justify-items:center}
}
@media (max-width:640px){
  .hero-dark .lead{font-size:15.5px}
  .hd-points{font-size:14px}
  .hd-card{padding:16px 10px 10px}
  .hd-price{font-size:32px}
}

/* v8: 히어로 설명 2줄 — 검정 히어로 설명 칸(.hd-copy) 폭 제한도 풂 (10-31) */
@media (min-width:641px){
  .hd-copy{max-width:none}
}

/* ===== v8 흰색 바탕 (11-05, 사용자 "v8 에 v10 처럼 흰색 바탕으로") =====
   v10 의 색 값만 가져옴. 구조·글꼴·둥근 정도·효과는 v8 그대로 */
:root{
  --paper:#fff; --paper-2:#f3f3f1; --white:#fff;
  --ink:#16191e; --ink-2:#2a2e35; --text:#363b44; --muted:#6c727c; --line:#e3e6ea; --line-2:#d3d7dd;
}
.site-header{background:rgba(255,255,255,.97)}
.globe{background-color:var(--paper-2)}
.g-pt text{stroke:var(--paper-2)}
/* 바탕이 흰색이 되어 흰 표 판이 묻히지 않게 테두리, hover 는 회색 */
:root :is(.hstock,.table-wrap,.ptable){border:1px solid var(--line)}
:root :is(.hs-row,.pt-row):hover,:root tbody tr:hover td{background:var(--paper-2)}
.sub a:hover,.sub a[aria-current]{background:var(--paper-2)}
@media (max-width:960px){
  :root .ptable{border:0}
  :root .pt-row{border-color:var(--line)}
}

/* v8 메인 배경 서버랙 사진 밝게 (11-05, 사용자 "서버랙 이미지가 좀 더 보이게") : 사진 .38→.45(사용자 "좀 더 어둡게" 두 번으로 .7→.55→.45), 덮는 그라데이션 .5/.8/1 → .2/.45/.82 */
.hd-bg{opacity:.45}
.hero-dark::after{background:linear-gradient(180deg,rgba(11,11,12,.2) 0%,rgba(11,11,12,.45) 55%,rgba(11,11,12,.82) 100%)}
.hero-dark :is(.hero-kicker,.lead,.hd-points){text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.85)}

/* v8 요금 카드 사양 아이콘 (11-05, 기존 jphost.co.kr 일본서버 페이지 참고) : 체크 15px → 항목별 아이콘 18px */
.hp-specs li{gap:11px;padding:5px 0}
.hp-specs .ico{width:18px;height:18px;margin-top:2.5px}