/* CS page only: notice board, press list, inquiry form.
   Source of values: docs/design-concept-main.md section 10 */

/* Hero aurora: menu 5 of the lime > blue scale (components.css .hero.photo) */
.hero.photo{--aur-a:var(--aur-5);--aur-b:var(--aur-6)}

.lead{margin:0;font-size:17px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:56px}
.pager .nums{display:flex;gap:6px}
.pager .nums button{min-width:46px;height:46px;padding:0 12px;border-radius:999px;border:1px solid transparent;background:transparent;font-family:Sora,sans-serif;font-size:15px;font-weight:400;color:var(--ink-2);transition:all .6s var(--ease)}
.pager .nums button:hover{border-color:var(--track);color:var(--ink)}
.pager .nums button[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.notice{padding:140px var(--gutter)}
.cnt{font-size:15px;color:var(--ink-2);white-space:nowrap}
.cnt b{font-family:Sora,sans-serif;font-weight:400;font-size:17px;color:var(--teal);margin:0 2px}
.board{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.nrow{position:relative;display:grid;color:var(--ink);grid-template-columns:96px 160px minmax(0,1fr) 160px;align-items:center;gap:32px;padding:24px;border-bottom:1px solid var(--line);transition:background .6s var(--ease)}
.nrow::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--teal);transition:width .8s var(--ease)}
.nrow:hover{background:var(--mist)}
.nrow:hover::before{width:100%}

.nrow .no{font-family:Sora,sans-serif;font-size:28px;font-weight:300;line-height:1;color:var(--teal)}

.nrow .thumb{width:160px;aspect-ratio:10/7;border-radius:16px;overflow:hidden;background:var(--mist);border:1px solid var(--line-soft)}
.nrow .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.nrow:hover .thumb img{transform:scale(1.03)}
.nrow .thumb.ph{border:0;font-size:12px}
.nrow .body{display:flex;flex-direction:column;gap:10px;min-width:0}
.nrow h3{margin:0;font-size:22px;line-height:1.45;font-weight:600;letter-spacing:-.01em;text-wrap:pretty}
.nrow p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.nrow time{justify-self:end;font-family:Sora,sans-serif;font-size:15px;font-weight:300;color:var(--ink-2);font-variant-numeric:tabular-nums}
.press{background:var(--mist);padding:140px var(--gutter)}

.pc .info .src{padding-left:12px;border-left:1px solid var(--line)}
.inquiry{background:var(--mist);padding:140px var(--gutter)}
/* Left column: headline above the info card. The column stretches to the form height and the card (as tall as its content)
   sticks below the sub navigation, so it slides down and ends level with the bottom of the form */
.inq-lcol{display:flex;flex-direction:column}
.inq-lcol .inq-side{position:sticky;top:calc(var(--subnav-h,120px) + 48px)}
.inq-lcol .sec-head{margin-bottom:40px}
/* Two cards like the company Location section: night info card (steps, contact rows) | white form card */
.inq-grid{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:24px;align-items:stretch}
.inq-side{background:var(--night);color:#fff;border-radius:24px;box-shadow:var(--shadow);padding:44px 40px;display:flex;flex-direction:column}
.inq-side :focus-visible{outline-color:#fff}

/* Status node: lime ring + dot. Shared by the steps and the done state */
.node{position:relative;flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1px solid var(--lime);display:flex;align-items:center;justify-content:center}
.node::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}

.inq-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.inq-steps li{position:relative;display:flex;gap:20px;padding-bottom:28px}
.inq-steps li:last-child{padding-bottom:0}
.inq-steps li:not(:last-child)::before{content:"";position:absolute;left:12.5px;top:30px;bottom:4px;width:1px;background:rgba(255,255,255,.16)}
.inq-steps b{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:600;line-height:26px}
.inq-steps .no{font-family:Sora,sans-serif;font-size:13px;font-weight:400;color:var(--lime)}
.inq-steps p{margin:4px 0 0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.6)}

