/* 문의·오류 신고(contact.html). 회색 바탕 위에 왼쪽 안내 + 오른쪽 흰 양식 카드.
   contact.js 가 쓰는 이름: #contact-* id, .contact-type(문의 종류 칩, 스크립트가 만듦), .contact-count, .contact-status, .contact-copy-buffer.
   공통 변수·단추는 chrome.css(--x-*, .nx-btn). */
.ct{padding:64px 0 104px;background:var(--x-soft)}
.ct h1,.ct h2,.ct p,.ct li,.ct span,.ct b,.ct legend,.ct label{word-break:keep-all;overflow-wrap:anywhere}
.ct-wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.ct-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}

/* 왼쪽 안내 */
.ct-intro{position:sticky;top:100px;padding-top:12px}
.ct-eyebrow{display:inline-block;padding:7px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--x-line);font-size:13.5px;font-weight:700;color:var(--x-text)}
.ct-intro h1{margin:18px 0 14px;font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.3;letter-spacing:-.045em;color:var(--x-ink)}
.ct-lead{margin:0;font-size:16.5px;line-height:1.75;color:var(--x-text)}
.ct-points{display:grid;gap:10px;margin:30px 0 0;padding:0;list-style:none;counter-reset:ct}
.ct-points li{counter-increment:ct;position:relative;padding:18px 20px 18px 58px;border-radius:16px;background:#fff}
.ct-points li:before{content:counter(ct);position:absolute;left:20px;top:18px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--x-blue);font-size:13px;font-weight:800;color:#fff}
.ct-points b{display:block;margin-bottom:3px;font-size:15.5px;font-weight:800;color:var(--x-ink)}
.ct-points li>span{display:block;font-size:14px;line-height:1.7;color:var(--x-text)}
.ct-points a{color:var(--x-blue);font-weight:700}
.ct-points a:hover{text-decoration:underline}
.ct-note{margin:18px 4px 0;font-size:13px;line-height:1.75;color:var(--x-sub)}

/* 오른쪽 양식 카드 */
.ct-card{padding:40px 40px 36px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--x-line),0 24px 48px -32px #1113183d}
.ct-card h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.035em;color:var(--x-ink)}
.ct-sub{margin:6px 0 26px;font-size:14px;color:var(--x-sub)}
.ct-form{display:grid;gap:22px}
.ct-field{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.ct-field>label,.ct-field>legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:0;font-size:14.5px;font-weight:700;color:var(--x-ink)}
.ct-field>legend{margin-bottom:8px}
.ct-field small{font-size:12.5px;font-weight:600;color:var(--x-sub)}

.ct-field input,.ct-field select,.ct-field textarea{width:100%;min-width:0;padding:13px 16px;border:1.5px solid #dfe2e8;border-radius:12px;background:#fff;font:inherit;font-size:16px;line-height:1.5;color:var(--x-ink);transition:border-color .15s,box-shadow .15s}
.ct-field input,.ct-field select{height:52px}
.ct-field textarea{resize:vertical;min-height:120px;line-height:1.65}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#a3a8b2}
.ct-field input:hover,.ct-field select:hover,.ct-field textarea:hover{border-color:#c5c9d2}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{outline:none;border-color:var(--x-ink);box-shadow:0 0 0 4px #2563eb26}
.ct-field [aria-invalid=true]{border-color:#e5484d;background:#fff8f8}
.ct-field [aria-invalid=true]:focus{box-shadow:0 0 0 4px #e5484d26}
.ct-select{position:relative}
.ct-select select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.ct-select:after{content:'';position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--x-sub);border-bottom:2px solid var(--x-sub);transform:rotate(45deg);pointer-events:none}

.ct-hint{margin:0;font-size:13px;line-height:1.7;color:var(--x-sub)}
.ct-hint:empty{display:none}
.ct-error{margin:0;font-size:13px;font-weight:600;line-height:1.6;color:#d1343a}
.ct-error:empty{display:none}
.ct-under{display:flex;align-items:flex-start;gap:12px}
.contact-count{margin-left:auto;white-space:nowrap}

/* 문의 종류 칩(라디오) */
.contact-types{margin:0}
.contact-type-list{display:flex;flex-wrap:wrap;gap:8px}
.contact-type{position:relative;display:inline-flex}
.contact-type input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.contact-type span{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #dfe2e8;font-size:14.5px;font-weight:700;color:var(--x-text);transition:background .15s,box-shadow .15s,color .15s}
.contact-type:hover span{box-shadow:inset 0 0 0 1.5px var(--x-ink);color:var(--x-ink)}
.contact-type input:checked+span{background:var(--x-ink);box-shadow:none;color:#fff}
.contact-type input:checked+span:before{content:'✓';margin-right:6px}
.contact-type input:focus-visible+span{outline:2px solid var(--x-blue);outline-offset:3px}
.contact-types .ct-hint{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--x-soft);color:var(--x-text)}
.contact-types .ct-hint:empty{display:none}

/* 단추와 상태 */
.ct-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:4px}
.ct-actions .nx-btn{min-height:54px;border:0;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.ct-actions .nx-btn:focus-visible{outline:2px solid var(--x-blue);outline-offset:3px}
.ct-copy{padding:0 26px}
.ct-submit:disabled{background:#c5c9d2;cursor:not-allowed;transform:none}
.contact-status{margin:0;padding:14px 16px;border-radius:12px;background:#eef4ff;font-size:14px;line-height:1.75;color:#1f4fbf;word-break:keep-all}
.contact-status:empty{display:none}
.ct-address{margin:-8px 0 0;font-size:13px;color:var(--x-sub)}
.ct-address:empty{display:none}
.contact-copy-buffer{position:fixed;left:-9999px;top:0;opacity:0}
.ct-noscript{margin:0;font-size:15px;color:var(--x-text)}

@media(max-width:900px){
  .ct-layout{grid-template-columns:1fr;gap:32px}
  .ct-intro{position:static;padding-top:0}
}
@media(max-width:600px){
  .ct{padding:36px 0 72px}
  .ct-wrap{width:calc(100% - 32px)}
  .ct-lead{font-size:15.5px}
  .ct-points{margin-top:22px}
  .ct-card{padding:28px 20px 24px;border-radius:20px}
  .ct-actions{grid-template-columns:1fr}
}
/* 윈도우 고대비 모드: 색이 지워지므로 고른 항목을 굵은 테두리로 */
@media(forced-colors:active){.contact-type input:checked+span{outline:3px solid Highlight;outline-offset:2px}}