/* 모토시세 — 웹1.0 스타일: 돋움체·파란 밑줄 링크·테두리 표·회색 상자. 외부 글꼴·이미지 없이 가볍게. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #e9ecf1; color: #222;
  font: 14px/1.65 Dotum, 돋움, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}
a { color: #0033cc; }
a:visited { color: #551a8b; }
a:hover { color: #cc0000; }
#wrap { max-width: 980px; margin: 0 auto; background: #fff; border-left: 1px solid #b8c0cc; border-right: 1px solid #b8c0cc; }

/* 상단 */
#top { position: relative; padding: 6px 12px 10px; background: #fff; border-bottom: 3px solid #1f3f7a; }
.toplinks { margin: 0 0 6px; font-size: 12px; color: #666; text-align: right; }
.toplinks a { color: #444; text-decoration: none; }
.toplinks a:hover { text-decoration: underline; }
#logo a { text-decoration: none; color: #1f3f7a; }
#logo b { font: bold 30px/1 "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; letter-spacing: -1px; }
#logo span { display: inline-block; margin-left: 6px; padding: 1px 5px; font: bold 11px/1.4 Verdana, Arial, sans-serif; color: #fff; background: #cc3300; vertical-align: 4px; }
#logo em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: #555; }
#tel { position: absolute; right: 12px; bottom: 10px; text-align: right; font-weight: bold; color: #cc3300; }
#tel a { color: #cc3300; font-size: 18px; text-decoration: none; }
#tel small { display: block; font-weight: normal; font-size: 11px; color: #666; }

#menubar { display: flex; flex-wrap: wrap; background: #1f3f7a; border-bottom: 1px solid #0f2550; }
#menubar a { color: #fff; text-decoration: none; padding: 6px 12px; font-weight: bold; font-size: 13px; border-right: 1px solid #355a9c; }
#menubar a:hover { background: #cc3300; }
#loc { padding: 5px 12px; font-size: 12px; color: #555; background: #f4f6f9; border-bottom: 1px solid #dde2ea; }

/* 본문 2단 (왼쪽 메뉴 상자) */
#body { display: grid; grid-template-columns: 200px 1fr; grid-template-areas: "side main"; gap: 0; }
#main { grid-area: main; padding: 12px 16px 20px; min-width: 0; border-left: 1px solid #dde2ea; }
#side { grid-area: side; padding: 10px 8px; background: #f7f8fa; }
.sbox { margin-bottom: 10px; border: 1px solid #c3cad6; background: #fff; }
.sbox h4 { margin: 0; padding: 4px 8px; font-size: 12px; color: #fff; background: #4a6aa5; }
.sbox ul { margin: 0; padding: 6px 8px 6px 20px; font-size: 12px; line-height: 1.7; }
.sbox li { list-style: square; }
.sbox .more, .sidetel { margin: 0; padding: 0 8px 6px; font-size: 12px; }
.sidetel { padding-top: 6px; color: #cc3300; font-weight: bold; }

h1 { margin: 6px 0 10px; font: bold 22px/1.35 "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; color: #111; letter-spacing: -0.5px; }
h1 small { font-size: 14px; color: #666; font-weight: normal; }
h2 { margin: 26px 0 10px; padding: 5px 8px; font-size: 16px; background: #eef2f8; border-left: 5px solid #1f3f7a; border-bottom: 1px solid #c9d3e3; }
h2 span { color: #cc3300; font-size: 11px; vertical-align: 2px; }
h3 { margin: 18px 0 6px; font-size: 14px; color: #1f3f7a; }
p { margin: 8px 0; }
.answer { padding: 9px 11px; background: #fffbe6; border: 1px solid #e6d27a; }
.lead { color: #333; font-weight: bold; }
.note, .small, .updated, .meta { font-size: 12px; color: #666; }
.updated { margin-top: 20px; text-align: right; }
.notice { padding: 6px 10px; margin-bottom: 10px; border: 1px dashed #cc3300; background: #fff6f2; font-size: 13px; }
.links { line-height: 1.9; }
.dongs { font-size: 13px; color: #444; }
.more { text-align: right; font-size: 12px; }
mark { background: #ffef9f; padding: 0 2px; }
ul, ol { padding-left: 22px; }
li { margin: 3px 0; }
.factors li { margin-bottom: 6px; }
.toc { padding: 8px 12px; background: #f7f8fa; border: 1px solid #dde2ea; font-size: 13px; }
.toc ol { margin: 4px 0 0; }

/* 표 */
.tbl { width: 100%; border-collapse: collapse; margin: 8px 0 6px; font-size: 13px; }
.tbl caption { caption-side: top; text-align: left; font-size: 12px; color: #555; padding: 0 0 4px; }
.tbl th, .tbl td { border: 1px solid #aab4c3; padding: 5px 7px; text-align: left; vertical-align: top; }
.tbl thead th { background: #dfe6f1; color: #1a2a48; white-space: nowrap; }
.tbl tbody th { background: #f6f8fb; font-weight: bold; white-space: nowrap; }
.tbl tbody tr:nth-child(even) td { background: #fafbfd; }
.yeartbl td { white-space: nowrap; }

/* 상자·폼 */
.box { margin: 22px 0 8px; padding: 10px 12px; border: 2px solid #1f3f7a; background: #f8faff; }
.box h3 { margin: 0 0 6px; color: #cc3300; font-size: 15px; }
.calc select { font-size: 14px; padding: 2px; margin: 0 8px 4px 2px; }
#c-out table { background: #fff; }
.formtbl { width: 100%; border-collapse: collapse; background: #fff; }
.formtbl th { width: 86px; text-align: left; padding: 5px 8px; background: #eef2f8; border: 1px solid #c3cad6; font-size: 13px; }
.formtbl td { padding: 5px 8px; border: 1px solid #c3cad6; }
.formtbl input, .formtbl select, .formtbl textarea { font: inherit; padding: 4px 6px; border: 1px solid #8f99a8; width: 100%; max-width: 320px; }
.formtbl input[name=mileage] { max-width: 140px; }
.formtbl textarea { max-width: 100%; }
.agree { font-size: 12px; }
.btns button { font: bold 15px "Malgun Gothic", sans-serif; color: #fff; background: #cc3300; border: 1px solid #992600; padding: 7px 18px; cursor: pointer; }
.btns button:hover { background: #e03a00; }
.btns .tel { font-weight: bold; color: #cc3300; }
.formmsg { font-weight: bold; }
.formmsg.ok { color: #0a7a2f; }
.formmsg.err { color: #cc0000; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

.faq dt { margin-top: 10px; font-weight: bold; color: #1f3f7a; }
.faq dd { margin: 3px 0 0 0; padding-left: 14px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 13px; }
.doc th, .doc td { border: 1px solid #aab4c3; padding: 5px 7px; }
.doc th { background: #dfe6f1; }
.doc blockquote { margin: 8px 0; padding: 6px 12px; border-left: 4px solid #c3cad6; background: #f7f8fa; color: #444; }
.prevnext { margin-top: 18px; padding-top: 8px; border-top: 1px dotted #aab4c3; font-size: 13px; }

#foot { padding: 12px 14px 18px; font-size: 12px; color: #555; background: #f1f3f6; border-top: 3px solid #1f3f7a; }
#foot p { margin: 4px 0; }

/* 휴대폰 — 한 단으로, 왼쪽 메뉴는 본문 아래 */
@media (max-width: 760px) {
  body { font-size: 15px; background: #fff; }
  #wrap { border: 0; }
  #top { padding-bottom: 8px; }
  #tel { position: static; text-align: left; margin-top: 6px; }
  .toplinks { text-align: left; }
  #body { grid-template-columns: 1fr; grid-template-areas: "main" "side"; }
  #main { border-left: 0; padding: 10px 12px 16px; }
  #menubar a { padding: 6px 9px; font-size: 13px; }
  h1 { font-size: 20px; }
  .tbl { font-size: 12.5px; display: block; overflow-x: auto; }
  .yeartbl td { white-space: normal; }
  .formtbl th { width: 72px; }
}