/* 관상 입문 정보 글 (guide/*.html) */
.guide { line-height: 1.75; font-size: 15.5px; text-align: left; }
.guide .g-crumb, .guide h1, .g-cta, .g-next, .guide .notice { text-align: center; }
.guide h1 { display: block; }
.guide h1 { font-family: "Jua"; font-weight: 400; font-size: 27px; line-height: 1.35; margin: 4px 0 14px; }
.guide h1 em { font-style: normal; color: var(--rose-deep); font-size: 21px; }
.guide h2 { font-family: "Jua"; font-weight: 400; font-size: 21px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guide h2 small { color: var(--ink-soft); font-size: 15px; }
.g-crumb { display: table; margin-left: auto !important; margin-right: auto !important; font-family: "Jua"; font-size: 13px; color: var(--rose-deep); background: #FFE1EA; padding: 3px 12px; border-radius: 99px; margin: 6px 0 0; }
.g-lead { margin: 0 0 18px; }
.g-box, .g-toc, .g-type, .g-more { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 0 0 16px; }
.g-box { background: #FFF6D6; }
.g-box ol, .g-toc ol { margin: 6px 0 4px; padding-left: 20px; }
.g-box small { color: var(--ink-soft); font-size: 13px; }
.g-toc a { color: var(--ink); text-decoration: none; }
.g-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 16px; }
.g-type img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; display: block; margin: 4px 0 12px; }
.g-look { font-family: "Jua"; color: var(--rose-deep); margin: 0 0 6px; }
.g-tip { display: flex; align-items: center; gap: 8px; background: var(--bg2); border-radius: 14px; padding: 10px 12px; margin: 12px 0 0; font-size: 14px; }
.g-tip svg { width: 34px; height: 34px; flex: none; }
.g-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 14.5px; }
.g-table th, .g-table td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; }
.g-table th { color: var(--ink-soft); font-weight: 400; }
.g-cta { text-align: center; background: linear-gradient(160deg, #FFE3EC, #F1E8FF); border-radius: 28px; padding: 22px 18px; margin: 8px 0 16px; }
.g-cta svg { width: 70px; height: 70px; }
.g-cta b { display: block; font-family: "Jua"; font-weight: 400; font-size: 20px; }
.g-cta p { margin: 4px 0 14px; color: var(--ink-soft); font-size: 14px; }
.g-next { text-align: center; color: var(--ink-soft); font-size: 14px; }
/* 2판: 부위 지도, 내 코 찾기, 비교 그림, 나이 흐름, 질문 */
.g-map, .g-quiz, .g-group, .g-faq { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 0 0 16px; }
.g-mapfig, .g-pic { position: relative; display: block; }
.g-mapfig img, .g-pic img { width: 100%; height: auto; display: block; border-radius: 16px; }
.g-mapfig svg, .g-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-mapfig .pt circle { fill: #FF2F74; stroke: #fff; stroke-width: 3; }
.g-mapfig .ln path { stroke: #FF2F74; stroke-width: 3; fill: none; }
.g-mapfig .lb rect { fill: #FFE600; }
.g-mapfig .lb text { font-family: "Jua", sans-serif; font-size: 21px; text-anchor: middle; fill: #2E2026; }
.g-pic svg circle, .g-pic svg ellipse, .g-pic svg path { fill: none; stroke: #FF2F74; stroke-width: 7; stroke-dasharray: 14 10; stroke-linecap: round; }
.g-legend { list-style: none; padding: 0; margin: 12px 0 0; font-size: 14px; }
.g-legend li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.g-legend li:last-child { border: 0; }
.g-legend b { color: var(--rose-deep); margin-right: 6px; }
.g-quiz { background: #FFF6D6; }
.g-q { font-family: "Jua"; margin: 10px 0 6px; }
.g-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-opts button { background: #fff; border-radius: 14px; padding: 10px 4px; font-size: 13.5px; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.g-opts button.on { background: var(--rose); color: #fff; }
.g-res { margin: 12px 0 0; padding: 10px 12px; background: #fff; border-radius: 14px; font-family: "Jua"; text-align: center; }
.g-res a { color: var(--rose-deep); }
.guide h2 small { display: block; width: 100%; font-family: "Gowun Dodum"; font-size: 13px; }
.g-ths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-th { text-decoration: none; color: var(--ink); text-align: center; }
.g-th b { display: block; font-family: "Jua"; font-weight: 400; font-size: 14px; margin-top: 6px; }
.g-th small { color: var(--ink-soft); font-size: 12px; }
.g-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.g-pic.sm { width: 86px; flex: none; }
.g-pic.sm svg circle, .g-pic.sm svg ellipse, .g-pic.sm svg path { stroke-width: 10; }
.guide h3 { font-family: "Jua"; font-weight: 400; font-size: 19px; margin: 0; display: flex; align-items: center; gap: 6px; }
.g-head small { color: var(--ink-soft); font-size: 13px; line-height: 1.5; display: block; margin-top: 2px; }
.g-age { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin: 10px 0 12px; }
.g-age span { flex: 1; text-align: center; background: var(--bg2); border-radius: 12px; padding: 8px 2px; font-size: 12.5px; color: var(--ink-soft); }
.g-age span b { display: block; font-family: "Jua"; font-weight: 400; color: var(--rose-deep); font-size: 14px; }
.g-age i { font-style: normal; color: var(--rose); }
.g-faq details { border-bottom: 1px dashed var(--line); padding: 10px 0; }
.g-faq details:last-child { border: 0; }
.g-faq summary { font-family: "Jua"; cursor: pointer; }
.g-faq details p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; }
.g-opts.four, .g-ths.four { grid-template-columns: repeat(2, 1fr); }
.g-opts.two, .g-ths.two { grid-template-columns: repeat(2, 1fr); }
.g-ths.four .g-pic, .g-ths.two .g-pic { max-width: 100%; }
.g-more a, .g-next a { color: var(--rose-deep); }

/* 관상 입문 목록 */
.gi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.gi-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 10px 14px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.gi-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin-bottom: 6px; }
.gi-card .gi-no { font-family: "Jua"; font-size: 12.5px; color: var(--rose-deep); }
.gi-card b { font-family: "Jua"; font-weight: 400; font-size: 16px; line-height: 1.35; }
.gi-card small { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.gi-card.soon { justify-content: center; text-align: center; background: var(--bg2); box-shadow: none; border: 2px dashed var(--line); min-height: 160px; }