/* 서브 페이지 공통 스타일 (주주 인증 안내 · IR 정보 · 게시판 상단)
   Tailwind 빌드 없이 바로 적용되도록 일반 CSS로 작성. base.html에서 app.css 다음에 로드한다. */

:root {
  --c-primary: #0052a4;
  --c-primary-hover: #00418a;
  --c-primary-light: #e6eef8;
  --c-primary-soft: #f0f7fe;
  --c-ink: #1a1a1a;
  --c-sub: #666666;
  --c-line: #e5e5e5;
  --c-line-soft: #eef1f5;
  --c-canvas: #f7f8fa;
  --c-navy: #0d2b5e;
  --c-navy-hover: #0a2149;
  --c-title-blue: #1d4e9e;
}

/* 한글이 단어 중간에서 줄바꿈되지 않도록 */
body { word-break: keep-all; overflow-wrap: break-word; }

/* ── 헤더: 검색창 · 로그인 버튼 ── */
.hsearch { display: none; align-items: center; gap: 8px; }
.hsearch-btn { display: grid; place-items: center; width: 32px; height: 32px; color: var(--c-ink); }
.hsearch input { width: 150px; height: 36px; border: 0; background: transparent; font-size: 14px; color: var(--c-ink); outline: none; }
.hsearch input::placeholder { color: #8a94a6; }
.hdivider { display: none; width: 1px; height: 16px; margin: 0 14px 0 6px; background: #c9d0db; }
.hlogin {
  align-items: center; gap: 8px; height: 40px; padding: 0 24px; border-radius: 999px;
  background: var(--c-navy); color: #fff; font-size: 14.5px; font-weight: 600; transition: background-color .15s;
}
.hlogin:hover { background: var(--c-navy-hover); }
@media (min-width: 1280px) {
  .hsearch, .hdivider { display: flex; }
  .hsearch-toggle { display: none; }
}

/* ── 메인 비주얼 ── */
.mhero { position: relative; overflow: hidden; background: linear-gradient(180deg, #edf4fb 0%, #eff6fc 55%, #dce6f1 100%); }
.mhero-bg { position: absolute; inset: 0; }
.mhero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.mhero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .78) 55%, rgba(255, 255, 255, .55) 100%);
}
.mhero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 44px 16px 36px; }
.mhero-slide { animation: mhero-in .6s ease both; }
.mhero-slide[hidden] { display: none; }
@keyframes mhero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mhero-eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: .32em; color: #2b3445; text-transform: uppercase; }
.mhero-title { margin-top: 18px; font-size: 32px; line-height: 1.3; letter-spacing: -0.03em; }
.mhero-title span { display: block; font-weight: 700; color: #0f1724; }
.mhero-title strong { display: block; font-weight: 800; color: var(--c-title-blue); }
.mhero-desc { position: relative; margin-top: 40px; font-size: 15px; line-height: 1.65; color: #2b3445; }
.mhero-desc::before { content: ""; position: absolute; left: 0; top: -22px; width: 22px; height: 1px; background: #8a94a6; }
.mhero-btn {
  display: inline-flex; align-items: center; gap: 28px; height: 46px; margin-top: 22px; padding: 0 26px 0 32px;
  border-radius: 2px; background: var(--c-navy); color: #fff; font-size: 16px; font-weight: 600; transition: background-color .15s;
}
.mhero-btn:hover { background: var(--c-navy-hover); }

.mhero-ctrl { display: flex; align-items: center; margin-top: 30px; font-size: 12px; color: #6b7280; }
.mhero-dots { display: flex; gap: 14px; }
.mhero-dots button { position: relative; padding: 2px 0; font-variant-numeric: tabular-nums; color: #6b7280; }
.mhero-dots button.is-active { color: var(--c-navy); font-weight: 600; }
.mhero-dots button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--c-navy); }
.mhero-bar { position: relative; width: 56px; height: 1px; margin: 0 24px 0 16px; background: #c4cbd6; }
.mhero-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 33.33%; background: var(--c-navy); transition: width .4s; }
.mhero-arrow { display: grid; place-items: center; width: 28px; height: 28px; color: #1f2937; border-radius: 999px; }
.mhero-arrow:hover { background: rgba(13, 43, 94, .08); }

.mhero-keywords { display: none; }

@media (min-width: 768px) {
  /* 사진 비율을 유지한 채 높이에 맞춰 오른쪽 정렬, 왼쪽 가장자리는 배경색으로 서서히 사라지게 */
  /* 사진 오른쪽은 하늘로 넓게 이어 붙여 두었으므로, 건물 위치는 left로 잡는다 */
  .mhero-bg img {
    position: absolute; top: 0; left: calc(100% - 760px); width: auto; max-width: none; height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 170px); mask-image: linear-gradient(90deg, transparent 0, #000 170px);
  }
  .mhero-bg::after { display: none; }
  .mhero-inner { padding: 40px 16px 30px; }
  .mhero-title { font-size: 40px; }
  .mhero-keywords {
    /* 사진 오른쪽 위 하늘 영역에 고정 (화면 폭과 상관없이 건물과 겹치지 않게) */
    display: none; position: absolute; right: 32px; top: 36px; list-style: none; margin: 0; padding: 26px 0 0;
    font-size: 10.5px; font-weight: 500; line-height: 2; letter-spacing: .3em; color: #fff; text-shadow: 0 1px 6px rgba(0, 30, 70, .35);
  }
  .mhero-keywords::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 1px; background: rgba(255, 255, 255, .85); }
}
@media (min-width: 1024px) {
  .mhero-title { font-size: 46px; }
  .mhero-desc { font-size: 16px; }
}

/* ── 서비스 바로가기 ── */
.mfeat { background: #fff; border-bottom: 1px solid #e8ecf2; box-shadow: 0 6px 18px rgba(15, 35, 70, .04); }
.mfeat-inner { display: grid; grid-template-columns: 1fr; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.mfeat-item { display: flex; align-items: center; gap: 18px; padding: 22px 4px; border-top: 1px solid #e8ecf2; }
.mfeat-item:first-child { border-top: 0; }
.mfeat-icon { flex-shrink: 0; color: #1f2f4d; }
.mfeat-body { flex: 1; min-width: 0; }
.mfeat-eyebrow { display: block; font-size: 9px; font-weight: 500; letter-spacing: .12em; white-space: nowrap; color: #6b7280; }
.mfeat-body strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 700; color: #0f1724; }
.mfeat-desc { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: #5b6472; }
.mfeat-arrow {
  flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  background: #eef2f8; color: #1f2f4d; transition: background-color .15s, color .15s;
}
.mfeat-item:hover strong { color: var(--c-title-blue); }
.mfeat-item:hover .mfeat-arrow { background: var(--c-navy); color: #fff; }
@media (min-width: 640px) {
  .mfeat-inner { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
  .mfeat-item:nth-child(2) { border-top: 0; }
}
@media (min-width: 1280px) {
  .mfeat-inner { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .mfeat-item { border-top: 0; padding: 10px 22px; margin: 22px 0; }
  .mfeat-item + .mfeat-item { border-left: 1px solid #e3e8ef; }
  .mfeat-item:first-child { padding-left: 0; }
  .mfeat-item:last-child { padding-right: 0; }
}

/* ── 본문: 최신 게시글 · 주주 인증 · 공지사항 ── */
.mbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; padding: 40px 16px 0; }
.mhead { display: flex; align-items: center; justify-content: space-between; }
.mhead h2 { font-size: 19px; font-weight: 700; color: #0f1724; }
.mlatest-title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em; }
.mmore { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #374151; }
.mmore:hover { color: var(--c-title-blue); }

.mtabs { display: flex; margin-top: 14px; overflow-x: auto; border-bottom: 1px solid #e3e8ef; scrollbar-width: none; }
.mtabs::-webkit-scrollbar { display: none; }
.mtabs a { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; height: 46px; padding: 0 26px; font-size: 14px; color: #374151; }
.mtabs a:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: #d6dce5; }
.mtabs a:hover { color: var(--c-title-blue); }
.mtabs a.is-active { color: var(--c-title-blue); font-weight: 700; }
.mtabs a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-title-blue); }
.mtabs a.is-active + a::before { display: none; }

.mlist { list-style: none; margin: 4px 0 0; padding: 0; }
.mlist li { border-bottom: 1px solid #edf0f4; }
.mrow { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 4px; padding: 12px 0; }
.mrow-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; color: #111827; }
.mrow-title em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--c-title-blue); }
.mrow-title svg { display: inline-block; vertical-align: -2px; color: #8a94a6; }
.mrow:hover .mrow-title { color: var(--c-title-blue); }
.mrow-author, .mrow-date, .mrow-views { font-size: 12.5px; color: #8a94a6; font-variant-numeric: tabular-nums; }
.mrow-author { grid-column: 2; }
.mrow-date, .mrow-views, .mrow-arrow { display: none; }
.mrow-views { align-items: center; gap: 5px; }
.mrow-arrow { color: #9aa3b2; justify-content: flex-end; }
.mrow:hover .mrow-arrow { color: var(--c-title-blue); }

.mpill {
  display: inline-flex; align-items: center; justify-content: center; justify-self: start; height: 24px; min-width: 84px; padding: 0 12px;
  border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tone-0 { background: #e8f0fd; color: #2563c9; }
.tone-1 { background: #e6f6ec; color: #1f8a4c; }
.tone-2 { background: #eceffd; color: #3b4cc0; }
.tone-3 { background: #f3eafd; color: #7c3aed; }

@media (min-width: 768px) {
  .mrow { grid-template-columns: 96px minmax(0, 1fr) 60px 82px 58px 16px; column-gap: 14px; height: 46px; padding: 0 8px; }
  .mrow-author { grid-column: auto; }
  .mrow-date { display: block; }
  .mrow-views, .mrow-arrow { display: flex; }
}

/* 배경: 네이비 + 오른쪽 곡면 유리 건물 (static/img/verify-bg.jpg) */
.mverify {
  position: relative; display: flex; align-items: center; overflow: hidden; min-height: 146px; padding: 22px 26px 20px 28px; border-radius: 4px;
  color: #fff; background: #0a1e44 url("../img/verify-bg.jpg?v=3") right center / cover no-repeat;
  box-shadow: 0 10px 24px rgba(10, 33, 74, .18);
}
.mverify-body { flex: 1 1 auto; min-width: 0; }
.mverify-eyebrow { display: block; font-size: 10px; font-weight: 400; letter-spacing: .22em; color: rgba(255, 255, 255, .72); }
.mverify strong { display: block; margin-top: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.mverify-desc { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
/* 설명 아래 오른쪽 끝의 가는 긴 화살표 */
.mverify-arrow { position: relative; display: block; width: 36px; height: 1px; margin: 4px 0 0 178px; background: rgba(255, 255, 255, .85); transition: width .2s; }
.mverify-arrow::after { content: ""; position: absolute; right: 1px; top: -3.5px; width: 7px; height: 7px; border-top: 1px solid rgba(255, 255, 255, .85); border-right: 1px solid rgba(255, 255, 255, .85); transform: rotate(45deg); transform-origin: center; }
.mverify:hover .mverify-arrow { width: 46px; }
.mverify-icon {
  display: none; flex-shrink: 0; place-items: center; width: 46px; height: 46px; margin-left: 12px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  color: #fff; background: rgba(10, 30, 68, .25); backdrop-filter: blur(2px); transition: background-color .15s, color .15s;
}
.mverify:hover .mverify-icon { background: #fff; color: var(--c-navy); }
@media (min-width: 400px) { .mverify-icon { display: grid; } }

@media (min-width: 1280px) {
  .mhero-keywords { display: block; }
  /* 본문(1200px) 기준으로 배치: 화면이 넓어져도 건물이 오른쪽 끝으로 밀리지 않게 */
  .mhero-bg img { left: calc(50% - 170px); }
  .mhero-keywords { right: max(32px, calc(50% - 600px + 16px)); }
}

.mnotice { margin-top: 24px; }
.mnotice .mhead { padding: 0 4px 12px; border-bottom: 1px solid #e3e8ef; }
.mnotice ul { list-style: none; margin: 0; padding: 0; }
.mnotice li { border-bottom: 1px solid #edf0f4; }
.mnotice a { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 4px; }
.mnotice-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #111827; }
.mnotice a:hover .mnotice-title { color: var(--c-title-blue); }
.mnotice time { flex-shrink: 0; font-size: 12.5px; color: #8a94a6; font-variant-numeric: tabular-nums; }
.mtag { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 44px; border-radius: 999px; background: #eef1f5; color: #4b5563; font-size: 11.5px; font-weight: 600; }
.mtag-notice { background: #fdecec; color: #e0463c; }
.mempty { padding: 48px 0; text-align: center; font-size: 14px; color: var(--c-sub); }

@media (min-width: 1024px) {
  .mbody { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; }
}
@media (min-width: 1280px) {
  .mbody { grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; }
}

/* ── 서브 비주얼 (브레드크럼 · 제목 · 하위 메뉴 탭) ── */
.subvisual { background: var(--c-primary-soft); border-bottom: 1px solid #e1ecf8; }
.subvisual-inner { max-width: 1200px; margin: 0 auto; padding: 36px 16px 0; }
.subvisual-inner.no-tabs { padding-bottom: 36px; }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-sub); }
.crumb a:hover { color: var(--c-primary); }
.crumb-current { color: var(--c-ink); }
.subvisual h1 { margin-top: 12px; font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--c-ink); }
.subvisual-desc { margin-top: 8px; font-size: 15px; color: var(--c-sub); }

.sub-tabs { display: flex; gap: 4px; margin-top: 28px; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; }
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs a {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 50px; padding: 0 24px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
  font-size: 15px; font-weight: 500; color: #4a5568; transition: color .15s, background-color .15s;
}
.sub-tabs a:hover { color: var(--c-primary); background: rgba(255, 255, 255, .55); }
.sub-tabs a.is-active { background: #fff; border-color: #e1ecf8; color: var(--c-primary); font-weight: 700; }

@media (min-width: 768px) {
  .subvisual-inner { padding-top: 48px; }
  .subvisual-inner.no-tabs { padding-bottom: 48px; }
  .subvisual h1 { font-size: 32px; }
}

/* ── 페이지 본문 공통 ── */
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 16px 0; }
.page-section { margin-top: 56px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.section-head .section-title { margin-bottom: 0; }
.section-title { margin-bottom: 20px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink); }
.more-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; color: var(--c-sub); }
.more-link:hover { color: var(--c-primary); }

/* ── 주주 인증 안내 ── */
.guide-intro {
  display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, #0a5ab3, #023f9b); box-shadow: 0 10px 24px rgba(0, 63, 155, .22);
}
.guide-intro-icon { flex-shrink: 0; color: rgba(255, 255, 255, .85); }
.guide-intro-body { flex: 1; }
.guide-intro-body h2 { font-size: 22px; font-weight: 700; }
.guide-intro-body p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.guide-intro-action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex-shrink: 0; }
.guide-intro .btn-primary { background: #fff; border-color: #fff; color: var(--c-primary); border-radius: 999px; padding: 0 26px; }
.guide-intro .btn-primary:hover { background: var(--c-primary-light); border-color: var(--c-primary-light); }
.guide-intro .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .8); color: #fff; border-radius: 999px; }
.guide-intro .btn-outline:hover { background: rgba(255, 255, 255, .12); }
.guide-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.guide-status.is-done { color: #bfe0ff; }
.guide-sublink { font-size: 13px; color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
.guide-sublink:hover { color: #fff; }

.step-grid { display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; padding: 0; margin: 0; }
.step-card { position: relative; padding: 26px 24px; border: 1px solid #e1ecf8; border-radius: 14px; background: #fff; }
.step-no { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--c-primary); }
.step-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 14px 0; border-radius: 14px; background: var(--c-primary-soft); color: var(--c-primary); }
.step-card strong { display: block; font-size: 17px; font-weight: 700; color: var(--c-ink); }
.step-card p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--c-sub); }

.info-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.info-card { padding: 26px 24px; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; }
.info-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 17px; font-weight: 700; color: var(--c-ink); }
.info-card h3 svg { color: var(--c-primary); }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 6px 0 6px 22px; font-size: 14.5px; line-height: 1.6; color: #3b4452; }
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: 13px; width: 11px; height: 6px;
  border-left: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary); transform: rotate(-45deg);
}
.check-list b { color: var(--c-ink); font-weight: 700; }

.help-banner {
  display: flex; align-items: center; gap: 16px; margin-top: 40px; padding: 22px 24px;
  border: 1px solid #d5e6f8; border-radius: 14px; background: #e3f0fd; transition: border-color .15s;
}
.help-banner:hover { border-color: var(--c-primary); }
.help-banner-icon { flex-shrink: 0; color: var(--c-primary); }
.help-banner-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.help-banner-body strong { font-size: 16px; font-weight: 700; color: var(--c-primary); }
.help-banner-body span { font-size: 13.5px; color: #4a5568; }
.help-banner-arrow { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--c-primary); color: #fff; }

/* ── IR 정보 ── */
.ir-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.ir-aside { display: flex; flex-direction: column; gap: 20px; }

.doc-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--c-primary); }
.doc-list li { border-bottom: 1px solid var(--c-line-soft); }
.doc-list a { display: flex; align-items: center; gap: 16px; padding: 18px 4px; }
.doc-list a:hover strong { color: var(--c-primary); }
.doc-icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary); }
.doc-body { flex: 1; min-width: 0; }
.doc-body strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15.5px; font-weight: 600; color: var(--c-ink); }
.doc-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 5px; font-size: 13px; color: var(--c-sub); }
.doc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.doc-arrow { flex-shrink: 0; color: #b0b5bd; }
.doc-empty { padding: 56px 0; text-align: center; font-size: 14px; color: var(--c-sub); }

.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li + li { border-top: 1px solid var(--c-line-soft); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--c-ink); }
.link-list a:hover { color: var(--c-primary); }
.link-list a span { font-size: 12.5px; font-weight: 400; color: var(--c-sub); }

.contact-card { padding: 26px 24px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, #0a5ab3, #023f9b); }
.contact-icon { display: block; color: rgba(255, 255, 255, .85); }
.contact-card h3 { margin-top: 12px; font-size: 18px; font-weight: 700; }
.contact-card p { margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.contact-card dl { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
.contact-card dl div { display: flex; gap: 12px; padding: 3px 0; font-size: 14.5px; }
.contact-card dt { width: 52px; flex-shrink: 0; color: rgba(255, 255, 255, .65); }
.contact-card dd { margin: 0; font-weight: 600; }
.contact-card dd a:hover { text-decoration: underline; }

.info-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--c-primary); font-size: 14.5px; }
.info-table th, .info-table td { padding: 15px 16px; border-bottom: 1px solid var(--c-line); text-align: left; }
.info-table th { width: 32%; background: var(--c-canvas); font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.info-table td { color: #3b4452; }

@media (min-width: 640px) {
  .step-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .guide-intro { flex-direction: row; align-items: center; gap: 28px; padding: 36px 40px; }
  .guide-intro-action { align-items: flex-end; }
  .info-table th { width: 220px; padding-left: 24px; }
}
@media (min-width: 1024px) {
  .step-grid { grid-template-columns: repeat(4, 1fr); }
  .ir-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}