/* Contact rows: same grid as .info .row on the company page, on the dark card */
.contact-dl{margin:32px 0 0}
.contact-dl .row{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:baseline;gap:16px;padding:22px 0;border-top:1px solid rgba(255,255,255,.12)}
.contact-dl .row:last-child{padding-bottom:0}
.contact-dl dt{font-size:14px;color:rgba(255,255,255,.56)}
.contact-dl dd{margin:0;font-size:17px;line-height:1.65;color:#fff}
.contact-dl dd.num{font-family:Sora,sans-serif;font-size:22px;line-height:1.4}
.contact-dl dd small{display:block;margin-top:4px;font-family:Pretendard,sans-serif;font-size:14px;line-height:1.5;color:rgba(255,255,255,.6)}
.contact-dl dd b{font-weight:600}
.contact-dl dd a{color:#fff;transition:color .6s var(--ease)}
.contact-dl dd a:hover{color:#35B7D9}
.form-card{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:48px}
.form{display:flex;flex-direction:column;gap:36px}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.field{display:flex;flex-direction:column;gap:12px;min-width:0}

.field>label,.field legend{font-size:15px;font-weight:600;color:var(--ink);padding:0}
.req{color:var(--teal);margin-left:4px;font-family:Sora,sans-serif}
fieldset.field{border:0;margin:0;padding:0}
fieldset.field legend{margin-bottom:12px}
.inp{width:100%;height:56px;padding:0 18px;border:1px solid var(--track);border-radius:8px;background:#fff;font-size:16px;color:var(--ink);transition:border-color .6s var(--ease),box-shadow .6s var(--ease)}

textarea.inp{height:auto;min-height:220px;padding:16px 18px;line-height:1.7;resize:none}
.inp::placeholder{color:#8A9AA2}
.inp:hover{border-color:#9FB0B8}
.inp:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,118,152,.12)}

.field.err .inp{border-color:var(--error)}
.field.err .inp:focus{box-shadow:0 0 0 3px rgba(194,59,49,.12)}
.msg{display:none;font-size:14px;color:var(--error)}
.field.err .msg{display:block}
.hint{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--ink-2)}

.hint .cnt-chr{font-family:Sora,sans-serif;font-variant-numeric:tabular-nums}
.agree{border-radius:16px;background:var(--mist);padding:24px 28px;display:flex;flex-direction:column;gap:16px}
.agree-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.chk{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600;cursor:pointer}
.chk input{position:absolute;opacity:0;width:1px;height:1px}

.chk .box{flex:0 0 24px;width:24px;height:24px;border-radius:6px;border:1px solid #9FB0B8;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:all .6s var(--ease)}
.chk .box svg{opacity:0;transition:opacity .3s var(--ease)}
.chk input:checked+.box{background:var(--teal);border-color:var(--teal)}
.chk input:checked+.box svg{opacity:1}
.chk input:focus-visible+.box{outline:2px solid var(--teal);outline-offset:3px}

.field.err .chk .box{border-color:var(--error)}
.toggle{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;font-size:14px;font-weight:600;color:var(--teal);padding:8px 0}
.toggle svg{transition:transform .6s var(--ease)}
.toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.terms{overflow:hidden;max-height:0;transition:max-height .6s var(--ease)}

.terms.open{max-height:420px}
.terms dl{margin:0;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px 20px;font-size:14px;line-height:1.7}
.terms dt{color:var(--ink-2)}
.terms dd{margin:0}
.terms p{margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--ink-2)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:8px}
.form-foot small{font-size:13px;color:var(--ink-2)}

.form-foot .req{margin:0 2px 0 0}
.done{display:none;flex-direction:column;align-items:flex-start;gap:20px;padding:40px 0}

.form-card.sent .form{display:none}
.form-card.sent .done{display:flex;animation:rise .8s var(--ease) both}

.done .node{margin-bottom:8px}
.done h3{margin:0;font-size:38px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.done p{margin:0;font-size:17px;line-height:1.75;color:var(--ink-2)}

.done .sum{margin:8px 0 12px;padding:20px 24px;border-radius:16px;background:var(--mist);font-size:15px;line-height:1.8;color:var(--ink-2)}
.done .sum b{color:var(--ink);font-weight:600;margin-right:10px}

@media (prefers-reduced-motion:reduce){
  .form-card.sent .done{animation:none}
}
/* Two columns: the whole section (head, info card, form) fits one screen below the sub nav once the header hides.
   The textarea gives up height first on shorter screens */
@media (min-width:1181px){
  .inquiry{padding-top:64px;padding-bottom:64px}
  .inq-lcol .sec-head{margin-bottom:32px}
  .inq-lcol .inq-side{top:calc(var(--subnav-h,120px) + 32px)}
  .inq-side{padding:36px 40px}
  .inq-steps li{padding-bottom:20px}
  .contact-dl{margin-top:24px}
  .contact-dl .row{padding:16px 0}
  /* The card stretches to the left column so both end on the same line; the textarea takes up the extra height,
     which keeps the send button at the bottom with the same space under it as above 성함 */
  .form-card{padding:40px;display:flex;flex-direction:column}
  .form{flex:1 0 auto;gap:28px}
  .form .field[data-req="body"]{flex:1 0 auto}
  .form .field[data-req="body"] textarea.inp{flex:1 0 auto}
  textarea.inp{min-height:clamp(120px,100svh - 780px,200px)}
}
@media (max-width:1440px){
  .inq-grid{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
  .form-card{padding:40px}
}
@media (max-width:1180px){
  .inq-grid{grid-template-columns:1fr}
  .inq-lcol .inq-side{position:static}
  .nrow{grid-template-columns:72px 128px minmax(0,1fr) 120px;gap:24px}
  .nrow .thumb{width:128px}
}
@media (max-width:720px){
  .notice,.press,.inquiry{padding-top:88px;padding-bottom:88px}
  .nrow{grid-template-columns:104px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:start;padding:18px 4px}
  .nrow .no{display:none}
  .nrow .thumb{width:104px;grid-column:1;grid-row:1 / span 2}
  .nrow .thumb.ph{font-size:11px;padding:0 8px}
  .nrow time{grid-column:2;grid-row:1;justify-self:start;font-size:13px}
  .nrow .body{grid-column:2;grid-row:2}
  .nrow h3{font-size:18px}
  .nrow p{-webkit-line-clamp:2}
  .pager{gap:8px;margin-top:40px}
  .circ{width:46px;height:46px}
  .pager .nums button{min-width:40px;height:40px}
  .inq-side{padding:32px 24px}
  .contact-dl .row{grid-template-columns:1fr;gap:6px}
  .form-card{padding:32px 20px}
  .frow{grid-template-columns:1fr}
  .inq-steps li{padding-bottom:20px}
  .inq-steps p{display:none}
  .agree{padding:20px}
  .agree-top{flex-direction:column;align-items:flex-start;gap:4px}
  .terms dl{grid-template-columns:1fr;gap:2px}
  .terms dd{margin-bottom:10px}
  .form-foot{flex-direction:column-reverse;align-items:stretch}
  .form-foot .btn{justify-content:center}
  .done h3{font-size:28px}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}