/* Annyeong Trip 공통 스타일 — A(metro) 구조 + C(pop) 핑크 포인트 (design/d-guide-ja.html에서 확정, 2026-10-25) 언어별로 바뀌는 건 body 글꼴뿐. 색·구조는 모든 언어 공통. */ :root { --bg:#ffffff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --soft:#f9fafb; --pink:#ff3d7f; --pink-soft:#fff1f6; --pink-ink:#c81e5b; --violet:#6c4bff; --ok:#059669; --ok-soft:#ecfdf5; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui, -apple-system, sans-serif; line-height:1.85; font-size:16px; -webkit-font-smoothing:antialiased; } body.ja { font-family:"Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif; } .wrap { max-width:720px; margin:0 auto; padding:0 16px; } a { color:var(--pink-ink); } img { max-width:100%; height:auto; } /* 헤더 */ .site-head { border-bottom:1px solid var(--line); } .site-head .wrap { display:flex; align-items:center; justify-content:space-between; height:56px; } .logo { font-family:"Plus Jakarta Sans", sans-serif; font-weight:800; font-size:19px; color:var(--ink); text-decoration:none; letter-spacing:-0.02em; } .logo span { color:var(--pink); } .lang { font-size:13px; color:var(--muted); } .lang b { color:var(--ink); } .lang a { color:var(--muted); text-decoration:none; } /* 글 머리 */ .crumb { font-size:12px; color:var(--muted); margin:16px 0 8px; } .crumb a { color:var(--muted); text-decoration:none; } .chip { display:inline-block; font-size:12px; font-weight:700; color:var(--pink-ink); background:var(--pink-soft); border-radius:999px; padding:2px 10px; text-decoration:none; } h1 { font-size:26px; line-height:1.4; font-weight:900; margin:10px 0 12px; letter-spacing:-0.01em; } .updated { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ok); background:var(--ok-soft); border-radius:8px; padding:4px 10px; } .pr { font-size:11px; color:var(--muted); margin:10px 0 0; } /* 결론 상자 */ .answer { margin:20px 0; border:2px solid var(--pink); border-radius:16px; overflow:hidden; } .answer .head { background:var(--pink); color:#fff; font-weight:900; font-size:14px; padding:8px 16px; letter-spacing:0.05em; } .answer ul { margin:0; padding:12px 16px 14px 34px; } .answer li { margin:4px 0; } .answer strong, .answer b { background:linear-gradient(transparent 60%, #ffd3e2 60%); } /* 공연 정보 */ .event { border:1px solid var(--line); border-radius:16px; padding:14px 16px; background:var(--soft); margin:20px 0; } .event h3 { margin:0 0 6px; font-size:15px; } .event dl { display:grid; grid-template-columns:5.5em 1fr; gap:4px 10px; margin:0; font-size:14px; } .event dt { color:var(--muted); } .event dd { margin:0; font-weight:500; } /* 목차 */ .toc { margin:24px 0; border:1px solid var(--line); border-radius:16px; padding:12px 16px; } .toc b { font-size:14px; } .toc ol { margin:6px 0 0; padding-left:20px; font-size:14px; } .toc a { color:var(--ink); text-decoration:none; } /* 본문 */ article h2 { display:flex; gap:10px; align-items:flex-start; font-size:21px; line-height:1.45; margin:40px 0 12px; } article h2 .n { flex:none; width:28px; height:28px; margin-top:2px; border-radius:50%; background:var(--pink); color:#fff; font-size:14px; display:grid; place-items:center; font-family:"Plus Jakarta Sans", sans-serif; } article h3 { font-size:17px; margin:24px 0 8px; } .table { overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:12px 0; } table { border-collapse:collapse; width:100%; font-size:13px; line-height:1.6; } th, td { padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { background:var(--soft); font-weight:700; font-size:12px; color:var(--muted); white-space:nowrap; } tr:last-child td, tr:last-child th { border-bottom:none; } td .best { display:inline-block; white-space:nowrap; font-size:10px; font-weight:700; color:#fff; background:var(--pink); border-radius:4px; padding:0 5px; margin-top:2px; } .nw { white-space:nowrap; } .note { font-size:12px; color:var(--muted); margin:6px 0 0; } .tip { margin:16px 0; background:var(--pink-soft); border-radius:12px; padding:12px 16px; font-size:15px; } .tip b:first-child { color:var(--pink-ink); } .check { list-style:none; padding:0; margin:12px 0; } .check li { position:relative; padding:8px 0 8px 30px; border-bottom:1px dashed var(--line); } .check li::before { content:"✓"; position:absolute; left:4px; top:8px; width:20px; height:20px; border-radius:6px; background:var(--ok-soft); color:var(--ok); font-size:13px; font-weight:900; display:grid; place-items:center; } figure { margin:20px 0; } figcaption { font-size:12px; color:var(--muted); margin-top:4px; } /* 숙소 카드 */ .stays { display:grid; gap:12px; margin:16px 0; } .stay { border:1px solid var(--line); border-radius:16px; padding:14px 16px; } .stay .top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; } .stay h3 { margin:0; font-size:16px; } .stay .tag { flex:none; font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 6px; } .stay p { margin:4px 0 12px; font-size:14px; color:var(--muted); line-height:1.6; } .btn { display:flex; justify-content:center; align-items:center; min-height:48px; border-radius:12px; font-weight:700; text-decoration:none; font-size:15px; padding:0 12px; text-align:center; } .btn.main { background:var(--pink); color:#fff; } .btn.sub { border:1.5px solid var(--ink); color:var(--ink); } /* FAQ */ .faq details { border-bottom:1px solid var(--line); padding:10px 0; } .faq summary { font-weight:700; cursor:pointer; list-style:none; position:relative; padding-right:24px; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; position:absolute; right:4px; top:0; color:var(--pink); font-weight:900; } .faq details[open] summary::after { content:"−"; } .faq p { margin:8px 0 0; font-size:15px; } /* 출처·관련 글 */ .src { margin:32px 0; font-size:13px; } .src th { width:8em; white-space:normal; } .related { margin:32px 0; } .related h2 { font-size:18px; margin:0 0 8px; } /* 글 목록 카드 */ .cards { display:grid; gap:10px; margin:12px 0 28px; } .card { display:block; border:1px solid var(--line); border-radius:14px; padding:12px 14px; color:var(--ink); text-decoration:none; } .card b { display:block; font-size:15px; line-height:1.5; } .card span { font-size:12px; color:var(--muted); } /* 홈 */ .hero { padding:32px 0 8px; } .hero h1 { font-size:28px; margin:0 0 8px; } .hero h1 span { color:var(--pink); } .hero p { color:var(--muted); margin:0; } .cat-title { font-size:18px; margin:28px 0 0; display:flex; align-items:center; gap:8px; } .cat-title::before { content:""; width:6px; height:18px; border-radius:3px; background:var(--pink); } .empty { color:var(--muted); font-size:14px; } .site-foot { border-top:1px solid var(--line); margin-top:40px; padding:20px 0 32px; font-size:12px; color:var(--muted); } .site-foot .logo { font-size:15px; } .site-foot nav { margin-top:8px; display:flex; gap:12px; flex-wrap:wrap; } .site-foot nav a { color:var(--muted); } /* 필자의 한마디 */ .voice { margin:20px 0; border-left:4px solid var(--pink); background:var(--soft); border-radius:0 12px 12px 0; padding:12px 16px; } .voice > b { display:block; font-size:12px; color:var(--pink-ink); letter-spacing:0.04em; } .voice > b::before { content:"💬 "; } .voice p { margin:4px 0 0; font-size:15px; } /* 매장 카드 + 지도 버튼 */ .shops { display:grid; gap:10px; margin:10px 0 20px; } .shop { border:1px solid var(--line); border-radius:14px; padding:12px 14px; } .shop .top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; } .shop .hours { flex:none; font-size:12px; color:var(--muted); } .shop .addr { margin:2px 0 10px; font-size:14px; } .maps { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .maps a { display:flex; justify-content:center; align-items:center; min-height:40px; border-radius:10px; font-size:13px; font-weight:700; text-decoration:none; border:1.5px solid var(--line); color:var(--ink); } .maps a::before { content:"📍"; margin-right:4px; } .maps a:first-child { border-color:var(--pink); color:var(--pink-ink); } /* SVG 도식 — 같은 규칙을 각 SVG 안