/* Ganghwa Island travel guide - mobile first, no JavaScript required */
:root { --fg:#1c1c22; --muted:#5f636b; --bg:#fff; --soft:#f6f7f9; --line:#e3e6ea; --accent:#0b6b57; --accent-soft:#e6f2ef; --warn-bg:#fff4d6; --warn-fg:#8a5a00; --maxw:46rem; }
* { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } img { max-width:100%; height:auto; }
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.75; font-size:16px; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Segoe UI",Roboto,Arial,sans-serif; }
a { color:var(--accent); } a:hover { text-decoration:none; } p { margin:0 0 1rem; } ul,ol { padding-left:1.2rem; } li { margin:.2rem 0; }
h1 { font-size:1.6rem; line-height:1.35; margin:0 0 .6rem; } h2 { font-size:1.2rem; margin:2rem 0 .6rem; } h3 { font-size:1.05rem; margin:1.5rem 0 .5rem; } main { max-width:var(--maxw); margin:0 auto; padding:1.5rem 1rem 3rem; }
blockquote { margin:1rem 0; padding:.6rem 1rem; background:var(--soft); border-left:4px solid var(--accent); color:var(--muted); } table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem; } th,td { border:1px solid var(--line); padding:.45rem .6rem; text-align:left; vertical-align:top; } th { background:var(--soft); }
.site-header { border-bottom:1px solid var(--line); background:var(--soft); } .brand { font-weight:700; font-size:1.05rem; text-decoration:none; color:var(--fg); } .site-header .bar { max-width:var(--maxw); margin:0 auto; padding:.8rem 1rem; display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline; justify-content:space-between; }
.site-header ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.8rem; } .site-header nav.main { border-top:1px solid var(--line); background:var(--bg); } .site-header nav.main ul { max-width:var(--maxw); margin:0 auto; padding:.6rem 1rem; gap:1rem; }
.site-header .lang a { font-size:.85rem; } .site-header .lang a[aria-current="true"] { font-weight:700; text-decoration:underline; } .updated,.date { color:var(--muted); font-size:.85rem; } .entry-list { list-style:none; padding-left:0; } .entry-list li { padding:.6rem 0; border-bottom:1px solid var(--line); } .entry-list p { margin:.2rem 0 0; color:var(--muted); font-size:.92rem; }
.info-box,.sources { margin:1.5rem 0; padding:1rem; background:var(--accent-soft); border:1px solid var(--line); border-radius:10px; } .info-box h2,.sources h2 { margin:0 0 .6rem; font-size:1rem; } .sources { background:var(--soft); } .info-box dl { margin:0; } .info-row { display:grid; grid-template-columns:5.5rem 1fr; gap:.8rem; padding:.3rem 0; border-bottom:1px solid var(--line); } .info-row:last-child { border-bottom:0; }
.info-box dt { color:var(--muted); font-size:.9rem; } .info-box dd { margin:0; overflow-wrap:anywhere; } .sources ul { margin:0; padding-left:1.1rem; } .sources .checked { color:var(--muted); font-size:.85rem; } .need-check { background:var(--warn-bg); color:var(--warn-fg); padding:.05rem .35rem; border-radius:4px; font-weight:600; } .ad-slot { display:none; } .disclosure { background:var(--warn-bg); color:var(--warn-fg); padding:.6rem .8rem; border-radius:8px; font-size:.92rem; }
.cards { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.6rem; margin:1.2rem 0; } .cards li { margin:0; } .cards a { display:block; padding:.8rem; background:var(--accent-soft); border-radius:10px; font-weight:600; text-decoration:none; } .cards .date { margin-left:.8rem; }
.related { margin:1.5rem 0; }
.photos { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:1rem 0 1.4rem; } .photo { margin:0; } .photo.main { grid-column:1 / -1; }
.photo img { width:100%; height:auto; display:block; border-radius:8px; background:var(--soft); } .photo figcaption { font-size:.75rem; color:var(--muted); line-height:1.4; margin-top:.25rem; overflow-wrap:anywhere; }
.aff-notice { background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:.6rem .8rem; font-size:.88rem; color:var(--muted); margin:.8rem 0; } .aff-notice p { margin:.2rem 0; }
.affiliate { margin:1.5rem 0; padding:1rem; border:1px dashed var(--accent); border-radius:10px; } .affiliate h2 { margin:0 0 .5rem; font-size:1rem; } .affiliate ul { margin:0; padding-left:1.1rem; } .aff-kind { font-size:.8rem; background:var(--accent-soft); padding:.05rem .4rem; border-radius:4px; } .aff-slot { color:var(--warn-fg); font-weight:600; }
.site-footer { border-top:1px solid var(--line); background:var(--soft); color:var(--muted); font-size:.85rem; } .site-footer p { max-width:var(--maxw); margin:0 auto; padding:1rem; } @media (min-width:40rem) { body { font-size:17px; } main { padding-top:2.5rem; } h1 { font-size:2rem; } }