/* ===== 워드프레스 테마 적응 (앞) — 디자인 CSS 가 덮어쓸 수 있도록 먼저 둔다 ===== */
#ssr{ position:relative; z-index:0; text-align:left; }
/* 테마·에디터가 본문 요소에 얹은 여백과 목록 스타일을 걷어낸다 */
#ssr figure{margin:0}
#ssr ul,#ssr ol{margin:0;padding:0;list-style:none}
#ssr p,#ssr h1,#ssr h2,#ssr h3,#ssr h4{margin:0}
#ssr a{text-decoration:none}
#ssr button{font:inherit;color:inherit;background:none;border:0}
#ssr video{display:block;max-width:100%}


@font-face{
  font-family:'Pretendard Variable';
  font-style:normal;
  font-display:swap;
  font-weight:45 920;
  src:url('/wp-content/uploads/sangseung-recruit/pretendard-variable.woff2') format('woff2-variations');
}


  #ssr{
    /* light ground, cool-neutral bias toward the brand blue */
    --bg:#ffffff;
    --bg-soft:#f2f5f9;
    --ink:#0f1621;
    --ink-2:#333d4b;
    --muted:#69737f;
    --line:#dde3ea;
    --line-2:#c9d2dc;

    /* 상승기획 사이트에서 뽑은 색. 흰 배경에서는 남색 두 톤이 강조를 맡고,
       하늘색은 어두운 배경 위 "가장 세게 짚는 한 마디"에만 쓴다.
       하늘색을 흰 배경에 올리면 대비가 1.9:1까지 떨어져 글자가 사라진다 */
    --brand:#1464AC;      /* 밝은 남색 — 흰 배경 강조의 기본 */
    --brand-ink:#1464AC;
    --brand-rgb:20,100,172;   /* 위 색의 rgb. 글로우·그림자가 색을 따라오게 */
    --navy:#104c82;       /* 짙은 남색 — 보조. 두 톤 대비가 그라데이션을 만든다 */
    --navy-ink:#104c82;
    --sky:#00c5fe;        /* 최상위 강조. 어두운 면 위에서만 */
    --sky-rgb:0,197,254;
    /* 같은 하늘색을 흰 배경에서도 쓰기 위한 어두운 짝. 색상은 그대로(195°) 두고
       밝기만 내렸다 — 대비 5.8:1 이라 글자로 쓸 수 있다.
       면(막대·바탕)에는 원색 --sky 를, 글자에는 이 색을 쓴다 */
    --sky-ink:#0a6d8f;

    --w:1200px;
    /* the webfont registers as "Pretendard Variable", so it has to lead the stack —
       otherwise a locally installed static Pretendard would win instead. */
    --f:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",sans-serif;
  }
  #ssr, #ssr *{box-sizing:border-box}
  /* any `display` declaration outranks the hidden attribute, so elements toggled by
     script (the form, its thank-you panel, the market dropdown) need this to stay put */
  #ssr [hidden]{display:none!important}
  #ssr{scroll-behavior:smooth}
  /* anchored sections must clear the sticky header */
  #ssr section[id]{scroll-margin-top:100px}
  @media(prefers-reduced-motion:reduce){#ssr{scroll-behavior:auto}}
  /* Korean wraps per-character by default, which splits words like 해석합니|다.
     keep-all forces breaks at word boundaries instead. */
  #ssr{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
       -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;
       word-break:keep-all;overflow-wrap:break-word}
  #ssr h1,#ssr h2,#ssr h3,#ssr p{text-wrap:pretty}
  #ssr img{max-width:100%;display:block}
  #ssr .wrap{width:min(var(--w),calc(100% - 48px));margin-inline:auto}
  #ssr .o{color:var(--brand)} #ssr .g{color:var(--navy-ink)}
  #ssr section{padding:clamp(80px,10vw,140px) 0}
  #ssr .soft{background:var(--bg-soft)}
  #ssr h2{font-size:clamp(32px,4.6vw,52px);line-height:1.35;font-weight:800;letter-spacing:-.02em;margin:0;
     text-wrap:balance}
  /* every part opens with the same English label, so the page has one voice */
  #ssr .eyebrow{font-size:14px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin:0 0 22px}
  #ssr .lead{color:var(--muted);font-size:clamp(16.5px,1.8vw,19px);margin:24px 0 0}

  /* every section announces itself the same way: English label, Korean title, lead */
  #ssr #services .eyebrow,#ssr #services h2,#ssr #services .lead,#ssr #market .eyebrow,#ssr #market h2,#ssr #market .lead,#ssr #insight .eyebrow,#ssr #insight h2,#ssr #insight .lead,#ssr #faq .eyebrow,#ssr #faq h2{text-align:center}
  #ssr #services .lead,#ssr #market .lead,#ssr #insight .lead{margin-inline:auto;max-width:700px}
  #ssr .btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:15px 28px;
       font-weight:700;font-size:17px;text-decoration:none;border:1px solid transparent;cursor:pointer;
       transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
  #ssr .btn:hover{transform:translateY(-2px)}
  #ssr .btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
  #ssr .btn-brand{position:relative;overflow:hidden;background:var(--brand);color:#fff;
              box-shadow:0 10px 26px -10px rgba(var(--brand-rgb),.42)}
  #ssr .btn-brand::after{content:"";position:absolute;top:0;bottom:0;width:42%;left:-60%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
    transform:skewX(-18deg)}
  #ssr .btn-brand:hover::after{animation:ssr-sheen .75s ease-out}
  @keyframes ssr-sheen{to{left:130%}}
  #ssr .btn-dark{background:var(--ink);color:#fff}
  #ssr .btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
  #ssr .btn-line:hover{background:#fff;box-shadow:0 8px 22px -12px rgba(0,0,0,.25)}
  #ssr .btn-ghost-o{background:#fff;color:var(--brand-ink);border-color:var(--brand)}
  #ssr .btn-ghost-o:hover{background:#eaf3fb}
  /* buttons whose page does not exist yet: they keep their look, but the hand cursor
     would promise a click that goes nowhere, so it is the one thing taken away */
  #ssr .btn.soon{cursor:default}
  /* brand curtain on first paint — driven by CSS, so a JS failure can never
     leave the page stuck behind it */
  #ssr .intro{position:fixed;inset:0;z-index:200;background:#fff;display:grid;place-items:center;
         animation:ssr-curtain 1s cubic-bezier(.7,0,.3,1) 2.8s both}
  #ssr .intro .in{display:flex;flex-direction:column;align-items:center;gap:22px}
  /* the stacked lockup carries its own wordmark, so it needs more room than the bare symbol did */
  #ssr .intro img{width:172px;
    animation:ssr-rise 1.1s cubic-bezier(.16,1,.3,1) both,
              ssr-float 3.4s ease-in-out 1.1s infinite}
  #ssr .intro .bar{width:140px;height:4px;border-radius:999px;transform-origin:left;
    background:linear-gradient(90deg,var(--brand),var(--navy));
    animation:ssr-draw 1.2s cubic-bezier(.16,1,.3,1) .45s both}
  #ssr .intro .wm{font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;
    color:var(--muted);animation:ssr-fade 1s ease .95s both}
  @keyframes ssr-rise{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes ssr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes ssr-fade{from{opacity:0}to{opacity:1}}
  @keyframes ssr-curtain{to{opacity:0;visibility:hidden}}

  @media(prefers-reduced-motion:reduce){
    #ssr, #ssr *{transition:none!important;animation:none!important}
    #ssr .rv{opacity:1;transform:none}
    #ssr .intro{display:none}
    #ssr .eyebrow::before{width:30px}
  }

  /* header — rides the hero as a bare bar, then takes on a white ground the moment
     the page moves under it, so the nav stays legible over whatever scrolls past */
  /* fixed, not sticky: a sticky header holds its own 80px band above the hero, so a
     transparent one just shows the white page behind it. floating it over the hero is
     what lets the hero's own light show through until the white ground fades in. */
  #ssr header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;
         border-bottom:1px solid transparent;
         transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
  #ssr header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
                  border-bottom-color:var(--line)}
  /* 히어로 위에 떠 있는 동안의 실선 한 줄 — sangseung.net 이 투명 헤더에 두는 흰 테두리 */
  #ssr.hero-dark header:not(.scrolled){border-bottom-color:rgba(255,255,255,.2)}
  #ssr .nav{display:flex;align-items:center;justify-content:space-between;height:80px}
  /* the horizontal lockup already contains the wordmark, so the brand link is the image
     alone — no text beside it to fall out of sync with the logo's own type. */
  #ssr .brand{display:flex;align-items:center;text-decoration:none}
  /* sangseung.net 과 같은 로고·같은 높이(데스크톱 40px / 모바일 24px) */
  #ssr .brand img{height:40px;width:auto;display:block}
  #ssr .nav ul{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
  /* 메뉴 글자도 sangseung.net 규격 — 18px / 600 / 자간 -.027em */
  #ssr .nav a{color:var(--ink);text-decoration:none;font-size:18px;font-weight:600;letter-spacing:-.027em;
         transition:color .2s ease}
  /* 그쪽 헤더는 밑줄 없이 색만 바뀐다. 색은 그 사이트의 primary(#104c82) = 우리 --navy */
  #ssr .nav a:hover{color:var(--navy)}
  /* 채용 has no page yet and no href, so it must not pretend to be clickable */
  #ssr .nav a.soon{cursor:default}
  #ssr .nav a.soon:hover{color:var(--ink)}
  #ssr .nav .btn{padding:11px 22px;font-size:15px;letter-spacing:-.01em;
            transition:background .3s ease,color .3s ease,border-color .3s ease}
  /* the diagnosis link is the conversion, so it wears the button — but it stays an
     outline throughout. the solid blue belongs to the hero button on the first screen
     and to the floating button after that; a third one would just dilute both. */
  #ssr .nav .btn-brand{background:transparent;color:var(--brand-ink);border-color:var(--brand)}
  #ssr .nav .btn-brand:hover{background:#eaf3fb;color:var(--brand-ink)}
  @media(max-width:900px){
    #ssr .nav ul{gap:0}
    #ssr .nav ul li:not(.cta-li){display:none}
  }
  @media(max-width:767px){#ssr .brand img{height:24px}}

  /* motion */
  #ssr .rv{opacity:0;transform:translateY(20px);
      transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),
                 transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  #ssr .rv.in{opacity:1;transform:none}
  #ssr header.scrolled{box-shadow:0 10px 28px -22px rgba(15,22,33,.55)}


  /* reading progress, drawn in the brand gradient along the header edge */
  #ssr header::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:var(--sp,0%);
    background:linear-gradient(90deg,var(--brand),var(--navy));transition:width .12s linear}

  /* 밑줄 훑기는 걷었다 — sangseung.net 헤더는 색만 바뀐다 */

  /* 내려갈 때 헤더가 접히고 올라갈 때 다시 나온다. sangseung.net 의 거동과 값을
     그대로 가져왔다(0.3s / cubic-bezier(.41,.61,.36,1.08), 사라질 때 투명도는 더 빨리) */
  #ssr header{transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease,
                   transform .3s cubic-bezier(.41,.61,.36,1.08),opacity .2s ease}
  #ssr header.tucked{transform:translate3d(0,-100%,0);opacity:0;pointer-events:none}
  /* 움직임을 줄이는 설정에서는 접지 않는다 — 헤더가 사라지는 것은 큰 움직임이다 */
  @media(prefers-reduced-motion:reduce){
    #ssr header.tucked{transform:none;opacity:1;pointer-events:auto}
  }

  /* every section label draws its own gradient rule, echoing the hero lockup.
     It centres itself — text-align can't centre an inline-flex box, only its contents. */
  #ssr .eyebrow{display:flex;align-items:center;justify-content:center;gap:13px}
  #ssr .eyebrow::before{content:"";width:0;height:3px;border-radius:999px;flex:none;
    background:linear-gradient(90deg,var(--brand),var(--navy));
    transition:width .85s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .2s)}
  #ssr .eyebrow.in::before{width:30px}
  /* the contact label is a two-line display headline beside the form, not a section tag */
  #ssr #contact .eyebrow{display:block;text-align:left}
  #ssr #contact .eyebrow::before{display:none}

  /* cards catch the light where the cursor is */
  #ssr .p-card,#ssr .icard,#ssr .mstep{position:relative;overflow:hidden}
  #ssr .p-card::after,#ssr .icard::after,#ssr .mstep::after{content:"";position:absolute;inset:0;pointer-events:none;
    opacity:0;transition:opacity .4s ease;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
               rgba(var(--brand-rgb),.11),transparent 62%)}
  #ssr .p-card:hover::after,#ssr .icard:hover::after,#ssr .mstep:hover::after{opacity:1}
  #ssr .icard > *{position:relative;z-index:1}
  #ssr .icard .arw{transition:transform .32s cubic-bezier(.2,.7,.2,1)}
  #ssr .icard:hover .arw{transform:translate(4px,-4px)}

  /* hero */
  /* the header no longer holds a band of its own, so the hero has to leave room for it */
  #ssr #hero{position:relative;overflow:hidden;background:#fff;
        padding:calc(clamp(64px,7vw,104px) + 80px) 0 clamp(56px,6vw,84px)}
  #ssr .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.04fr;
             gap:clamp(44px,5vw,80px);align-items:center}

  /* slow drifting brand light behind the hero */
  #ssr .aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  #ssr .aura::before,#ssr .aura::after{content:"";position:absolute;width:640px;height:640px;border-radius:50%;
    filter:blur(90px)}
  #ssr .aura::before{background:radial-gradient(circle,rgba(var(--brand-rgb),.30),transparent 66%);
    top:-200px;left:-160px;animation:ssr-drift-a 24s ease-in-out infinite alternate}
  #ssr .aura::after{background:radial-gradient(circle,rgba(16,76,130,.20),transparent 66%);
    bottom:-260px;right:-140px;animation:ssr-drift-b 29s ease-in-out infinite alternate}
  @keyframes ssr-drift-a{to{transform:translate(96px,64px) scale(1.14)}}
  @keyframes ssr-drift-b{to{transform:translate(-86px,-54px) scale(1.09)}}

  /* tagline lockup — the brand's real line, set as type, not a pill */
  #ssr .kicker{display:flex;flex-direction:column;gap:9px;margin:0 0 30px}
  #ssr .kicker .en{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:800;
              letter-spacing:.22em;color:var(--ink);text-transform:uppercase}
  #ssr .kicker .en::before{content:"";width:34px;height:3px;border-radius:999px;flex:none;
    background:linear-gradient(90deg,var(--brand),var(--navy));
    transform-origin:left;animation:ssr-draw 1s cubic-bezier(.16,1,.3,1) .15s both}
  @keyframes ssr-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  #ssr .kicker .ko{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;padding-left:48px}

  /* headline lines rise out of a mask */
  #ssr .hero-h{font-size:clamp(44px,5.2vw,74px);font-weight:900;line-height:1.28;letter-spacing:-.035em;margin:0}
  #ssr .hero-h .ln{display:block;overflow:hidden}
  #ssr .hero-h .ln b{display:block;font-weight:inherit}
  #ssr .hero-h.mask .ln b{transform:translateY(115%);
    transition:transform 1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
  #ssr .hero-h.mask.in .ln b{transform:none}
  #ssr .hero-copy{max-width:530px;margin:32px 0 0;font-size:18.5px;line-height:1.95;color:var(--muted)}
  #ssr .hero-copy b{font-weight:800;color:var(--ink)}
  #ssr .hero-copy .gl{color:var(--navy);font-weight:800}
  #ssr .hero-copy .ol{color:var(--brand);font-weight:800}
  #ssr .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
  #ssr .hero-note{margin:24px 0 0;color:#8b96a3;font-size:13.5px}

  /* performance-based model card */
  #ssr .model{background:var(--bg-soft);border:1px solid var(--line);border-radius:22px;padding:32px 30px}
  #ssr .model .lab{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--muted);margin-bottom:22px}
  #ssr .mstep{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;background:#fff;
         border:1px solid var(--line);border-radius:14px;padding:17px 18px;
         transition:transform .3s ease,box-shadow .3s ease}
  #ssr .mstep:hover{transform:translateY(-2px);box-shadow:0 16px 32px -22px rgba(15,22,33,.45)}
  #ssr .mstep.key{border-color:var(--brand);animation:ssr-breathe 3.6s ease-in-out infinite}
  @keyframes ssr-breathe{
    0%,100%{box-shadow:0 16px 34px -26px rgba(var(--brand-rgb),.5)}
    50%{box-shadow:0 20px 46px -22px rgba(var(--brand-rgb),.85)}
  }
  #ssr .mnum{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);display:grid;
        place-items:center;font-weight:900;font-size:13px;color:var(--muted)}
  #ssr .mstep.key .mnum{border:2px solid var(--brand);color:var(--brand)}
  #ssr .mstep .t{font-weight:800;font-size:17.5px}
  #ssr .mstep .d{font-size:14px;color:var(--muted);margin-top:2px;line-height:1.6}
  #ssr .mdown{width:52px;text-align:center;color:#bfc9d4;font-size:16px;margin:8px 0;
         animation:ssr-bob 2.4s ease-in-out infinite}
  #ssr .mdown:nth-of-type(4){animation-delay:.35s}
  @keyframes ssr-bob{
    0%,100%{transform:translateY(-2px);opacity:.45}
    50%{transform:translateY(3px);opacity:1}
  }
  /* the card's closing line — it is the whole model in one sentence, so it should not
     be set smaller than the step descriptions it is meant to sum up */
  #ssr .mfoot{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line-2);
         font-size:18px;line-height:1.6;color:var(--ink-2);font-weight:600;text-align:center;
         letter-spacing:-.01em}
  #ssr .mfoot b{color:var(--ink);font-weight:800}

  /* coverage marquee — platforms only. countries used to ride in the same row, which
     left the strip listing two different kinds of thing and reading as neither. */
  #ssr .cover{border-top:1px solid var(--line);margin-top:clamp(46px,5vw,68px);padding-top:30px;
         display:flex;align-items:center;gap:22px}
  #ssr .cover .lb{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.06em;white-space:nowrap}
  #ssr .cover .rail{flex:1;overflow:hidden;height:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  #ssr .marq{display:flex;gap:10px;width:max-content;animation:ssr-marq 44s linear infinite;padding:4px 0}
  #ssr .cover:hover .marq{animation-play-state:paused}
  /* the old pills were 14.5px of grey on white and scrolled past too fast to read.
     bigger type, darker ink, and the brand mark to anchor each name. */
  #ssr .plt{display:flex;align-items:center;gap:9px;white-space:nowrap;
       border:1px solid var(--line-2);border-radius:999px;padding:10px 20px;
       font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;background:#fff;
       transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
  #ssr .plt:hover{border-color:var(--line);transform:translateY(-2px);
             box-shadow:0 10px 24px -14px rgba(15,22,33,.4)}
  #ssr .pico{width:19px;height:19px;flex:none;display:block}
  /* Douyin · Tmall · Lazada have no freely licensed vector mark, so they wear the same
     pill without one. drop their icons in and they will match the rest. */
  #ssr .plt.noico{padding-left:20px}
  @keyframes ssr-marq{to{transform:translateX(-50%)}}
  @media(max-width:700px){#ssr .cover .lb{display:none}}

  @media(max-width:1000px){#ssr .hero-grid{grid-template-columns:1fr;gap:48px}}

  /* the six steps now live under the five principles */
  /* the six steps are a sub-part of the five principles, not a new section:
     no eyebrow, a smaller heading, and a stem that ties them to the block above */
  #ssr .flow-block{position:relative;margin-top:clamp(74px,7vw,104px);padding-top:56px}
  #ssr .flow-block::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;
    width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--line-2))}
  #ssr .flow-head{text-align:center;margin-bottom:clamp(42px,4vw,56px)}
  #ssr .flow-head h3{margin:0;font-size:clamp(19px,2.1vw,25px);font-weight:800;letter-spacing:-.015em;
                color:var(--ink-2)}
  #ssr .flow-head h3 .o{color:var(--brand)}

  #ssr .steps{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
  #ssr .step{text-align:center;position:relative;padding:0 6px}
  /* the connector draws itself as each step arrives */
  #ssr .step::after{content:"";position:absolute;top:38px;left:50%;width:100%;height:1px;z-index:0;
    background:var(--line-2);transform:scaleX(0);transform-origin:left;
    transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .3s)}
  #ssr .step.in::after{transform:scaleX(1)}
  #ssr .step:last-child::after{display:none}

  #ssr .dot{width:76px;height:76px;border-radius:50%;border:1px solid var(--line-2);margin:0 auto 26px;
       position:relative;z-index:1;background:#fff;display:grid;place-items:center;color:#9aa5b1;
       transition:transform .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease}
  #ssr .step:hover .dot{transform:translateY(-4px);border-color:var(--ink);color:var(--ink);
                   box-shadow:0 16px 34px -22px rgba(15,22,33,.5)}
  #ssr .step.on .dot{border:1.5px solid var(--brand);color:var(--brand);
                box-shadow:0 12px 32px -16px rgba(var(--brand-rgb),.5);
                animation:ssr-pulse 3.4s ease-in-out infinite}
  @keyframes ssr-pulse{
    0%,100%{box-shadow:0 12px 32px -16px rgba(var(--brand-rgb),.45)}
    50%{box-shadow:0 14px 40px -14px rgba(var(--brand-rgb),.8)}
  }
  #ssr .step:hover.on .dot{border-color:var(--brand);color:var(--brand)}

  #ssr .step .n{color:#98a3b0;font-size:12px;font-weight:800;letter-spacing:.14em}
  #ssr .step .t{font-weight:800;font-size:18.5px;margin:7px 0 10px;letter-spacing:-.01em}
  #ssr .step.on .t{color:var(--brand)}
  #ssr .step .d{color:var(--muted);font-size:14px;line-height:1.65}
  @media(max-width:860px){
    #ssr .steps{grid-template-columns:repeat(2,1fr);gap:44px 12px}
    #ssr .step::after{display:none}
  }

  /* direction */
  #ssr #direction{text-align:center}
  #ssr #direction h2{margin-bottom:26px}
  #ssr #direction .lead{margin-bottom:64px}
  #ssr .qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:left}
  #ssr .qcard{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;display:flex;
         flex-direction:column;justify-content:space-between;padding:30px 26px;color:#fff;isolation:isolate;
         box-shadow:0 18px 44px -22px rgba(15,22,33,.45)}
  #ssr .qcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
             filter:brightness(.72) saturate(.92);
             transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  #ssr .qcard:hover img{transform:scale(1.06)}
  /* the copy has to win over the photo, so the scrim is heavier where text sits */
  #ssr .qcard::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(9,13,20,.88) 0%,rgba(9,13,20,.60) 42%,
               rgba(9,13,20,.72) 62%,rgba(9,13,20,.93) 100%)}
  #ssr .qcard .n{font-size:26px;font-weight:800;margin-bottom:14px}
  #ssr .qcard .n.o{color:var(--sky)}
  #ssr .qcard .n.g{color:var(--navy)}
  #ssr .qcard .q{font-size:20.5px;font-weight:800;line-height:1.45;letter-spacing:-.01em}
  #ssr .qcard .a{font-size:14px;line-height:1.75;color:#e4e9ef}
  /* sits midway between the cards and the section edge: this margin matches the
     section's own bottom padding, so the space above and below it is equal */
  #ssr #direction .close{margin-top:clamp(80px,10vw,140px);font-size:clamp(22px,3.2vw,36px);
                    font-weight:800;letter-spacing:-.02em}
  @media(max-width:980px){#ssr .qgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){#ssr .qgrid{grid-template-columns:1fr}}

  /* how we work — heading on top, five cards in a 3+2 grid so nothing is left
     stranded next to a short title */
  #ssr .how-head{text-align:center;margin-bottom:clamp(50px,5vw,72px)}
  #ssr .how-head .eyebrow{margin-bottom:20px}
  #ssr .how-head h2{font-size:clamp(30px,4.2vw,48px)}
  #ssr .princ{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
  #ssr .princ > .p-card{grid-column:span 2}
  #ssr .princ > .p-card:nth-child(4),#ssr .princ > .p-card:nth-child(5){grid-column:span 3}
  @media(max-width:1000px){
    #ssr .princ{grid-template-columns:repeat(2,1fr)}
    #ssr .princ > .p-card,
    #ssr .princ > .p-card:nth-child(4),
    #ssr .princ > .p-card:nth-child(5){grid-column:auto}
    #ssr .princ > .p-card:last-child{grid-column:1 / -1}
  }
  @media(max-width:640px){
    #ssr .princ{grid-template-columns:1fr}
    #ssr .princ > .p-card:last-child{grid-column:auto}
  }
  #ssr .p-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px 38px;
          box-shadow:0 12px 34px -26px rgba(15,22,33,.4);
          transition:transform .3s ease,box-shadow .3s ease}
  #ssr .p-card:hover{transform:translateY(-3px);box-shadow:0 24px 48px -30px rgba(15,22,33,.5)}
  #ssr .p-card .lab{font-size:15px;font-weight:800;letter-spacing:.05em;margin-bottom:20px}
  #ssr .p-card h3{margin:0 0 16px;font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.01em;
             text-wrap:balance}
  #ssr .p-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.85}
  /* closing band: the English line leads (in brand navy), the Korean supports it —
     deliberately inverted from the section headings so it doesn't read as another one */
  #ssr .band{text-align:center;margin-top:clamp(96px,10vw,150px)}
  #ssr .band .t{color:var(--navy);font-weight:800;font-size:clamp(27px,3.4vw,44px);letter-spacing:-.025em;
           line-height:1.3;margin-bottom:20px}
  #ssr .band .h{font-size:clamp(16px,1.7vw,19px);font-weight:600;color:var(--muted);letter-spacing:0;
           line-height:1.8;margin-bottom:38px}

  /* services */
  #ssr .svc{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;margin-top:70px;align-items:start}
  #ssr .tabs{list-style:none;margin:0;padding:0}
  /* the open tab's rule turns navy — navy marks "you are here" */
  #ssr .tabs li{border-bottom:1px solid var(--line);transition:border-color .25s ease}
  #ssr .tabs li.on{border-bottom:2px solid var(--navy)}
  #ssr .tabs button{width:100%;display:flex;align-items:center;gap:16px;background:none;border:0;
    padding:26px 4px;font-family:inherit;font-size:clamp(21px,2.6vw,29px);font-weight:800;
    color:var(--ink);cursor:pointer;text-align:left;letter-spacing:-.01em;opacity:.4;transition:opacity .2s}
  /* only the open step is blue — four blue numbers at once is just noise */
  #ssr .tabs button .num{font-size:16px;font-weight:800;color:var(--muted);transition:color .2s}
  #ssr .tabs li.on button{opacity:1}
  #ssr .tabs li.on button .num{color:var(--brand)}
  #ssr .tabs button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
  #ssr .panel{display:none;background:#fff;border:1px solid var(--line);border-radius:20px;padding:46px 48px;
         min-height:320px;box-shadow:0 20px 50px -34px rgba(15,22,33,.45)}
  #ssr .panel.on{display:block}
  #ssr .panel .lab{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;margin-bottom:12px}
  #ssr .panel .lab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy);flex:none}
  #ssr .panel h3{margin:0 0 30px;font-size:clamp(20px,2.4vw,29px);font-weight:800;letter-spacing:-.015em}
  /* a keyword alone says nothing — each service carries a line explaining it */
  #ssr .svcs{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px}
  #ssr .svc-item{display:grid;grid-template-columns:9px 1fr;gap:13px}
  #ssr .svc-item .pip{width:9px;height:9px;border-radius:50%;background:var(--brand);margin-top:8px}
  #ssr .svc-item .n{font-weight:800;font-size:16.5px;letter-spacing:-.01em;color:var(--ink)}
  #ssr .svc-item .dsc{margin-top:6px;font-size:14px;line-height:1.7;color:var(--muted)}
  @media(max-width:760px){#ssr .svcs{grid-template-columns:1fr}}
  @media(max-width:900px){#ssr .svc{grid-template-columns:1fr;gap:34px}#ssr .panel{padding:32px 26px}}

  /* market */
  #ssr .mkt{position:relative;margin-top:56px}

  /* the map is the ground; the pins are the control */
  #ssr .globe{position:absolute;right:-2%;top:50%;translate:0 calc(-50% + var(--py,0px));
         width:min(720px,58%);z-index:0;will-change:translate}
  #ssr .globe img{width:100%;mix-blend-mode:multiply;opacity:.32}
  #ssr .pin{position:absolute;translate:-50% -50%;z-index:3;background:none;border:0;padding:6px;
       cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:8px}
  #ssr .pin .knob{width:15px;height:15px;border-radius:50%;background:var(--brand);position:relative;
             box-shadow:0 0 0 4px rgba(var(--brand-rgb),.16);transition:box-shadow .3s ease,transform .3s ease}
  #ssr .pin .knob::after{content:"";position:absolute;inset:-7px;border-radius:50%;
    border:1.5px solid var(--brand);opacity:0;animation:ssr-ripple 2.6s ease-out infinite}
  @keyframes ssr-ripple{
    0%{transform:scale(.55);opacity:.85}
    100%{transform:scale(2);opacity:0}
  }
  #ssr .pin .lbl{font-size:12.5px;font-weight:800;letter-spacing:.1em;color:#98a3b0;transition:color .25s}
  #ssr .pin:hover .knob,#ssr .pin.on .knob{transform:scale(1.18);box-shadow:0 0 0 8px rgba(var(--brand-rgb),.22)}
  #ssr .pin:hover .lbl,#ssr .pin.on .lbl{color:var(--ink)}
  #ssr .pin:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:10px}

  /* over the map the arrow is replaced by a plane that banks toward wherever it
     is heading. the margin centres it on the pointer so it rotates about its nose. */
  #ssr .plane{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;
         z-index:4;pointer-events:none;opacity:0;transition:opacity .25s ease;
         will-change:translate,rotate;filter:drop-shadow(0 4px 7px rgba(15,22,33,.3))}
  #ssr .plane.on{opacity:1}
  #ssr .plane svg{width:100%;height:100%;display:block;fill:var(--navy)}
  /* hide the native arrow only while over the map — pins re-declare cursor, so
     they have to be overridden too or the arrow reappears on top of them. */
  @media(hover:hover){#ssr .globe,#ssr .globe .pin{cursor:none}}
  @media(hover:none){#ssr .plane{display:none}}

  #ssr .map-hint{position:relative;z-index:2;margin:0 0 24px;font-size:13.5px;font-weight:600;
            color:var(--muted);display:flex;align-items:center;gap:9px}
  #ssr .map-hint i{width:7px;height:7px;border-radius:50%;background:var(--brand);font-style:normal}

  /* pins can't be hovered on a phone, so the map is swapped for buttons there */
  #ssr .picker{display:none;gap:10px;margin-bottom:26px;position:relative;z-index:2}
  #ssr .picker button{background:#fff;border:1px solid var(--line-2);color:var(--ink-2);border-radius:999px;
    padding:10px 22px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
  #ssr .picker button.on{background:var(--brand);border-color:var(--brand);color:#fff}
  #ssr .picker button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
  #ssr .mcard{position:relative;z-index:2;display:none;background:#fff;border:1px solid var(--line);
         border-radius:22px;padding:44px 46px;max-width:720px;
         box-shadow:0 26px 60px -34px rgba(15,22,33,.4)}
  #ssr .mcard.on{display:block}
  #ssr .mcard .kick{font-size:15px;color:var(--muted);font-weight:600}
  #ssr .mcard h3{margin:6px 0 34px;font-size:34px;font-weight:800}
  /* the four scores lead, so the shape of a market lands before any prose does.
     same .meter machinery as the bars below — only the segments are dots here. */
  #ssr .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}
  #ssr .chip{border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center}
  #ssr .chip .cn{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:10px}
  #ssr .chip .meter{justify-content:center;gap:5px}
  #ssr .chip .seg{flex:none;width:9px;height:9px;border-radius:50%}
  @media(max-width:600px){#ssr .strip{grid-template-columns:repeat(2,1fr)}}

  /* labels sit in one left column so the eye can run down them and stop at the
     row it wants, instead of re-reading five headings of equal weight */
  #ssr .spec{border-top:1px solid var(--line);margin-top:26px}
  #ssr .mrow{display:grid;grid-template-columns:126px 1fr;gap:24px;align-items:start;
        padding:19px 0;border-bottom:1px solid var(--line)}
  #ssr .mrow .k{color:var(--muted);font-size:14px;font-weight:700;padding-top:2px}
  #ssr .mrow .v{color:var(--ink-2);font-size:15.5px;line-height:1.7}

  /* where Korean brands already have an edge. it is the one hopeful line in the
     card, so it gets its own block — the navy then reads as deliberate. */
  #ssr .kbrand{margin-top:22px;display:grid;grid-template-columns:126px 1fr;gap:24px;
          background:rgba(16,76,130,.07);border:1px solid rgba(16,76,130,.28);
          border-radius:14px;padding:18px 22px}
  #ssr .kbrand .k{color:var(--navy);font-size:14px;font-weight:800}
  #ssr .kbrand .v{color:var(--ink-2);font-size:15.5px;font-weight:600;line-height:1.7}
  @media(max-width:600px){#ssr .mrow,#ssr .kbrand{grid-template-columns:1fr;gap:8px}}

  #ssr .plats{display:flex;flex-wrap:wrap;gap:9px}
  #ssr .plat{border:1px solid var(--line-2);border-radius:999px;padding:9px 19px;font-size:14px;color:var(--ink-2)}
  /* scores are read, not counted — five segments instead of "4 / 5" */
  #ssr .meter{display:flex;gap:6px}
  #ssr .seg{flex:1;height:9px;border-radius:999px;background:#e6ebf1;
       transition:background .45s cubic-bezier(.2,.7,.2,1)}
  #ssr .seg:nth-child(1){transition-delay:.04s}
  #ssr .seg:nth-child(2){transition-delay:.11s}
  #ssr .seg:nth-child(3){transition-delay:.18s}
  #ssr .seg:nth-child(4){transition-delay:.25s}
  #ssr .seg:nth-child(5){transition-delay:.32s}
  #ssr .meter.lit .seg.on{background:var(--navy)}
  #ssr .meter.risk.lit .seg.on{background:var(--brand)}

  #ssr .mlegend{display:flex;gap:18px;margin-top:22px;font-size:12.5px;font-weight:600;color:var(--muted)}
  #ssr .mlegend span{display:flex;align-items:center;gap:7px}
  #ssr .mlegend i{width:8px;height:8px;border-radius:50%;font-style:normal}
  #ssr .mlegend .up i{background:var(--navy)}
  #ssr .mlegend .risk i{background:var(--brand)}
  @media(max-width:1024px){
    #ssr .globe,#ssr .map-hint{display:none}
    #ssr .picker{display:flex}
    #ssr .mcard{max-width:none}
  }
  @media(max-width:600px){#ssr .mcard{padding:30px 24px}}

  /* insight */
  #ssr #insight h2{margin-bottom:20px}
  #ssr #insight .lead{margin-bottom:52px}
  #ssr .igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  #ssr .icard{border:1px solid var(--line);border-radius:14px;padding:30px 30px 26px;background:#fff;
         color:var(--ink);min-height:190px;display:flex;flex-direction:column;justify-content:space-between;
         text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
  #ssr .icard:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(15,22,33,.45)}
  #ssr .icard .tag{color:var(--navy);font-size:14px;font-weight:700;margin-bottom:14px}
  #ssr .icard .ttl{font-weight:800;font-size:19.5px;line-height:1.55;letter-spacing:-.01em}
  #ssr .icard .arw{align-self:flex-end;font-size:20px;margin-top:22px}
  /* nothing to click yet: no lift, no pointer, and the corner says why */
  #ssr .icard.soon{cursor:default}
  #ssr .icard.soon:hover{transform:none;box-shadow:none}
  #ssr .icard.soon .arw{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);
                   border:1px solid var(--line-2);border-radius:999px;padding:5px 12px}
  #ssr .imore{display:flex;justify-content:center;margin-top:clamp(40px,4vw,54px)}
  @media(max-width:860px){#ssr .igrid{grid-template-columns:1fr}}

  /* criteria — a checklist, not cards. a 2x2 grid of cards reads as a menu you pick
     from, but all four of these have to be met, so they are stacked and ticked off. */
  #ssr #criteria{text-align:center}
  #ssr #criteria h2{margin-bottom:clamp(50px,5vw,72px)}
  #ssr .crits{max-width:900px;margin-inline:auto;text-align:left;border-top:1px solid var(--line)}
  #ssr .crit{display:grid;grid-template-columns:44px 1fr;gap:24px;align-items:start;
        padding:28px 10px;border-bottom:1px solid var(--line);transition:background .3s ease}
  #ssr .crit:hover{background:var(--bg-soft)}
  #ssr .crit .box{width:36px;height:36px;border-radius:10px;border:2px solid var(--line-2);
             display:flex;align-items:center;justify-content:center;margin-top:3px;flex:none;
             transition:background .4s ease var(--d,0s),border-color .4s ease var(--d,0s),
                        transform .4s ease var(--d,0s)}
  #ssr .crit .box svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:3.4;
                 stroke-linecap:round;stroke-linejoin:round;
                 stroke-dasharray:30;stroke-dashoffset:30;
                 transition:stroke-dashoffset .55s ease calc(var(--d,0s) + .18s)}
  /* the tick only draws once the row has actually revealed, so the four requirements
     read as being met one after another rather than all at once */
  #ssr .crit.in .box{background:var(--navy);border-color:var(--navy);transform:scale(1.06)}
  #ssr .crit.in .box svg{stroke-dashoffset:0}
  #ssr .crit .lab{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
  #ssr .crit .lab b{color:var(--brand)}
  #ssr .crit h3{margin:8px 0 9px;font-size:clamp(19px,2vw,22px);font-weight:800;letter-spacing:-.01em}
  #ssr .crit p{margin:0;color:var(--muted);font-size:15px;line-height:1.75}
  @media(max-width:560px){#ssr .crit{grid-template-columns:32px 1fr;gap:16px}
                          #ssr .crit .box{width:30px;height:30px}
                          #ssr .crit .box svg{width:17px;height:17px}}
  #ssr .crit-mid{margin:84px 0 70px;font-size:clamp(18px,2.2vw,24px);line-height:1.9;color:var(--ink-2)}
  #ssr .crit-big{font-size:clamp(24px,3.6vw,40px);font-weight:800;line-height:1.5;letter-spacing:-.02em}

  /* faq */
  #ssr #faq h2{margin-bottom:clamp(44px,4.5vw,60px)}
  #ssr .acc{border-top:1px solid var(--line-2)}
  #ssr .acc .item{border-bottom:1px solid var(--line-2)}
  #ssr .acc .item.on{background:#fff;border:1px solid var(--line);border-left:5px solid var(--brand);
                border-radius:10px;box-shadow:0 18px 44px -30px rgba(15,22,33,.45)}
  #ssr .acc button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
    background:none;border:0;padding:30px 28px;font-family:inherit;font-size:clamp(17px,2vw,23px);
    font-weight:800;color:var(--ink);cursor:pointer;text-align:left;letter-spacing:-.01em}
  #ssr .acc button:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
  /* a chevron that flips up says "this closes again" — an × says "this dismisses" */
  #ssr .acc .sign{display:grid;place-items:center;flex:none;color:var(--muted);
             transition:transform .3s cubic-bezier(.2,.7,.2,1),color .3s ease}
  #ssr .acc .item.on .sign{transform:rotate(180deg);color:var(--brand)}
  /* answers glide open instead of snapping — display:none can't be animated */
  #ssr .acc .body{max-height:0;overflow:hidden;padding:0 28px;color:var(--ink-2);font-size:16.5px;
             line-height:1.9;opacity:0;
             transition:max-height .5s cubic-bezier(.2,.7,.2,1),padding .5s cubic-bezier(.2,.7,.2,1),
                        opacity .4s ease}
  #ssr .acc .item.on .body{max-height:400px;padding:0 28px 34px;opacity:1}

  /* contact */
  /* the form is long; the left column sticks so the two sides stay in balance */
  #ssr .contact{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:start}
  #ssr .contact .side{position:sticky;top:104px}
  #ssr .contact .eyebrow{font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.25;color:var(--brand);
                    letter-spacing:-.01em;margin-bottom:36px}
  #ssr .contact h2{font-size:clamp(24px,2.9vw,33px);margin-bottom:24px}
  #ssr .contact .logo{width:150px;margin-top:40px}

  /* what the review actually checks — restates the four criteria beside the form */
  #ssr .cchk{list-style:none;margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--line);
        display:grid;gap:14px}
  #ssr .cchk li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:700;color:var(--ink-2)}
  #ssr .cchk li i{width:22px;height:22px;border-radius:50%;background:#e3eff9;color:var(--brand);flex:none;
             display:grid;place-items:center;font-style:normal}
  @media(max-width:900px){
    #ssr .contact .side{position:static}
    #ssr .contact .logo{display:none}
  }
  #ssr .form{display:grid;gap:26px;background:#fff;border:1px solid var(--line);border-radius:20px;
        padding:40px;box-shadow:0 26px 60px -38px rgba(15,22,33,.45)}
  #ssr .fsec{display:grid;gap:20px;border-top:1px solid var(--line);padding-top:28px}
  #ssr .fsec:first-of-type{border-top:0;padding-top:0}
  #ssr .fsec .ftitle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}
  #ssr .fsec .ftitle b{font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
                  color:var(--brand)}
  #ssr .fsec .ftitle span{font-size:13px;font-weight:600;color:var(--muted)}

  #ssr .field label{display:block;font-weight:700;font-size:16px;margin-bottom:10px}
  #ssr .field label small{color:var(--muted);font-weight:600;font-size:12.5px;margin-left:4px}
  #ssr .req{color:var(--brand);margin-left:3px}
  #ssr .field input,#ssr .field textarea,#ssr .field select{width:100%;background:#fdfeff;border:1px solid var(--line-2);
    border-radius:10px;padding:16px 18px;color:var(--ink);font-family:inherit;font-size:16.5px}
  #ssr .field select{appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,#7f8a97 50%),
                     linear-gradient(135deg,#7f8a97 50%,transparent 50%);
    background-position:calc(100% - 22px) 24px,calc(100% - 16px) 24px;
    background-size:6px 6px,6px 6px;background-repeat:no-repeat}
  #ssr .field input::placeholder,#ssr .field textarea::placeholder{color:#98a3b0}
  #ssr .field input:focus,#ssr .field textarea:focus,#ssr .field select:focus{outline:none;border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(var(--brand-rgb),.16)}
  #ssr .field textarea{min-height:118px;resize:vertical;line-height:1.7}
  #ssr .hint{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.65}
  #ssr .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}

  /* multi-select dropdown for target markets */
  #ssr .msel{position:relative}
  #ssr .msel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:#fdfeff;border:1px solid var(--line-2);border-radius:10px;padding:16px 18px;
    font-family:inherit;font-size:16.5px;color:var(--ink);cursor:pointer;text-align:left}
  #ssr .msel-btn.empty{color:#98a3b0}
  #ssr .msel-btn svg{flex:none;color:#7f8a97;transition:transform .25s ease}
  #ssr .msel.open .msel-btn{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.16)}
  #ssr .msel.open .msel-btn svg{transform:rotate(180deg)}
  #ssr .msel-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:#fff;
    border:1px solid var(--line-2);border-radius:12px;padding:8px;max-height:262px;overflow:auto;
    box-shadow:0 26px 54px -26px rgba(15,22,33,.5)}
  #ssr .msel-panel label{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:8px;
    font-size:15.5px;font-weight:600;cursor:pointer}
  #ssr .msel-panel label:hover{background:var(--bg-soft)}
  #ssr .msel-panel input,#ssr .radios input,#ssr .agree input{accent-color:var(--brand);width:17px;height:17px;flex:none}

  #ssr .radios{display:flex;flex-wrap:wrap;gap:10px}
  #ssr .radios label{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:999px;
    padding:11px 17px;font-size:14.5px;font-weight:600;cursor:pointer;
    transition:border-color .2s ease,background .2s ease,color .2s ease}
  #ssr .radios label:has(input:checked){border-color:var(--brand);background:#eaf3fb;color:var(--brand)}

  #ssr .err{margin:9px 0 0;font-size:13.5px;font-weight:600;color:#d63a1e}
  #ssr .msel.invalid .msel-btn{border-color:#d63a1e;box-shadow:0 0 0 3px rgba(214,58,30,.14)}

  /* the thank-you that replaces the form on submit */
  #ssr .sent{background:#fff;border:1px solid var(--line);border-radius:22px;
        padding:60px 46px;text-align:center;
        box-shadow:0 26px 60px -34px rgba(15,22,33,.4)}
  #ssr .sent .tick{width:66px;height:66px;border-radius:50%;background:var(--navy);
              margin:0 auto 26px;display:grid;place-items:center}
  #ssr .sent .tick svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:3;
                  stroke-linecap:round;stroke-linejoin:round}
  #ssr .sent h3{margin:0 0 16px;font-size:26px;font-weight:800;letter-spacing:-.01em}
  #ssr .sent p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.8}
  #ssr .sent .note{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font-size:14px}

  #ssr .agree{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--muted);line-height:1.65}
  #ssr .agree input{margin-top:3px}
  #ssr .form .btn{justify-self:end}
  @media(max-width:900px){#ssr .contact{grid-template-columns:1fr;gap:44px}#ssr .contact .logo{display:none}
                          #ssr .form{padding:28px}}
  @media(max-width:560px){#ssr .pair{grid-template-columns:1fr}}

  #ssr footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:14px;text-align:center}
  /* 사업자 정보 — 항목은 가운데로 흐르되, 좁은 화면에서 한 줄씩 접힌다 */
  #ssr .biz{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
       margin:0 auto 18px;max-width:900px;font-size:13.5px;line-height:1.75}
  #ssr .biz span{white-space:nowrap}
  #ssr .biz .addr{white-space:normal}
  #ssr .biz b{font-weight:700;color:var(--ink-2);margin-right:6px}
  #ssr .biz a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
  #ssr .biz a:hover{color:var(--brand);border-bottom-color:var(--brand)}
  #ssr .copy{padding-top:18px;border-top:1px solid var(--line);max-width:900px;margin-inline:auto}
  @media(max-width:640px){ #ssr .biz{flex-direction:column;gap:7px} }


  /* ===== 채용 페이지 전용 스타일 (기존 디자인 토큰 재사용) ===== */

  #ssr header .nav a.cur{color:var(--brand-ink)}
  #ssr header .nav a.cur::after{transform:scaleX(1);transform-origin:left}

  /* --d 로 형제 요소마다 지연을 줘서 한 덩어리가 아니라 순서대로 떠오르게 한다 */
  #ssr .reveal-up{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),
               transform .7s cubic-bezier(.16,1,.3,1) var(--d,0s)}
  #ssr .reveal-up.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){#ssr .reveal-up{opacity:1;transform:none;transition:none}}

  /* 편지 전용 — 스크롤이 닿는 순서대로 한 덩이씩 나온다.
     .reveal-up 은 한 부모 아래 형제들에게 시간차(--d)를 매겨 화면에 들어온 순간
     차례로 뜨는 방식이라, 대화가 스크롤과 무관하게 저 혼자 진행돼 버린다.
     여기서는 시간이 아니라 스크롤이 순서를 정한다 — 각 덩이가 제 자리에 닿을 때
     뜬다. 지연은 두지 않고 시간도 짧게 끊는다(0.42s) — 읽으려고 내려온 사람을
     기다리게 하면 효과가 아니라 지연이 된다 */
  #ssr .reveal-seq{opacity:0;transform:translateY(18px);
    transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.2,1)}
  #ssr .reveal-seq.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){#ssr .reveal-seq{opacity:1;transform:none;transition:none}}

  /* 히어로 — 스크롤에 따라 영상은 천천히 따라 내려오고(깊이), 카피는 먼저 물러난다.
     값은 인라인이 아니라 CSS 변수로 받는다. 인라인 스타일은 .playing 규칙을 이겨버린다 */
  #ssr .hero-media{transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));will-change:transform}
  #ssr .about-hero .wrap{transform:translate3d(0,var(--cy,0px),0);opacity:var(--co,1);
    will-change:transform,opacity}


  /* 히어로 — 채용 영상 스틸을 전면에 깔고 그 위에 문장을 얹는다.
     "누구와 일하게 되나"가 방문자의 첫 질문이라, 사진이 문장보다 먼저 답한다 */
  #ssr .about-hero{position:relative;overflow:hidden;isolation:isolate;
    min-height:min(92vh,860px);display:flex;align-items:center;
    padding:clamp(130px,15vh,180px) 0 clamp(56px,7vw,86px);background:var(--ink);
    text-align:center}
  #ssr .hero-media{position:absolute;inset:0;z-index:-2;background:var(--ink)}
  #ssr .hero-media video,#ssr .hero-media img{width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(.92) contrast(1.02)}
  /* 시작 상태는 어둡게 — 카피와 버튼이 확실히 읽혀야 한다.
     재생을 누르면 이 막이 옅어지면서 영상이 드러난다 */
  #ssr .about-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    opacity:1;transition:opacity .7s cubic-bezier(.2,.7,.3,1);
    background:
      linear-gradient(180deg,rgba(12,18,28,.86) 0%,rgba(12,18,28,.66) 38%,
                             rgba(12,18,28,.86) 74%,rgba(12,18,28,.97) 100%),
      radial-gradient(80% 60% at 88% 8%,rgba(var(--brand-rgb),.24),transparent 62%)}
  #ssr .about-hero.playing::before{opacity:.14}

  /* 재생 중에는 카피·버튼·스크롤 안내가 물러난다 */
  #ssr .about-hero .wrap{transition:opacity .45s ease,transform .45s ease}
  #ssr .about-hero.playing .wrap{opacity:0;transform:translateY(16px);pointer-events:none}

  #ssr .hero-exit{position:absolute;z-index:3;top:calc(80px + clamp(14px,2vw,26px));
    right:clamp(16px,4vw,44px);width:44px;height:44px;border-radius:50%;cursor:pointer;
    display:grid;place-items:center;font-size:18px;line-height:1;
    color:#fff;background:rgba(12,18,28,.42);border:1px solid rgba(255,255,255,.45);
    backdrop-filter:blur(6px);opacity:0;pointer-events:none;
    transition:opacity .45s ease,background .2s ease}
  #ssr .hero-exit:hover{background:rgba(12,18,28,.7)}
  #ssr .about-hero.playing .hero-exit{opacity:1;pointer-events:auto}

  /* 재생 중 조작 막대 — 아이콘만 두면 소리가 나는 중인지 알 수 없어 글자를 함께 둔다 */
  #ssr .hero-ctrl{position:absolute;z-index:3;left:50%;transform:translateX(-50%);
    bottom:clamp(20px,3.4vw,38px);display:flex;gap:8px;
    opacity:0;pointer-events:none;transition:opacity .45s ease}
  #ssr .about-hero.playing .hero-ctrl{opacity:1;pointer-events:auto}
  #ssr .hero-ctrl button{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    padding:10px 18px;border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:700;
    color:#fff;background:rgba(12,18,28,.5);border:1px solid rgba(255,255,255,.32);
    backdrop-filter:blur(8px);transition:background .2s ease,border-color .2s ease}
  #ssr .hero-ctrl button:hover{background:rgba(12,18,28,.78);border-color:rgba(255,255,255,.6)}
  /* 상태에 따라 아이콘 한 짝만 보인다 */
  #ssr .hero-ctrl .i-play,#ssr .hero-ctrl button.paused .i-pause{display:none}
  #ssr .hero-ctrl button.paused .i-play{display:block}
  #ssr .hero-ctrl .i-off,#ssr .hero-ctrl button.muted .i-on{display:none}
  #ssr .hero-ctrl button.muted .i-off{display:block}

  /* 감상할 때는 잘라내지 않는다. 배경일 때만 화면을 꽉 채우려고 cover 를 쓴다 */
  #ssr .about-hero.playing .hero-media video{object-fit:contain;background:#000}

  #ssr .about-hero h1{font-size:clamp(42px,7vw,84px);line-height:1.26;font-weight:800;
    letter-spacing:-.035em;margin:0;color:#fff;text-wrap:balance;
    text-shadow:0 2px 30px rgba(0,0,0,.35)}
  /* 어두운 영상 위에서는 남색이 배경에 묻힌다.
     sangseung.net 히어로와 같은 하늘색으로 올려 흰 카피와 대비를 만든다 */
  #ssr .about-hero h1 .o{color:var(--sky)}

  #ssr .hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
    margin:clamp(46px,5.6vw,74px) 0 0}
  /* 재생 버튼은 페이지의 다른 버튼과 같은 알약이다. 어두운 히어로 위라
     초점 테두리만 흰색으로 뒤집는다 — 남색 테두리는 여기서 보이지 않는다 */
  #ssr .hero-cta .btn:focus-visible{outline-color:#fff}
  /* ▶ 는 글리프라 라벨과 같은 크기로 두면 혼자 커 보인다 */
  #ssr .hero-cta .tri{font-size:11px;line-height:1}

  /* 첫 화면 아래로 이어진다는 표시.
     영상이 화면을 꽉 채우니 여기서 페이지가 끝난 줄 알고 내려가지 않는 사람이 생긴다.
     재생 버튼과 경쟁하면 안 되므로 작고 조용하게 두되, 흐르는 선으로 존재만 알린다.
     누르면 바로 아래 목차로 내려간다 — 표시를 보고 손이 가는 사람에게 길을 준다.
     스크롤을 시작하면 카피와 같은 --co 를 따라 함께 물러나고, 영상을 재생하면 사라진다 */
  #ssr .hero-down{position:absolute;z-index:2;left:50%;translate:-50% 0;
    bottom:clamp(18px,2.6vw,30px);
    display:flex;flex-direction:column;align-items:center;gap:9px;
    padding:6px 12px 0;text-decoration:none;
    font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(255,255,255,.72);opacity:var(--co,1);
    transition:color .2s ease,opacity .35s ease}
  #ssr .hero-down:hover{color:#fff}
  #ssr .hero-down:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:6px}
  /* 선은 위가 옅고 아래가 진하다 — 가만히 있어도 시선이 아래로 떨어진다 */
  #ssr .hero-down i{width:1px;height:42px;position:relative;overflow:hidden;
    background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.36))}
  #ssr .hero-down i::after{content:"";position:absolute;left:0;top:-45%;width:1px;height:45%;
    background:#fff;animation:ssr-cue 1.9s ease-in-out infinite}
  /* 영상을 보는 중에는 다른 안내와 함께 물러난다 */
  #ssr .about-hero.playing .hero-down{opacity:0;pointer-events:none}

  /* 스크롤 안내 — 히어로 바로 아래 밝은 띠에 놓인다.
     선이 위에서 내려와 글자로 이어지므로 시선이 아래로 흐른다 */
  /* 목차 띠는 걷어냈다 — 영상이 끝나면 곧바로 편지가 시작된다.
     .scrollcue 는 히어로 안의 표시(.hero-down)와 애니메이션을 공유하므로 남긴다 */
  #ssr .scrollcue{display:flex;flex-direction:column;align-items:center;gap:10px;
    width:fit-content;margin:clamp(34px,4vw,48px) auto 0;
    font-size:11px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--muted)}
  #ssr .scrollcue i{width:1px;height:44px;position:relative;overflow:hidden;
    background:linear-gradient(var(--line-2),transparent)}
  #ssr .scrollcue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;
    background:var(--brand);animation:ssr-cue 1.9s ease-in-out infinite}
  @keyframes ssr-cue{0%{top:-40%}60%,100%{top:100%}}
  @media(prefers-reduced-motion:reduce){
    #ssr .scrollcue i::after,#ssr .hero-down i::after{animation:none}
  }

  /* 헤더는 스크롤 전까지 어두운 히어로 위에 놓인다 — 글자를 흰색으로 뒤집는다 */
  #ssr.hero-dark header:not(.scrolled) .nav a{color:#fff}
  #ssr.hero-dark header:not(.scrolled) .nav a:hover{color:var(--sky)}
  #ssr.hero-dark header:not(.scrolled) .nav .btn-brand{color:#fff;border-color:rgba(255,255,255,.55)}
  #ssr.hero-dark header:not(.scrolled) .nav .btn-brand:hover{background:rgba(255,255,255,.14);color:#fff}
  /* 로고가 남색 워드마크라 어두운 히어로 위에서는 통째로 흰색으로 뒤집는다 */
  #ssr.hero-dark header:not(.scrolled) .brand img{filter:brightness(0) invert(1)}
  #ssr.hero-dark header:not(.scrolled) .navtoggle span{background:#fff}

  /* 영상 라이트박스 — 열 때 iframe 을 만들고 닫을 때 없앤다.
     그래야 창을 닫는 순간 소리도 함께 멈춘다 */
  #ssr .vmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
    padding:clamp(16px,4vw,48px);background:rgba(10,15,23,.9);backdrop-filter:blur(6px)}
  #ssr .vmodal[hidden]{display:none}
  #ssr .vmodal .box{width:min(1120px,100%);aspect-ratio:16/9;position:relative;
    border-radius:16px;overflow:hidden;background:#000;
    box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
  #ssr .vmodal iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  #ssr .vmodal .x{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
    border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
    font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center}
  #ssr .vmodal .x:hover{background:rgba(255,255,255,.16)}
  @media(max-width:640px){ #ssr .vmodal .x{top:auto;bottom:-48px;right:50%;transform:translateX(50%)} }

  /* ── 레이아웃 토큰 ────────────────────────────────────────
     간격·라운드를 스케일로 고정한다. 52px·54px 처럼 비슷하지만
     다른 값이 섞이면 페이지가 즉흥적으로 만들어진 것처럼 보인다 */
  #ssr .about-hero,#ssr #letter,#ssr #benefits,#ssr #people,#ssr #positions,#ssr #process,#ssr #closing,#ssr #cta{
    --r-lg:22px; --r-md:14px;
    --gap-head:clamp(44px,5vw,68px);   /* 섹션 헤드 ↔ 본문 */
    --gap-item:20px;                   /* 항목 사이 */
  }

  /* 섹션 헤드 — 모든 섹션이 같은 부품을 쓴다 */
  #ssr .sec-head{max-width:780px}
  /* 메인·회사소개의 .shead 와 같은 가운데 정렬 규격 */
  #ssr .sec-head.ctr{max-width:760px;margin-inline:auto;text-align:center}
  #ssr .sec-head.ctr .eyebrow{justify-content:center;gap:13px}
  #ssr .sec-head.ctr .lead{margin-inline:auto;max-width:660px}
  #ssr .sec-head .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px}
  #ssr .sec-head .lead{margin-top:20px;max-width:660px;word-break:keep-all}

  /* 컬처 카드 */
  /* 한 신입사원의 대답 — 열다섯 줄 남짓한 짧은 글이다. 여기에 크기 다섯 가지와
     굵은 덩어리 넷을 얹었더니 무엇이 중요한지가 아니라 "다 중요하다"로 읽혔다.
     역할을 둘로만 나눈다:
       지문(.ln, .coda-line) — 작은 크기 / 중간 굵기 / --ink
       대사(.quo blockquote) — 큰 크기 / 굵게      / --ink
     크기는 이 둘뿐이고, 질문이든 답이든 대사는 전부 같은 크기다.
     강조는 페이지 전체에서 한 곳뿐 — 마지막 대사의 하늘색 형광펜(.mark).
     둘이 되는 순간 어느 쪽이 결론인지 알 수 없어진다 */
  /* 간격도 하나의 값으로 묶는다. 지문·대사·맺음말이 같은 리듬으로 벌어져야
     한 편의 글로 읽힌다 (아래쪽에만 주고 마지막 것만 지운다) */
  #ssr .story{--gap-story:clamp(38px,4.4vw,56px);
    width:min(820px,100%);margin:var(--gap-head) auto 0;text-align:center}
  #ssr .story > *{margin:0 0 var(--gap-story)}
  #ssr .story > :last-child{margin-bottom:0}

  /* 지문을 옅은 회색(--ink-2) 400 으로 두었더니 대사와 알약 사이에서 사라졌다.
     크기는 그대로 두고 색과 굵기만 한 단씩 올린다 — 크기까지 키우면 대사와 경쟁한다 */
  #ssr .story .ln,#ssr .coda-line{color:var(--ink);font-weight:500;letter-spacing:-.012em;
    font-size:clamp(17.5px,1.9vw,20px);line-height:1.85;word-break:keep-all}

  /* 화자를 딱지가 아니라 얼굴(원형 아바타)로 세운다 — 얼굴은 풍선 바깥쪽,
     대사가 시작되는 첫 줄 높이에 선다. 그래서 한 발언 = 얼굴 + 풍선 한 줄이고,
     가로 배치는 flex 가 맡는다 (.say 는 row-reverse 로 좌우만 뒤집는다) */
  #ssr .quo{display:flex;align-items:flex-start;gap:clamp(18px,2.2vw,28px);padding-top:0;
    --ava:clamp(50px,6.2vw,72px)}
  #ssr .quo blockquote{margin:0;color:var(--ink);word-break:keep-all;
    font-size:clamp(20px,2.3vw,25px);font-weight:800;letter-spacing:-.025em;line-height:1.6}
  /* 묻는 쪽은 왼쪽, 답하는 쪽은 오른쪽. 지문과 맺음말은 가운데 그대로이므로
     가운데에서 벗어난 두 덩이가 그 자체로 "주고받은 말"로 읽힌다 */
  /* 질문 풍선은 왼쪽 끝까지 내보낸다. 두 풍선을 같은 값만큼 안쪽으로 당겨 봤더니
     질문은 두 줄, 답변은 여섯 줄이라 오른쪽만 크게 뻗어 판이 한쪽으로 기울어 보였다.
     짧은 쪽을 바깥으로 더 내보내야 두 발언이 같은 폭을 쓴 것처럼 균형이 맞는다.
     답변 쪽은 그대로 안쪽으로 한 뼘 당겨 둔다 — 양쪽 다 끝에 붙이면 가운데가 비어
     두 사람이 멀찍이 떨어져 말한 것처럼 보인다 */
  #ssr .quo.ask{max-width:min(92%,700px);
    margin:0 auto clamp(20px,2.2vw,30px) 0}
  #ssr .quo.say{flex-direction:row-reverse;max-width:min(92%,700px);
    margin:0 clamp(10px,3.4vw,52px) var(--gap-story) auto}
  /* 말풍선. 폭은 글에 맞춘다(fit-content). 두 풍선에 같은 폭을 주면 짧은 질문 쪽에
     빈 면이 크게 남아 판이 한쪽으로 기운 것처럼 보였다.
     글은 두 풍선 모두 왼쪽 맞춤이다. 오른쪽 풍선까지 오른쪽 맞춤으로 두었더니
     줄 시작점이 매 줄 달라져 글이 흔들려 보였다 — 자리는 오른쪽, 글은 왼쪽이다.
     면 색은 두 사람이 다르다: 묻는 쪽은 옅은 남색, 답하는 쪽은 흰색.
     얼굴 색만으로도 화자는 갈리지만 두 풍선이 같은 면이면 한 사람이 두 번 말한 것처럼
     붙어 보였다 — 자리(좌우)·얼굴·면 세 가지가 같은 방향으로 갈라져야 대화로 읽힌다.
     흰 쪽을 답변에 둔다. 답변에는 하늘색 형광펜(.mark)이 들어가는데, 옅은 남색 바탕과
     겹치면 형광펜이 흐려진다 — 형광펜이 든 풍선은 반드시 흰 면이어야 한다.
     경계는 선이 아니라 그림자로 세운다 — 선을 두르면 대사보다 풍선이 먼저 보인다.
     흰 풍선은 그림자가 없으면 바탕에 묻히므로 이 그림자가 특히 그쪽을 위한 것이다.
     꼬리는 뗐다. 얼굴이 풍선 옆에 붙어 있어 누가 한 말인지 이미 분명하고,
     꼬리까지 달면 가리키는 장치가 둘이 된다 */
  #ssr .bub{position:relative;width:fit-content;max-width:100%;
    background:var(--bub);border-radius:clamp(14px,1.6vw,20px);text-align:left;
    box-shadow:0 2px 14px rgba(15,22,33,.075),0 1px 3px rgba(15,22,33,.05);
    padding:clamp(24px,2.8vw,34px) clamp(26px,3.2vw,38px)}
  #ssr .quo.ask .bub{--bub:color-mix(in srgb,var(--brand) 10%,var(--bg))}
  #ssr .quo.say .bub{--bub:var(--bg)}
  /* 양쪽 맞춤(justify)도 대 봤다 — 한글은 어절 사이에서만 벌어지는데 줄마다
     어절 수가 달라 띄어쓰기 간격이 줄마다 튀었다. 왼쪽 맞춤으로 둔다 */
  /* 풍선 안 글을 전부 800 으로 두었더니 어느 대목이 핵심인지 구분되지 않았다.
     주고받는 대사는 한 단 내리고(600), 이야기의 결론에 해당하는 마지막 대사만
     800 으로 남긴다 — 굵기와 형광펜이 같은 줄에 겹쳐 그 한 줄만 확실히 도드라진다 */
  #ssr .bub blockquote{font-weight:600}
  /* 결론 대사는 굵기만 한 단 올린다. 색은 글자에 칠하지 않고 .mark 로 뒤에 깐다 —
     하늘색(--sky #00c5fe)은 회사 공식색이지만 흰 바탕에서 대비가 1.9:1 이라
     글자색으로는 못 쓴다. 띠로 깔면 글자색은 잉크색 그대로 두면서 공식색을 쓸 수 있다.
     이 형광펜이 페이지 전체에서 유일한 강조다 */
  #ssr .bub blockquote.key{font-weight:800}
  /* 질문에서 짚는 말은 회사 이름 하나뿐이다. 남색 글자로 올린다 —
     이쪽 풍선 바탕이 이미 옅은 남색이라 같은 계열 안에서 진하기만 달라진다.
     하늘색 형광펜은 답변 쪽 한 곳에만 두고 여기까지 쓰지 않는다 —
     강조 방식이 둘이 되면 어느 쪽이 결론인지 다시 흐려진다 */
  #ssr .quo.ask .bub b{color:var(--navy-ink);font-weight:800}
  /* 한 사람이 이어서 한 두 마디는 한 풍선 안에 담는다. 그 사이는 문단 사이보다
     좁게 — 풍선이 하나라는 것이 간격으로도 보여야 한다 */
  #ssr .bub blockquote + blockquote{margin-top:clamp(20px,2.2vw,28px)}
  /* 화자 — 풍선 안에 이름을 적어 두었더니 대사를 읽기 전에 이름부터 읽혔다.
     풍선 밖에 이름표(알약)를 세워도 대사 아래에 읽을 글자가 한 줄 더 붙는 것은 같았다.
     이름을 화면에서 아예 빼고 얼굴만 남긴다: 묻는 쪽은 회사 심볼, 답하는 쪽은 사람.
     누가 한 말인지는 좌우 자리와 얼굴 색이 말하고, 대사 옆에 더 읽을 것은 없다.
     이름은 지운 게 아니라 감춘 것이다 — .spk-sr 로 스크린리더에는 그대로 읽힌다 */
  /* 클래스 이름은 .ava 다. .who 는 아래 인재상 구간이 이미 쓰고 있고 그쪽 규칙이
     뒤에 와서 margin:auto 로 원을 가운데로 밀어 버렸다 — 이름이 겹치면 이렇게
     엉뚱한 자리에서 어긋난다 */
  /* flex:none 이 없으면 풍선이 길어질 때 원이 눌려 타원이 된다 */
  #ssr .ava{flex:none;width:var(--ava);height:var(--ava);border-radius:50%;
    display:grid;place-items:center;overflow:hidden}
  /* 묻는 쪽 얼굴은 회사 심볼 이미지 그대로다(남색 원까지 이미지에 들어 있다).
     원 색을 배경으로 한 번 더 까는 건 이미지가 늦게 뜰 때 흰 구멍이 보이지 않게 하려는 것 */
  #ssr .quo.ask .ava{background:var(--navy-ink)}
  #ssr .ava img{width:100%;height:100%;display:block}
  /* 답하는 쪽은 특정인이 아니므로 사람 아이콘 하나로 둔다. 파랑은 시안에서 가져온
     값이고, 묻는 쪽 남색 심볼과 멀리 떨어져 두 얼굴이 한눈에 갈린다.
     결론 대사의 하늘색 형광펜(--sky)과는 다른 색이다 — 얼굴은 화자를 가리키고
     형광펜은 문장을 짚는, 역할이 다른 두 색이라 굳이 맞추지 않는다.
     아이콘은 선이 아니라 면으로 그린다. 페이지의 다른 아이콘은 전부 선이지만
     색면 안에 놓이는 것은 이것 하나뿐이고, 이 크기에서 1.7px 선은 흐려 보였다 */
  #ssr .quo.say .ava{background:#0084ff}
  #ssr .ava svg{width:54%;height:54%;display:block;fill:#fff;stroke:none}
  /* 화면에서만 감추고 스크린리더에는 읽히는 화자 이름 */
  #ssr .spk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  /* 이야기의 결론에 해당하는 대사 — 페이지에서 가장 세게 짚는 한 줄이다.
     흰 바탕에서는 하늘색이 1.9:1까지 떨어져 글자색으로 쓸 수 없다. 그래서 색을
     글자에 칠하는 대신 글자 뒤에 깐다 — sangseung.net 이 강조에 쓰는 방식과 같다.
     띠는 글자 아래쪽만 덮는다. 줄 전체를 덮으면 형광펜이 아니라 상자가 된다.
     글자색은 나머지 대사와 같은 잉크색 그대로다 — 색을 두 개 쓰면 다시 어수선해진다 */
  /* 흰 바탕 어디서든 쓰는 하늘색 형광펜. 글자색은 그대로 두고 뒤에 띠만 깐다 */
  #ssr .mark{
    background-image:linear-gradient(transparent 58%,rgba(0,197,254,.34) 58%);
    padding:0 .08em;
    /* 두 줄로 나뉘어도 각 줄이 제 너비만큼 띠를 갖는다 */
    -webkit-box-decoration-break:clone;box-decoration-break:clone}

  /* 편지의 서명 — 맺음말 다음, 사진 롤 앞에 놓인다.
     위에 짧은 선을 하나 둔다. 폭 전체를 가로지르는 실선은 편지를 두 동강 냈지만,
     가운데 짧은 한 획은 "여기서 글이 끝나고 글쓴이가 남는다"는 표시로만 읽힌다.
     이름을 활자로 한 번 더 적지 않는 것도 같은 이유다 — 친필 자체가 이름이다.
     .story 는 > * 에 margin 을 걸어 두었으므로 이 규칙이 뒤에 와야 margin-top 이 산다 */
  #ssr .sign{margin:clamp(52px,5.8vw,78px) 0 0;padding-top:0}
  #ssr .sign::before{content:"";display:block;width:clamp(34px,4vw,48px);height:1px;
    background:var(--line);margin:0 auto clamp(30px,3.4vw,42px)}
  /* 로고는 뺐다 — 친필 옆에 나란히 세워 두었더니 사람의 서명이 아니라 회사 배너로 읽혔다.
     회사 이름은 바로 아래 직함 줄이 이미 말한다.
     행은 그대로 둔다: 가운데 정렬 한 줄이면 친필 하나만 있어도 자리가 맞는다 */
  #ssr .sign-row{display:flex;align-items:center;justify-content:center}
  /* 크기는 높이로 잡는다 — 폭으로 맞추면 원본 비(2.8:1)가 달라져 획 굵기가 어긋나 보인다 */
  #ssr .sign-name{height:clamp(58px,7vw,82px);width:auto;display:block}
  /* 직함은 섹션 머리의 eyebrow 와 같은 규격이다(대문자·자간 .13em·브랜드색).
     .eyebrow 를 그대로 쓰지 않은 건 그쪽에 ::before 로 짧은 선이 달려 있어서다 —
     서명 아래에 그 선까지 따라오면 위의 실선과 선이 두 개가 된다 */
  /* 친필에 바짝 붙인다 — 직함은 서명에 딸린 꼬리표이지 그 아래 놓인 다음 줄이 아니다.
     친필 PNG 아래에 여백이 붙어 있어 값은 작아도 눈에 보이는 간격은 그보다 넓다 */
  #ssr .sign-role{margin:clamp(2px,.4vw,6px) 0 0;text-align:center;color:var(--brand);
    font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}

  /* 질문만 한 단 작게 둬 봤다 — 대화의 무게는 갈리지만 짧은 글 안에 크기가
     하나 더 생긴다. 순서(묻고 답한다)가 이미 역할을 말해 주므로 같은 크기로 둔다 */

  /* 대사 사이사이에 사진을 끼워 좌우로 번갈아 놓아 봤다 — 분량은 같아도 덜 빽빽해
     보이긴 했지만, 편지가 대사를 따라 아래로 내려가는 글이 아니라 화보처럼 읽혔다.
     사진은 편지가 끝난 자리(.snaps)에 모아 두는 편이 이야기의 결을 지킨다 */

  /* 맺음말 — 네 문단(열 줄)을 두 줄로 줄였다. 편지의 결론은 이미 위의 대사가 말했고,
     여기서는 그 대사를 회사의 말로 받기만 하면 된다. 그래서 굵게 하지 않는다 —
     마지막 자리에 놓인다는 것만으로 이미 맺음말로 읽힌다.
     히어로의 "좋은 사람들이 함께할 때, 더 나은 마케팅이 시작됩니다"를 받는다 —
     첫 화면에서 던진 말을 편지 끝에서 회수하면 페이지가 한 바퀴 닫힌다.
     "병원의 성장을 만들기 전에"라고 썼다가 고쳤다. 이 페이지는 지원자만 보는 것이
     아니라 광고주도 본다 — 고객의 성장을 뒤로 미룬다는 말로 읽힐 자리다 */
  #ssr .coda-line{width:min(720px,100%);margin-inline:auto}
  /* 마지막 한 줄만 대사 규격으로 올린다 — 새 크기를 만드는 것이 아니라
     위 대사와 같은 값을 그대로 쓴다. 편지가 대사로 열려 대사로 닫힌다 */
  #ssr .coda-line.key{color:var(--ink);font-size:clamp(20px,2.3vw,25px);
    font-weight:800;letter-spacing:-.025em;line-height:1.6}


  /* 맺음말 가운데 세 구절 — 줄바꿈으로만 나열하면 세 조각이 한 문장처럼 붙어 읽힌다.
     셋을 가로로 나란히 세우고 사이에 선을 그어 각각이 다른 이야기임을 형태로 보인다.
     알약을 씌워 세로로 쌓아도 봤지만, 색면 셋이 세로로 이어지니 위 말풍선과 뭉쳐
     화면에 뜬 덩이가 다섯이 됐다 — 여기는 면이 아니라 칸으로 나누는 자리다 */
  #ssr .coda-trio{display:grid;grid-template-columns:repeat(3,1fr);
    width:min(780px,100%);margin-inline:auto;padding:0;list-style:none}
  #ssr .coda-trio li{display:flex;flex-direction:column;align-items:center;
    gap:clamp(16px,1.9vw,22px);padding:0 clamp(16px,2.6vw,32px);text-align:center}
  /* 칸을 가르는 선은 사이에만 — 바깥쪽까지 두르면 세 칸이 상자 셋이 된다 */
  #ssr .coda-trio li + li{border-left:1px solid var(--line)}
  /* 복지 구간 아이콘과 같은 규격이다(선 굵기 1.7, 둥근 끝) */
  #ssr .ticon{width:clamp(36px,3.8vw,45px);height:clamp(36px,3.8vw,45px);display:block;
    fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #ssr .coda-trio p{margin:0;color:var(--ink-2);font-weight:500;letter-spacing:-.012em;
    font-size:clamp(16px,1.7vw,18px);line-height:1.72;word-break:keep-all}
  /* 세 칸이 한꺼번에 나타나면 그냥 세 칸이다 — 차례로 떠올라야 말이 이어진다.
     가로로 서 있어 셋이 거의 동시에 기준선을 넘으므로 시간차는 여기서 준다
     (세로로 쌓았을 때는 스크롤이 그 일을 대신했다) */
  #ssr .coda-trio li:nth-child(2){transition-delay:.1s}
  #ssr .coda-trio li:nth-child(3){transition-delay:.2s}
  /* 좁은 화면에서는 세 칸이 한 줄에 안 들어간다 — 세로로 세우고 선을 눕힌다 */
  @media(max-width:640px){
    #ssr .coda-trio{grid-template-columns:1fr;gap:clamp(22px,5vw,28px)}
    #ssr .coda-trio li{padding:0}
    #ssr .coda-trio li + li{border-left:0;border-top:1px solid var(--line);
      padding-top:clamp(22px,5vw,28px)}
  }

  /* 편지가 "가장 밝게 웃고 계셨어요"로 끝나는 자리에 놓이는 스냅숏.
     제목도 캡션도 붙이지 않는다 — 표정 이야기 뒤에 표정을 덧붙여 설명하면
     사진이 근거가 아니라 장식이 된다.

     가로 사진과 세로 사진, 영상이 섞여 있다. 한 칸에 같은 비율로 가둬 잘라내면
     단체사진은 양옆이 날아가고 세로 영상은 위아래가 날아간다. 그래서 높이만 맞추고
     너비는 원본 비율에 맡긴 띠로 두고, 천천히 흘려보낸다 */
  #ssr .snaps{position:relative;margin:clamp(56px,6.5vw,88px) auto 0}
  /* 화면 끝까지 흘러가게 둔다. 래퍼 폭에서 끊기면 "지나가는 띠"가 아니라 "잘린 칸"이 된다.
     스냅은 걸지 않는다 — 계속 흐르는 띠를 칸마다 붙잡으면 움직임이 튄다 */
  #ssr .roll{display:flex;gap:clamp(10px,1.1vw,16px);overflow-x:auto;
    -webkit-overflow-scrolling:touch;margin-inline:calc(50% - 50vw);
    padding:0 0 4px;scrollbar-width:none}
  #ssr .roll::-webkit-scrollbar{display:none}
  #ssr .roll figure{flex:0 0 auto;margin:0;height:clamp(300px,34vw,460px);
    border-radius:14px;overflow:hidden;background:var(--bg-soft)}
  #ssr .roll img,#ssr .roll video{display:block;width:auto;height:100%;max-width:none;
    object-fit:cover}

  /* 앞뒤로 넘기는 버튼. 사진 위에 얹으면 사진을 가리므로 띠 아래 한 줄로 모은다.
     점(인디케이터)은 두지 않는다 — 끊김 없이 도는 띠에서 "3번째 사진"은
     가리킬 수 있는 위치가 아니다.

     꽉 찬 원 두 개는 사진보다 목소리가 크다. 얇은 테두리 하나를 실선으로 나눈
     한 덩어리로 두고, 색은 화살표에만 남긴다 */
  #ssr .roll-bar{display:flex;align-items:center;justify-content:center;
    margin:clamp(22px,2.4vw,30px) 0 0}
  #ssr .roll-nav-group{display:inline-flex;border:1px solid var(--line);border-radius:999px;
    overflow:hidden;background:var(--bg);
    transition:border-color .3s cubic-bezier(.16,1,.3,1)}
  #ssr .roll-nav-group:hover{border-color:var(--line-2)}
  #ssr .roll-nav{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:clamp(52px,5.2vw,62px);height:44px;padding:0;border:0;background:transparent;
    color:var(--brand);cursor:pointer;
    transition:background .3s cubic-bezier(.16,1,.3,1)}
  /* 두 버튼 사이 실선. 테두리 색과 같아 덩어리로 읽힌다 */
  #ssr .roll-nav + .roll-nav::before{content:"";position:absolute;left:0;top:9px;bottom:9px;
    width:1px;background:var(--line)}
  #ssr .roll-nav:hover{background:#eaf3fb}
  #ssr .roll-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .3s cubic-bezier(.16,1,.3,1)}
  /* 눌리는 방향으로 화살표만 살짝 나간다 — 덩어리는 가만히 있는다 */
  #ssr .roll-nav:hover[data-roll-prev] svg{transform:translateX(-2px)}
  #ssr .roll-nav:hover[data-roll-next] svg{transform:translateX(2px)}
  #ssr .roll-nav:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}

  @media(max-width:760px){
    #ssr .roll figure{height:clamp(260px,62vw,340px)}
    #ssr .roll-nav{width:56px;height:42px}
  }
  @media(prefers-reduced-motion:reduce){#ssr .roll-nav:hover svg{transform:none}}

  /* 포지션 카드 아래에 놓는 장면들 — 각국 마케터가 실제로 일하는 자리와 사무실.
     "지원하세요" 바로 다음에서, 지원하면 앉게 되는 자리를 보여준다.
     말소리가 없어야 전달되는 화면이라 무음 반복으로 둔다 */
  #ssr .day{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px);
    max-width:1080px;margin:clamp(40px,4.6vw,64px) auto 0}
  /* 나라 이름을 붙이지 않는다. 위에서 포지션을 문장으로 다 읽은 자리라
     장면마다 이름표를 달면 설명이 한 번 더 반복된다 */
  #ssr .daycard{position:relative;margin:0;aspect-ratio:9/16;border-radius:16px;overflow:hidden;
    background:var(--line)}
  #ssr .daycard video{display:block;width:100%;height:100%;object-fit:cover}
  /* 세로 영상 넷을 좁은 화면에서 세로로 쌓으면 스크롤만 길어진다 — 옆으로 넘긴다 */
  @media(max-width:900px){
    #ssr .day{display:flex;max-width:none;gap:12px;padding:0 24px 6px;
      margin-inline:calc(50% - 50vw);overflow-x:auto;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch}
    #ssr .daycard{flex:0 0 62%;scroll-snap-align:center}
  }

  /* 믿음을 적은 글과 선언 사이에 놓이는 한 장. 두 글 사이의 쉼표라
     위아래 여백이 같아야 어느 한쪽에 붙어 보이지 않는다.
     화면을 가득 채우면 뒤따르는 선언을 압도하므로 폭을 글보다 조금만 넓게 둔다.
     인물이 아래쪽에 몰려 있는 사진이라 크롭 기준점을 중앙보다 내린다 */
  #ssr .closing-shot{margin:clamp(44px,5vw,68px) auto;width:100%;max-width:1000px}
  /* 비율·모서리는 figure 가 아니라 img 가 갖는다 — figure 에 두면 아래 캡션까지
     같은 상자 안에 갇혀 잘린다 */
  #ssr .closing-shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
    object-position:50% 68%;border-radius:16px;background:var(--line)}
  /* 캡션은 사진에 딸린 주석이라 작게, 사진 바로 아래 붙인다 */
  #ssr .closing-shot figcaption{margin-top:12px;text-align:center;color:var(--muted);
    font-size:clamp(12.5px,1.3vw,13.5px);font-weight:500;letter-spacing:.01em}
  @media(max-width:760px){#ssr .closing-shot img{aspect-ratio:4/3}}

  /* 마무리 선언문 — 제도와 포지션을 다 본 뒤 읽는 자리라 앞뒤 여백을 넉넉히 준다 */
  #ssr .manifesto{max-width:840px;margin:0 auto;text-align:center}
  /* 제목 다음의 첫 덩어리만 다른 섹션과 같은 간격을 갖는다.
     사진 뒤의 두 번째 .manifesto 는 사진이 이미 간격을 주고 있다 */
  #ssr .sec-head + .manifesto{margin-top:var(--gap-head)}
  #ssr .closing-cta{display:flex;justify-content:center;margin-top:clamp(38px,4.4vw,58px)}
  #ssr .manifesto p{margin:0 0 24px;font-size:clamp(18px,1.95vw,21.5px);line-height:1.9;
    color:var(--ink-2);word-break:keep-all}
  #ssr .manifesto p b{color:var(--ink);font-weight:800}
  /* 사진 바로 위 문단 — 아래 여백은 사진이 갖는다 */
  #ssr .manifesto p.last{margin-bottom:0}
  /* 마지막 두 행의 대구가 이 글의 핵심이다. 앞의 글과는 사진이 이미 갈라놓았으므로
     여기서 선을 한 번 더 그으면 끊는 장치가 둘이 된다 */
  #ssr .manifesto .turn{margin-top:0;padding-top:0}
  #ssr .manifesto .turn p{margin:0 0 14px;font-size:clamp(21px,2.6vw,30px);font-weight:800;
    letter-spacing:-.025em;line-height:1.5;color:var(--ink)}
  #ssr .manifesto .turn p b{color:var(--navy-ink)}
  /* 위쪽 여백은 아래 버튼과 같은 값을 쓴다(.closing-cta 의 margin-top).
     24px 로 두었더니 위는 붙고 아래만 벌어져 이 한 줄이 대구 쪽에 딸린 것처럼
     보였다 — 위아래가 같아야 마지막 한 줄로 홀로 선다 */
  #ssr .manifesto .turn .close{margin:clamp(38px,4.4vw,58px) 0 0;
    font-size:clamp(17px,1.8vw,19.5px);
    font-weight:700;color:var(--muted);letter-spacing:-.01em}

  /* 지원 제도 — 스물다섯 개를 한 줄로 늘어놓으면 그냥 긴 목록이지만,
     근무·보상·성장 · 환경 세 갈래로 나누면 "세 방향을 모두 챙긴다"가 형태로 읽힌다.
     갈래를 기둥으로 나란히 세워 봤더니 스물다섯 줄이 한 화면에 다 깔려
     결국 "긴 목록"으로 돌아갔다 — 갈래는 왼쪽 한 열에 모으고, 고른 갈래만
     오른쪽에 편다. 한 번에 읽는 양은 최대 아홉 줄이 되고, 세 갈래가 있다는
     사실은 왼쪽에 늘 남아 있다. 성장과 환경은 한 갈래로 묶었다 — 성장 항목이
     셋뿐이라 따로 세우면 그 칸만 한 줄로 끝나 갈래의 무게가 맞지 않았다.
     왼쪽에는 분류 이름만 둔다 — 항목 수를 숫자로 붙여 봤지만 고르는 자리에
     읽을 것이 하나 더 느는 쪽이었다.
     제도 하나는 동그란 아이콘 배지 아래 이름과 설명을 세운 카드로 둔다.
     왼쪽 한 줄에 몰아 쓴 목록은 훑을 때 눈이 짚을 곳이 이름뿐이라 선을 그어야
     항목이 갈렸지만, 카드는 배지가 먼저 잡혀 선 없이도 하나씩 끊어 읽힌다.

     제도와 그 장면은 한 테두리 안에 담는다. 사진을 따로 떼어 두면 두 덩어리의 정렬이
     어긋나 보이는데, 경계가 하나면 어긋남 자체가 생길 수 없다.

     선은 최소로 줄인다. 테두리와 칸막이가 많을수록 표처럼 보인다 —
     경계는 배경 쪽으로 섞어 존재만 알리는 정도로 남긴다 */
  /* 섹션 폭(--w)을 그대로 다 쓴다. 판을 좁히면 오른쪽 칸이 못 읽을 폭이 된다 */
  #ssr .perks{--hair:color-mix(in srgb,var(--line) 62%,var(--bg));
    margin:var(--gap-head) 0 0;
    border:1px solid var(--hair);border-radius:20px;overflow:hidden;background:var(--bg)}

  /* 판의 표제. 판 바깥에 두면 어두운 배경 위에 뜬 글자가 되어 표와 따로 놀았다 —
     판 안쪽 첫 줄로 넣어 표의 머리로 만든다.
     제목은 가운데. 섹션 머리글(.sec-head.ctr)이 가운데 정렬이라 그 축을 그대로
     이어받는다 — 표제만 왼쪽에 붙이면 판이 위와 다른 격자를 쓰는 것처럼 보인다.
     "마우스를 올리면 펼쳐집니다" 안내는 뺐다 — 왼쪽 열이 이미 눌리고 얹히는
     모양(커서·선택 막대)을 하고 있어 설명 없이도 만져진다 */
  #ssr .perks-cap{display:flex;justify-content:center;
    padding:clamp(20px,2.3vw,30px) clamp(20px,2.4vw,32px);
    border-bottom:1px solid var(--hair)}
  #ssr .perks-cap h3{margin:0;color:var(--brand);text-align:center;
    font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-.025em;
    word-break:keep-all}

  /* 왼쪽에 분류 넷, 오른쪽에 그 분류의 제도. 넷을 한꺼번에 세우면 스무 줄이
     한 화면에 다 깔리지만, 고르는 자리를 왼쪽에 모아 두면 한 번에 읽는 양이
     최대 일곱 줄로 줄고 "무엇을 보고 있는지"가 왼쪽에 항상 남는다.
     왼쪽 열은 목록 폭이지 내용 폭이 아니다 — 최소 폭만 주고 나머지는 오른쪽에 넘긴다 */
  #ssr .ptabs{display:grid;grid-template-columns:minmax(190px,1.05fr) 3.6fr}
  /* 고르는 자리는 눌러 두고, 읽는 자리는 흰 바탕으로 둔다.
     --bg-soft(#f2f5f9)로 눕혔더니 흰 판과의 차이가 너무 작아 "고른 칸이 흰색"이라는
     신호 자체가 약했다. 열 전체를 한 톤 더 눌러 고른 칸이 그 위로 떠오르게 한다 */
  #ssr .prail{display:flex;flex-direction:column;
    background:color-mix(in srgb,var(--line) 52%,var(--bg));
    border-right:1px solid var(--hair)}
  /* 셋이 세로를 고르게 나눠 갖는다(flex:1) — 항목 수가 3~9 로 달라도 왼쪽 열은
     늘 반듯하다. 이 반듯함이 오른쪽의 들쭉날쭉을 받아 준다 */
  #ssr .ptab{flex:1;display:flex;align-items:center;justify-content:center;
    position:relative;margin:0;padding:clamp(20px,2.4vw,28px) clamp(18px,2vw,26px);
    border:0;border-top:1px solid var(--hair);background:transparent;
    font:inherit;text-align:center;color:var(--muted);cursor:pointer;
    transition:background .28s ease,color .28s ease}
  #ssr .ptab:first-child{border-top:0}
  #ssr .pt-name{font-size:clamp(15px,1.6vw,17px);font-weight:800;letter-spacing:-.015em;
    word-break:keep-all}
  /* 고른 칸에 하늘색 막대가 선다. 오른쪽 항목의 선택 표시와 같은 어법이라
     새로 붙인 장식이 아니라 이 판이 원래 쓰던 신호로 읽힌다.
     짧게 세워 뒀더니 "여기 뭔가 있다" 정도로만 읽혀서 칸 높이를 다 채운다 */
  #ssr .ptab::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;
    width:4px;height:0;background:var(--sky);
    transition:height .3s cubic-bezier(.2,.7,.2,1)}
  /* 고른 칸은 흰 바탕이 오른쪽 칸막이를 1px 덮으며 오른쪽 판과 한 면이 된다 —
     탭이 제 내용과 이어 붙는 이 모양이 "지금 이게 펼쳐져 있다"를 가장 확실히 말한다.
     글자도 회색에서 남색으로 올라와 고르지 않은 칸과 대비가 두 겹이 된다 */
  #ssr .ptab.is-on{background:var(--bg);color:var(--navy-ink);
    margin-right:-1px;z-index:1;
    box-shadow:0 10px 26px -18px rgba(var(--brand-rgb),.5)}
  #ssr .ptab.is-on::before{height:100%}
  #ssr .ptab:focus-visible{outline:2px solid var(--sky-ink);outline-offset:-3px}

  /* 넷을 같은 칸에 겹쳐 쌓는다 — 칸 높이가 가장 긴 분류(8개 = 세 줄)에 맞춰 한 번
     정해지고, 그 뒤로는 무엇을 골라도 판이 늘었다 줄었다 하지 않는다.
     display:none 으로 갈아 끼우면 고를 때마다 아래 사진 띠가 튄다 */
  #ssr .ppans{display:grid}
  /* 판 높이는 가장 긴 분류(세 줄)가 정한다. 짧은 분류는 그 높이만큼 늘어나되
     내용은 위에 붙지 않고 세로 가운데로 모인다 — 위에 붙여 두면 성장(3개)처럼
     한 줄짜리 분류에서 아래가 통째로 비어 판이 무너진 것처럼 보인다 */
  #ssr .ppan{grid-area:1/1;display:grid;align-content:center;
    --px:clamp(28px,3.4vw,48px);border-left:0;
    padding:clamp(34px,3.8vw,52px) var(--px) clamp(36px,4vw,56px);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .3s ease,transform .34s cubic-bezier(.2,.7,.2,1),
               visibility 0s linear .34s}
  #ssr .ppan.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  /* 항목 하나는 동그란 아이콘 배지 아래에 이름과 설명을 세로로 세운 카드다.
     줄줄이 늘어놓은 목록은 이름과 설명이 왼쪽 한 줄에 몰려 어디서 하나가 끝나는지
     선을 그어야만 알 수 있었다. 카드로 세우면 아이콘이 먼저 잡히고 그 아래가
     한 덩어리로 읽혀 선이 필요 없다 — 칸 나누는 선을 전부 걷어냈다.
     설명도 다시 펼쳐 둔다. 한 번에 한 분류(최대 여덟 장)만 나오므로
     스물다섯 줄이 한꺼번에 깔리던 문제는 이미 왼쪽 분류 열이 해결하고 있다 */
  /* 한 줄에 석 장. 넉 장씩 세우면 한 장이 좁아져 이름이 꺾이고 글자를 키울 자리가 없다.
     이 셋이라는 수 때문에 분류별 항목 수는 3 으로 나눈 나머지가 1 이 되면 안 된다 —
     마지막 줄에 카드 한 장만 남으면 줄이 끊긴 것처럼 보인다.
     그래서 9·8·8 로 맞춰 두었다(각각 3+3+3 / 3+3+2 / 3+3+2).
     항목을 더하거나 뺄 때 이 수를 함께 지켜야 한다 */
  #ssr .ppan ul{--cols:3;--cg:clamp(20px,2.6vw,40px);
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;justify-content:center;
    column-gap:var(--cg);row-gap:clamp(34px,3.8vw,50px)}
  /* 마지막 줄이 덜 차면 가운데로 모은다 —
     왼쪽에 붙여 두면 오른쪽이 빈 것이 실수처럼 보인다 */
  #ssr .ppan li{flex:0 0 calc((100% - (var(--cols) - 1) * var(--cg)) / var(--cols));
    padding:0;border:0;text-align:center}
  #ssr .ppan .r{display:flex;flex-direction:column;align-items:center}
  /* 배지 — 흰 판 위의 흰 동그라미는 보이지 않는다. 옅은 바탕과 가는 테로 형태를 세우고,
     아이콘은 처음부터 제 색(--sky-ink, 흰 바탕 대비 4.5:1)으로 둔다.
     이름보다 먼저 눈에 드는 것이 여기서는 의도다 — 스무 개를 훑는 길잡이가 아이콘이다 */
  #ssr .ppan .pico{width:clamp(70px,7.6vw,90px);height:clamp(70px,7.6vw,90px);
    display:grid;place-items:center;border-radius:50%;
    background:var(--bg-soft);border:1px solid var(--hair);color:var(--sky-ink);
    transition:background .3s ease,border-color .3s ease,
               transform .34s cubic-bezier(.2,.7,.2,1)}
  /* 획 설정은 여기 한 번만 둔다 — 20개 마크업마다 되풀이할 이유가 없다.
     배지가 커진 만큼 획은 얇게 — 1.7 을 그대로 키우면 아이콘이 굵고 무거워진다 */
  #ssr .ppan .pico svg{width:44%;height:44%;display:block;fill:none;stroke:currentColor;
    stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  /* 얹으면 배지가 하늘색으로 차오르며 한 뼘 떠오른다 */
  #ssr .ppan li:hover .pico{background:color-mix(in srgb,var(--sky) 15%,var(--bg));
    border-color:color-mix(in srgb,var(--sky) 45%,var(--bg));
    transform:translateY(-3px)}
  #ssr .ppan h4{margin:16px 0 0;font-size:clamp(16px,1.75vw,18.5px);font-weight:800;
    letter-spacing:-.025em;line-height:1.38;color:var(--ink);word-break:keep-all}
  /* 금액·조건은 이름 옆이 아니라 아래 줄에 단다. 가운데 정렬에서는 이름 옆에 붙이면
     이름이 한쪽으로 밀려 카드마다 중심이 어긋나 보인다 */
  #ssr .ppan h4 b{display:block;width:fit-content;margin:8px auto 0;
    padding:3px 11px;border-radius:999px;
    background:color-mix(in srgb,var(--sky) 13%,var(--bg));
    color:var(--sky-ink);font-size:12px;font-weight:800;
    letter-spacing:.01em;white-space:nowrap}
  /* 설명은 이름보다 한 단 낮춘다 — 카드에서 먼저 읽혀야 하는 것은 제도 이름이다.
     다만 읽으라고 둔 문장이라 --muted(4.9:1) 까지는 내리지 않는다 */
  #ssr .ppan p{margin:9px 0 0;font-size:clamp(14.5px,1.5vw,15.5px);line-height:1.7;
    color:var(--ink-2);word-break:keep-all}
  @media(hover:none){
    #ssr .ppan li:hover .pico{background:var(--bg-soft);
      border-color:var(--hair);transform:none}
  }
  @media(prefers-reduced-motion:reduce){
    #ssr .ptab,#ssr .ptab::before,#ssr .ppan,#ssr .ppan .pico{transition:none}
    #ssr .ppan{transform:none}
  }

  /* 판 아래에 이어지는 장면 띠. 어느 제도의 사진인지 설명하지 않는다 —
     제도 바로 아래에 오면 자연히 그 제도의 공기로 읽힌다.
     정사각형보다 살짝 세로로 둔다 — 원본이 전부 세로라 덜 잘리고, 네모 반듯한 것보다
     한 호흡 여유가 생긴다. 칸 사이 회색 선은 뺐다. 사진끼리 맞붙어 흐르는 편이
     한 장면씩 칸에 갇힌 것보다 낫다.
     한 테두리 안에서 선 하나로만 갈랐더니 마지막 항목의 글과 사진이 붙어 보였다 —
     판 밖으로 꺼내 사이를 띄우고 제 모서리를 갖게 한다. 선 하나보다 여백이 확실하다 */
  #ssr .pstrip{display:grid;grid-template-columns:repeat(4,1fr);
    margin-top:clamp(14px,1.8vw,22px);
    border-radius:20px;overflow:hidden;background:var(--bg-soft)}
  #ssr .pstrip figure{margin:0;aspect-ratio:5/6;overflow:hidden;background:var(--bg-soft)}
  /* 히어로 영상과 같은 보정 — 페이지 전체의 사진이 한 카메라에서 나온 것처럼 보인다 */
  #ssr .pstrip img,#ssr .pstrip video{display:block;width:100%;height:100%;object-fit:cover;
    filter:saturate(.94) contrast(1.02);
    transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
  /* 칸이 작아 정지된 사진으로 보이기 쉽다. 얹으면 천천히 밀려 들어오며 색이 돌아온다 */
  #ssr .pstrip figure:hover img,#ssr .pstrip figure:hover video{transform:scale(1.045);
    filter:saturate(1.03) contrast(1.02)}
  @media(prefers-reduced-motion:reduce){
    #ssr .pstrip figure:hover img,#ssr .pstrip figure:hover video{transform:none}
  }

  /* ── 지원 제도, 어두운 면 ──────────────────────────────
     바로 아래 인재상(#people)도 어두운 구간이다. 같은 검정을 쓰면 둘이 한 덩어리로
     이어져 인재상이 갖던 "여기서 뒤집힌다"는 효과가 사라지므로, 이쪽은 남색을
     머금은 검정으로 반 톤 낮춰 둔다 — 스크롤이 넘어갈 때 이음매가 남는다.
     빛은 왼쪽 위에서 든다. 인재상은 오른쪽 위에서 드므로 두 구간의 결이 갈린다 */
  #ssr #benefits{background:#0a1826;color:#fff;position:relative;overflow:hidden}
  #ssr #benefits::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(68% 100% at 10% 0%,rgba(var(--brand-rgb),.32),transparent 60%)}
  #ssr #benefits .wrap{position:relative;z-index:1}
  #ssr #benefits h2{color:#fff}
  /* 어두운 면 위에서 남색은 읽히지 않는다 — 강조는 하늘색이 맡는다(인재상과 같은 규칙) */
  #ssr #benefits h2 .o,#ssr #benefits .eyebrow{color:var(--sky)}

  /* 판은 어둡게 따라가지 않는다. 배경과 같은 톤으로 맞췄더니 판의 경계가 사라지고
     스무 개가 배경 위에 흩어진 것처럼 보였다 — 배경이 내려간 만큼 판은 올라가야
     "여기부터 읽는 자리"가 성립한다. 판 안쪽은 밝은 면의 규격을 그대로 쓴다:
     흰 바탕, 옅은 회색 왼쪽 열, 짙은 글자. 어두운 면 위의 흰 판이라
     대비는 오히려 밝은 배경에 있을 때보다 세다.
     그림자는 색이 아니라 깊이로 띄운다 — 테두리를 밝게 키우면 판이 아니라
     테가 먼저 보인다 */
  #ssr #benefits .perks{box-shadow:0 26px 64px -26px rgba(0,0,0,.6)}
  /* 사진 띠도 판과 한 짝이다. 사진이 뜨기 전 빈 칸이 어두우면 띠가 배경에 잠겨
     네 칸이 있다는 것조차 보이지 않는다 */
  #ssr #benefits .pstrip{box-shadow:0 26px 64px -26px rgba(0,0,0,.6)}

  /* 인재상 — 지원 제도에 이어지는 두 번째 어두운 구간.
     "이런 사람을 찾습니다"는 이 페이지의 정점이라 배경을 반전시켜 한 박자 끊는다 */
  #ssr #people{background:var(--ink);color:#fff;position:relative;overflow:hidden}
  #ssr #people::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 100% at 85% 0%,rgba(var(--brand-rgb),.3),transparent 62%)}
  #ssr #people .wrap{position:relative;z-index:1}
  #ssr #people h2{color:#fff}
  /* 어두운 면 위 — 남색은 여기서 읽히지 않는다. 히어로와 같은 하늘색을 쓴다.
     제목 안의 강조구는 이 구간의 정점이라 히어로 h1 과 같은 자리에 놓인다 */
  #ssr #people h2 .o{color:var(--sky)}
  #ssr #people .eyebrow{color:var(--sky)}
  #ssr #people .lead{color:rgba(255,255,255,.7)}

  /* 회사소개의 「다섯 가지 기준」과 같은 구조 — 큰 번호를 바깥에 두고,
     평소엔 제목만 보이다가 마우스를 얹으면 본문이 펼쳐진다. 색만 어두운 배경에 맞췄다 */
  #ssr .who{max-width:1080px;margin:clamp(10px,2vw,24px) auto 0;
    border-top:1px solid rgba(255,255,255,.16)}
  #ssr .vitem{position:relative;text-align:center;cursor:pointer;overflow:hidden;
    padding:clamp(28px,3.4vw,42px) clamp(10px,2vw,22px);
    border-bottom:1px solid rgba(255,255,255,.16);transition:background .4s}
  #ssr .vitem:hover{background:rgba(255,255,255,.05)}
  #ssr .vnum{position:absolute;top:50%;left:calc(50% - 474px);transform:translateY(-50%);
    font-size:clamp(44px,5vw,64px);font-weight:800;line-height:.9;letter-spacing:-.03em;
    color:rgba(255,255,255,.2);transition:color .4s}
  /* 번호는 장식이라 하늘색을 주지 않는다 — 다섯 번 반복되는 요소가 정점과 같은
     색을 쓰면 제목의 강조가 묽어진다. 두 남색 중 밝은 쪽을 쓴다. 짙은 쪽(#104c82)은
     이 배경에서 2.1:1 이라 쉬는 상태와 밝기가 거의 같아 호버가 표시되지 않는다 */
  #ssr .vitem:hover .vnum{color:var(--brand)}
  #ssr .vk{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--sky)}
  #ssr .vb{max-width:820px;margin:8px auto 0}
  #ssr .vt{margin:0;font-weight:800;font-size:clamp(21px,2.5vw,29px);line-height:1.34;
    letter-spacing:-.025em;color:#fff;word-break:keep-all}
  #ssr .vb p{max-height:0;opacity:0;overflow:hidden;margin:0;
    color:rgba(255,255,255,.72);font-size:clamp(16.5px,1.8vw,19px);line-height:1.85;
    word-break:keep-all;
    transition:max-height .55s cubic-bezier(.2,.7,.2,1),opacity .45s,margin .5s}
  #ssr .vitem:hover .vb p{max-height:360px;opacity:1;margin-top:18px}
  #ssr .vb p + p{margin-top:0}
  #ssr .vitem:hover .vb p + p{margin-top:1.05em}
  @media(max-width:1040px){
    #ssr .vnum{position:static;transform:none;font-size:clamp(34px,7vw,48px);margin-bottom:6px}
    #ssr .vb{max-width:100%}
  }
  /* 마우스를 쓸 수 없는 기기에서는 처음부터 펼쳐둔다 */
  @media(hover:none),(max-width:680px){
    #ssr .vb p{max-height:none;opacity:1;margin-top:12px}
  }

  /* 채용 포지션 — 본부 하나가 한 덩어리. 이름 아래 그 본부의 팀 셋이 나란히 선다.
     여섯 팀을 가로 행으로 쌓으면 스크롤이 길어져 "얼마나 뽑는지"가 한눈에 안 들어온다.
     세로 카드 셋을 나란히 두면 본부 하나가 한 화면에 담긴다 */
  #ssr .jobgroups{margin-top:var(--gap-head);display:grid;gap:clamp(38px,4vw,56px)}
  /* 본부 머리 — 이름 아래 짙은 밑줄 한 줄. 띠를 깔면 아래 카드들과 무게가 겹쳐
     어느 쪽이 묶음이고 어느 쪽이 항목인지 흐려진다 */
  #ssr .jobhead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    padding-bottom:13px;margin-bottom:clamp(18px,2vw,24px);border-bottom:2px solid var(--navy)}
  #ssr .jobhead h3{margin:0;font-size:clamp(21px,2.3vw,26px);font-weight:800;
    letter-spacing:-.025em;line-height:1.3;color:var(--navy)}
  #ssr .jobhead p{margin:0;color:var(--muted);font-size:clamp(15.5px,1.6vw,17.5px);
    line-height:1.6;word-break:keep-all}
  /* 카드마다 제 높이를 쓴다 — 늘어나지 않으면 커서를 올린 카드만 자라고 옆 둘은 그대로다 */
  #ssr .jobs{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:clamp(16px,1.9vw,24px)}
  #ssr .jobcard{display:flex;flex-direction:column;align-items:flex-start;
    padding:clamp(24px,2.5vw,32px);text-decoration:none;color:inherit;position:relative;
    border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);overflow:hidden;
    transition:background .18s ease,border-color .18s ease,transform .22s cubic-bezier(.2,.7,.3,1)}
  /* 위쪽 가로 막대가 호버 때 자라난다 — 카드가 세로로 서면 막대도 눕는 쪽이 자연스럽다 */
  #ssr .jobcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:var(--brand);transform:scaleX(0);transform-origin:center;
    transition:transform .22s cubic-bezier(.2,.7,.3,1)}
  #ssr .jobcard:hover{background:var(--bg-soft);border-color:var(--line-2);transform:translateY(-3px)}
  #ssr .jobcard:hover::before{transform:scaleX(1)}
  #ssr .jobcard .jl{min-width:0;margin-bottom:24px}
  #ssr .jobcard h3{margin:0 0 10px;font-size:clamp(20px,2.1vw,24px);font-weight:800;
    letter-spacing:-.025em;line-height:1.35}
  #ssr .jobcard .meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
  #ssr .jobcard .tag{font-size:13.5px;font-weight:700;color:var(--muted);background:transparent;
    border:1px solid var(--line-2);border-radius:999px;padding:4px 11px}
  /* 카드는 평소에 팀 이름과 한 줄 요약만 보여준다 — 여섯 장에 긴 설명을 모두 펼쳐 두면
     글이 빽빽해 무엇을 뽑는지부터 안 읽힌다. 실제 하는 일은 커서를 올린 카드에서만 펼쳐진다.
     높이를 상세에 맞춰 미리 잡아 두지 않는 이유 — 기본 상태에 빈칸이 남아 카드가 텅 비어 보인다.
     펼쳐지며 자라는 방식은 인재상 항목과 같은 처리다 */
  #ssr .jobcard .jswap{width:100%}
  #ssr .jobcard .jd{max-height:0;opacity:0;overflow:hidden;margin-top:0;
    transition:max-height .32s cubic-bezier(.2,.7,.3,1),opacity .22s ease,
      margin-top .32s cubic-bezier(.2,.7,.3,1)}
  #ssr .jobcard:hover .jd{max-height:420px;opacity:1;margin-top:13px}
  /* 손가락에는 호버가 없다 — 처음부터 펼쳐 둔다 */
  @media(hover:none){
    #ssr .jobcard .jd{max-height:none;opacity:1;margin-top:13px}
  }
  @media(prefers-reduced-motion:reduce){
    #ssr .jobcard .jd{transition:opacity .2s ease}
  }
  /* 한 줄 요약 — 팀 이름 바로 아래에서 무슨 일인지 먼저 말한다.
     본문은 그 다음에 읽히도록 한 단계 낮춘다 */
  /* 요약이 한 줄인 팀과 두 줄인 팀이 섞여 있다 — 두 줄 자리를 늘 비워 두어야
     커서를 올리지 않은 카드들의 높이가 어긋나지 않는다 */
  #ssr .jobcard .jt{margin:0 0 15px;min-height:calc(1.62em * 2);font-size:clamp(16px,1.7vw,17.5px);font-weight:700;color:var(--navy);
    line-height:1.62;letter-spacing:-.015em;word-break:keep-all}
  #ssr .jobcard .jd{color:var(--ink-2);margin:0;font-size:clamp(15px,1.6vw,16.5px);line-height:1.85;word-break:keep-all}
  /* 화살표는 카드 바닥에 붙인다 — 설명 길이가 달라도 세 카드의 화살표가 같은 높이에 선다 */
  #ssr .jobcard .go{flex:0 0 auto;margin-top:auto;width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;border:1px solid var(--line-2);color:var(--ink-2);
    font-size:19px;font-weight:800;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
  #ssr .jobcard:hover .go{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateX(3px)}

  /* 채용 과정 — 상자 4개가 아니라 하나로 이어진 타임라인.
     단계는 나열이 아니라 진행이므로 선으로 연결되어야 한다 */
  #ssr .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);
    margin-top:var(--gap-head);position:relative}
  #ssr .flow::before{content:"";position:absolute;left:0;right:0;top:16px;height:1px;background:var(--line-2)}
  #ssr .fstep{position:relative;padding-top:50px}
  #ssr .fstep .dot{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
    display:grid;place-items:center;background:var(--bg-soft);border:1px solid var(--line-2);
    font-size:13px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;
    transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
  /* 단계에 마우스를 얹으면 그 번호에 불이 들어온다 */
  #ssr .fstep:hover .dot,#ssr .fstep .dot:hover{background:var(--navy);border-color:var(--navy);
    color:#fff;box-shadow:0 0 0 7px rgba(16,76,130,.15)}
  #ssr .fstep .fn{font-size:13.5px;font-weight:800;letter-spacing:.13em;color:var(--muted);
    text-transform:uppercase}
  #ssr .fstep h3{font-size:clamp(21px,2.2vw,24px);font-weight:800;letter-spacing:-.025em;
    margin:12px 0 12px;line-height:1.35}
  #ssr .fstep p{color:var(--ink-2);margin:0;font-size:clamp(15.5px,1.65vw,17px);
    line-height:1.75;word-break:keep-all}

  /* CTA 밴드 */

  @media(max-width:900px){
    /* 이 폭에서 왼쪽 열까지 떼어 두면 오른쪽 칸이 못 읽을 폭이 된다.
       분류를 판 위쪽 가로 한 줄로 눕히고, 제도는 그 아래 전체 폭에 편다 */
    #ssr .ptabs{grid-template-columns:1fr}
    #ssr .prail{flex-direction:row;border-right:0;border-bottom:1px solid var(--hair)}
    #ssr .ptab{padding:17px 12px;border-top:0;border-left:1px solid var(--hair)}
    #ssr .ptab:first-child{border-left:0}
    /* 가로로 누우면 왼쪽에 막대를 세울 자리가 없다 — 칸 아래쪽에 눕혀 단다.
       이어 붙는 방향도 오른쪽이 아니라 아래쪽이다 */
    #ssr .ptab::before{left:0;right:0;top:auto;bottom:0;translate:0 0;
      width:auto;height:0}
    #ssr .ptab.is-on::before{height:4px}
    #ssr .ptab.is-on{margin-right:0;margin-bottom:-1px}
    /* 네 칸이 한 줄로 남으면 한 칸이 손톱만 해진다. 둘씩 두 줄로 나눈다 */
    #ssr .pstrip{grid-template-columns:1fr 1fr}
    #ssr .flow{grid-template-columns:1fr 1fr;row-gap:34px}
    #ssr .flow::before{display:none}
    /* 셋이 나란히 서기엔 좁다 — 둘로 접는다 */
    #ssr .jobs{grid-template-columns:1fr 1fr}
    #ssr .jobcard{padding:24px 22px}

  }
  @media(max-width:560px){
    /* 좁은 화면에서는 타임라인을 세로로 세우고 선을 왼쪽으로 옮긴다 */
    #ssr .flow{grid-template-columns:1fr;row-gap:0}
    #ssr .flow::before{display:block;left:16px;right:auto;top:0;bottom:0;width:1px;height:auto}
    #ssr .fstep{padding:0 0 34px 52px}
    #ssr .fstep:last-child{padding-bottom:0}
    /* 본부 이름과 설명이 한 줄에 안 들어간다 — 설명을 아래로 내린다 */
    #ssr .jobhead{flex-direction:column;align-items:flex-start;gap:7px}
  }

  /* 모바일 주소창이 접히고 펴져도 히어로 높이가 흔들리지 않게 한다 */
  @supports (height:100svh){ #ssr .about-hero{min-height:min(92svh,860px)} }

  @media(max-width:640px){
    #ssr .about-hero{padding:clamp(120px,20vh,160px) 0 clamp(48px,8vw,64px)}
    #ssr .about-hero h1{font-size:clamp(31px,8.6vw,42px);line-height:1.3}
    #ssr .hero-cta{margin-top:34px}
    #ssr .hero-exit{top:calc(80px + 12px);right:14px;width:40px;height:40px}
    /* 하단 퀵 메뉴와 겹치지 않도록 조작 막대를 위로 올린다 */
    #ssr .hero-ctrl{bottom:76px;gap:6px}
    #ssr .hero-ctrl button{padding:9px 14px;font-size:12.5px;gap:7px}
    /* 화면이 짧아 카피와 부딪히기 쉽다 — 선을 줄이고 바닥에 더 붙인다 */
    #ssr .hero-down{bottom:14px;gap:7px;font-size:10px}
    #ssr .hero-down i{height:30px}

    #ssr .story{--gap-story:26px}
    #ssr .quo blockquote,#ssr .coda-line.key{font-size:19px}
    #ssr .story .ln,#ssr .coda-line{font-size:17px}
    /* 좁은 화면에서는 좌우로 벌릴 폭이 없다. 안쪽으로 당기는 여백을 지우고
       풍선이 남는 폭을 다 쓰되, 얼굴이 선 좌우 자리로 화자는 그대로 갈린다.
       얼굴은 40px 까지 줄인다 — 데스크톱 비율 그대로 두면 얼굴이 한 칸 크게
       차지해 정작 대사가 들어갈 폭이 없다 */
    #ssr .quo{--ava:40px;gap:10px}
    #ssr .quo.ask{max-width:100%;margin-left:0}
    #ssr .quo.say{max-width:100%;margin-right:0}
    #ssr .bub{border-radius:16px;padding:20px}

    #ssr .vitem{padding:28px 0}
    #ssr .vnum{font-size:34px}
    #ssr .vt{font-size:20px}
    #ssr .vb p{font-size:16px}

    /* 분류 셋은 이 폭에서도 한 줄에 들어간다. 여백만 줄이고 글자를 한 단 낮춘다 —
       "성장 · 환경"이 두 줄로 꺾이면 왼쪽 열만 키가 커져 판이 어긋나 보인다 */
    #ssr .ptab{padding:13px 6px}
    #ssr .pt-name{font-size:14px}
    /* 두 장씩. 한 장으로 세우면 배지만 큼직하게 남고 세로로 한없이 길어진다 */
    #ssr .ppan{--px:18px;padding:28px var(--px) 32px}
    #ssr .ppan ul{--cols:2;--cg:16px;row-gap:30px}
    #ssr .ppan .pico{width:72px;height:72px}
    #ssr .ppan h4{font-size:15.5px}
    #ssr .ppan p{font-size:14px;line-height:1.66}

    #ssr .jobs{grid-template-columns:1fr}
    #ssr .jobcard{padding:22px 20px}

    #ssr .jobcard h3{font-size:21px}
    #ssr .jobcard .go{width:44px;height:44px;font-size:19px}

    #ssr .manifesto p{font-size:17px}
    #ssr .manifesto .turn p{font-size:20px}

    /* 손가락에는 호버가 없다 — 눌렀을 때 반응하도록 바꾼다 */
    #ssr .jobcard:hover{background:transparent;transform:none}
    #ssr .jobcard:hover h3,#ssr .jobcard:hover .go{transform:none}
    #ssr .jobcard:active{background:var(--bg-soft)}
    #ssr .vitem:hover{background:transparent}
    #ssr .vitem:hover .vnum{color:rgba(255,255,255,.2)}
  }


/* ===== 워드프레스 테마 적응 (뒤) — 반드시 이겨야 하는 보정 ===== */

/* 테마 콘텐츠 폭을 벗어나 화면 전체를 쓴다.
   100vw 에는 세로 스크롤바 두께가 포함돼 그대로 쓰면 몇 px 넘치므로,
   JS 가 재어 넣는 --ssr-sbw 만큼 빼준다 (JS 실패 시 0px 로 동작) */
#ssr{
  --ssr-sbw:0px;
  width:calc(100vw - var(--ssr-sbw));
  max-width:calc(100vw - var(--ssr-sbw));
  margin-left:calc(50% - (100vw - var(--ssr-sbw)) / 2);
  margin-right:calc(50% - (100vw - var(--ssr-sbw)) / 2);
  /* clip 은 스크롤 컨테이너를 만들지 않아 안쪽 position:sticky 를 죽이지 않는다 */
  overflow-x:clip;
}
@supports not (overflow:clip){ #ssr{overflow-x:hidden} }

/* 테마 고정 헤더 높이. 헤더가 80px 이 아니면 이 값 하나만 바꾸면 된다 */
#ssr{--ssr-header-h:80px}
#ssr section[id]{scroll-margin-top:calc(var(--ssr-header-h) + 20px)}
#ssr .hero-exit{top:calc(var(--ssr-header-h) + clamp(14px,2vw,26px))}