/* Careers page (회사소개 ▾ > 채용). Owner 2026-10-06: very simple, the open positions first and easy to see; core values,
   working principles and why Intellicia lower and smaller; one reading line from top to bottom, no left/right splits.
   Order: short hero → open positions (one row per role; the row opens its details below it, js/careers.js) → how to
   apply → how we work (small) → more. Built on site.css and product.css. Values no source gives sit in .owner-check. */

/* owner placeholder: visible until the owner fills or removes it (kept here; move to a shared file if other pages use it) */
.owner-check { display: inline-block; padding: 4px 9px; border-radius: 8px; border: 1px dashed #E0B45C; background: #FFF8E8; color: #8A5A00; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
p.owner-check { display: block; }

/* hero: one column and short, so the positions start in the first screen */
.cr-hero { padding-top: 124px; }
.cr-hero .h1 { margin-top: 18px; font-size: clamp(40px, 4.6vw, 72px); line-height: 1.02; }
.cr-hero .lead { margin-top: 22px; max-width: 34em; }

/* section titles: eyebrow and title on one hairline, left */
.cr-bar { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--rule-2); }
.cr-h { font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }

/* open positions: one row per role. Title large with the team under it; location and experience at the right; +/− */
.cr-jobs { padding-top: clamp(48px, 6vw, 80px); }
.jl { margin-top: 14px; border-top: 1px solid var(--rule); }
.jl-list { margin: 0; padding: 0; list-style: none; }
.jl-item { border-bottom: 1px solid var(--rule); scroll-margin-top: 96px; }
.jl-item h3 { margin: 0; font: inherit; }
.jl-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; grid-template-areas: "title loc ic" "team loc ic"; column-gap: 32px; row-gap: 6px; align-items: center; width: 100%; padding: 26px 0; margin: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jl:not(.js) .jl-btn { cursor: default; }
.jl-btn:focus { outline: none; }
.jl-btn:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; border-radius: 6px; }
.jl-title { grid-area: title; min-width: 0; font-size: clamp(21px, 2vw, 27px); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; transition: color .2s; }
.jl-title small { display: inline-block; white-space: nowrap; margin-left: 10px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; color: var(--ink-3); }
.jl-team { grid-area: team; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.jl-loc { grid-area: loc; }
.jl-loc { font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.jl-loc .owner-check { font-size: 12px; padding: 2px 7px; }
.jl-ic { grid-area: ic; position: relative; justify-self: end; width: 34px; height: 34px; border: 1px solid var(--rule-2); border-radius: 50%; transition: border-color .2s, background-color .2s; }
.jl-ic::before, .jl-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; border-radius: 1px; background: var(--ink); transition: transform .2s; }
.jl-ic::after { transform: rotate(90deg); }
.jl-btn[aria-expanded="true"] .jl-ic::after { transform: rotate(0deg); }
.jl:not(.js) .jl-ic { visibility: hidden; }
.jl-btn:hover .jl-title { color: var(--blue-ink); }
.jl-btn:hover .jl-ic { border-color: var(--navy); }
.jl-btn[aria-expanded="true"] .jl-ic { border-color: var(--navy); background: var(--navy); }
.jl-btn[aria-expanded="true"] .jl-ic::before, .jl-btn[aria-expanded="true"] .jl-ic::after { background: #fff; }

/* the details: summary, then duties / requirements / nice-to-haves (each title above its list), then facts and apply */
.jl-panel { max-width: 880px; padding: 0 0 36px; }
.jl-panel[hidden] { display: none; }
.jl-sum { font-size: 17px; line-height: 1.7; color: var(--ink); }
.jl-panel > p.owner-check { width: fit-content; max-width: 100%; margin-top: 12px; }
.jl-sec { margin-top: 26px; }
.jl-sec h4 { margin: 0 0 10px; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.jl-sec ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.jl-sec li { position: relative; padding-left: 15px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.jl-sec li::before { content: ""; position: absolute; left: 0; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.jl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.jl-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.jl-meta div { display: grid; gap: 3px; }
.jl-meta dt { font-size: 12px; color: var(--ink-3); }
.jl-meta dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.jl-meta dd .owner-check { font-size: 12px; padding: 2px 7px; font-weight: 500; }

/* how to apply: three short steps in order, then the mail button */
.cr-apply { padding-top: clamp(56px, 7vw, 96px); }
.cr-h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; }
.cr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cr-steps li { display: grid; align-content: start; gap: 6px; padding: 18px 24px 20px 0; }
.cr-steps li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.cr-steps .n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.cr-steps b { font-size: 16px; letter-spacing: -.015em; }
.cr-steps li > span:last-child { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.cr-steps a { color: var(--blue-ink); border-bottom: 1px solid currentColor; }
.cr-steps .subj { display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--bg-2); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.cr-mail { margin-top: 24px; }

/* how we work: the CEO's words, small, one column */
.cr-culture { padding-top: clamp(80px, 10vw, 140px); }
.cr-culture .cr-h { font-size: clamp(22px, 2vw, 26px); }
.cr-block { max-width: 880px; margin-top: 36px; }
.cr-block h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.4; color: var(--ink); }
.cr-block dl { margin: 12px 0 0; border-top: 1px solid var(--rule); }
.cr-block dl > div { padding: 16px 0 17px; border-bottom: 1px solid var(--rule); }
.cr-block dt { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.5; color: var(--ink); }
.cr-block dd { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.cr-inline { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cr-inline li { font-size: 15px; line-height: 1.75; color: var(--ink-2); white-space: nowrap; }
.cr-inline li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--ink-3); }
.cr-more { padding-top: clamp(80px, 10vw, 140px); }

@media (prefers-reduced-motion: reduce) { .jl-ic, .jl-ic::before, .jl-ic::after, .jl-title { transition: none; } }

@media (max-width: 760px) {
  .cr-hero { padding-top: 104px; }
  .cr-hero .h1 { margin-top: 14px; }
  .jl-btn { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; padding: 20px 50px 20px 0; }
  .jl-title { order: 1; flex: 0 0 100%; font-size: 20px; }
  .jl-title small { display: block; margin: 3px 0 0; font-size: 13.5px; white-space: normal; }
  .jl-team { order: 2; flex: 0 0 100%; margin-top: 8px; }
  .jl-loc { order: 3; margin-top: 8px; font-size: 14px; }
  .jl-ic { position: absolute; right: 0; top: 50%; margin-top: -17px; }
  .jl-btn:focus-visible { outline-offset: 4px; }
  .jl-panel { padding-bottom: 28px; }
  .jl-sum { font-size: 15.5px; }
  .jl-sec { margin-top: 20px; }
  .jl-sec li { font-size: 14.5px; }
  .jl-foot { margin-top: 22px; }
  .jl-meta { gap: 10px 22px; }
  .cr-steps { grid-template-columns: minmax(0, 1fr); }
  .cr-steps li, .cr-steps li + li { padding: 16px 0 18px; border-left: 0; }
  .cr-steps li + li { border-top: 1px solid var(--rule); }
  .cr-block { margin-top: 30px; }
  .cr-block dd, .cr-inline li { font-size: 14.5px; }
  .cr-inline { display: grid; gap: 3px; margin-top: 4px; }
  .cr-inline li { position: relative; padding-left: 13px; white-space: normal; line-height: 1.6; }
  .cr-inline li:not(:last-child)::after { content: none; }
  .cr-inline li::before { content: ""; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
}