/* ========================================================================== Korea Trips — 전체 스타일 사이트 크롬은 무채색으로 두고, 색은 '지역'만 갖습니다. 지역색(--region-seoul 등)은 build.js 가 site.config.js 를 읽어 각 페이지 에 심어줍니다. 여기서는 --r 로 받아 씁니다. ========================================================================== */ :root{ --ground:#ffffff; --surface:#f3f4f6; --surface-2:#e9ebef; --ink:#14171a; --ink-mid:#3d4650; --ink-mute:#606b78; --line:#dfe3e8; --line-hard:#c2cad3; --on-region:#ffffff; --kr:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕", "Apple SD Gothic Neo","Noto Sans KR","Hiragino Sans","Yu Gothic UI", "Microsoft YaHei","PingFang SC",sans-serif; --en:Georgia,"Times New Roman",serif; --wrap:1120px; --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ground:#0f1114; --surface:#171a1f; --surface-2:#1e232a; --ink:#e9ecef; --ink-mid:#c2c9d1; --ink-mute:#939ea9; --line:#262c33; --line-hard:#3a424b; --on-region:#0f1114; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); } } :root[data-theme="dark"]{ --ground:#0f1114; --surface:#171a1f; --surface-2:#1e232a; --ink:#e9ecef; --ink-mid:#c2c9d1; --ink-mute:#939ea9; --line:#262c33; --line-hard:#3a424b; --on-region:#0f1114; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--kr);font-size:16px;line-height:1.75; -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased; /* 한글 줄바꿈 — 이게 없으면 브라우저가 한글을 중국어처럼 취급해서 "정리합니 / 다" 처럼 단어 중간에서 줄을 끊습니다. keep-all 은 어절 단위로 끊고, overflow-wrap 은 한 어절이 화면보다 길 때(긴 URL 등) 넘치지 않게 해주는 안전장치입니다. */ word-break:keep-all; overflow-wrap:break-word; } /* 마지막 줄에 단어 하나만 남는 것을 줄입니다 */ p{text-wrap:pretty;} /* 짧은 라벨은 절대 두 줄로 넘기지 않습니다 */ .card-meta,.r-count,.chip,.rtab,.lang,.nav a,.more,.post-head .meta,.card-tag{ white-space:nowrap; } .card-meta{overflow:hidden;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} [hidden]{display:none!important;} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;} .skip{position:absolute;left:-9999px;background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:0 0 8px 0;} .skip:focus{left:0;top:0;z-index:999;} :focus-visible{outline:2px solid var(--ink);outline-offset:2px;} /* ========================================================================== 헤더 + 언어 전환 ========================================================================== */ .site-header{ position:sticky;top:0;z-index:50; background:var(--ground); background:color-mix(in srgb,var(--ground) 90%,transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); } .header-inner{display:flex;align-items:center;gap:14px;height:62px;} .logo{font-weight:800;font-size:18px;letter-spacing:-.03em;} .langs{ margin-left:auto;display:flex;align-items:center;gap:2px; border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface); } .lang{ font-family:var(--en);font-size:12px;letter-spacing:.06em; padding:4px 10px;border-radius:999px;color:var(--ink-mute);line-height:1.6; } .lang:hover{color:var(--ink);} .lang.on{background:var(--ground);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08);} .nav{display:flex;gap:2px;align-items:center;} .nav a{padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-mute);} .nav a:hover{background:var(--surface);color:var(--ink);} .nav a[aria-current="page"]{background:var(--surface-2);color:var(--ink);} .nav-toggle{ display:none;background:none;border:1px solid var(--line);border-radius:10px; width:40px;height:36px;cursor:pointer;color:var(--ink);font-size:17px; } @media (max-width:820px){ .nav-toggle{display:block;} .nav{ display:none;position:absolute;top:62px;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--ground);border-bottom:1px solid var(--line);padding:8px; } .nav.open{display:flex;} .nav a{border-radius:10px;padding:12px 14px;} } /* ========================================================================== 히어로 ========================================================================== */ .hero{padding:56px 0 44px;border-bottom:1px solid var(--line);} .hero h1{ margin:0 0 12px;font-size:clamp(28px,5vw,44px);line-height:1.15; letter-spacing:-.04em;font-weight:800;text-wrap:balance; } .hero p{margin:0;max-width:56ch;color:var(--ink-mute);font-size:16.5px;} /* 홈 히어로 — 왼쪽 글 / 오른쪽 지도 지도는 세로가 가로의 1.8배라 폭에 맞추면 화면 밖으로 넘칩니다. 그래서 폭이 아니라 '높이'를 기준으로 크기를 정합니다. */ .hero-split{padding:48px 0 44px;} /* 지도 칸에 최대 폭을 줘서, 글과 지도가 양끝으로 벌어지지 않게 합니다 */ .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,300px);gap:40px;align-items:center;} .hero-text{min-width:0;max-width:600px;} .hero-split h1{font-size:clamp(28px,4.4vw,42px);} .hero-map{display:flex;justify-content:center;} @media (max-width:860px){ .hero-split{padding:30px 0 24px;} .hero-inner{grid-template-columns:1fr;gap:20px;justify-items:center;} .hero-text{width:100%;} } /* 어절 단위로 끊으면 줄 수가 늘어나므로, 좁은 화면에서는 살짝 줄입니다 */ @media (max-width:600px){ .hero p{font-size:15.5px;} } /* ========================================================================== 대한민국 지도 (지역 핀) 행정 경계 그대로가 아니라 위치를 알아보게 하는 안내용 그림입니다. ========================================================================== */ /* 높이를 먼저 정하고 폭은 비율에 맡깁니다 → 제주까지 화면 안에 들어옵니다 */ .hero-map svg{height:min(50vh,420px);width:auto;max-width:100%;display:block;} @media (max-width:860px){ .hero-map svg{height:min(38vh,300px);} } /* 지역 조각 — 지역 전체가 클릭 대상입니다. 같은 색 굵은 테두리(stroke)로 모서리를 둥글게 깎는 방식이라 fill 과 stroke 는 항상 같은 색이어야 합니다. */ .hero-map .map-area{cursor:pointer;} .hero-map .map-shape{ fill:color-mix(in srgb,var(--r) 36%,var(--ground)); stroke:color-mix(in srgb,var(--r) 36%,var(--ground)); stroke-width:7;stroke-linejoin:round; transition:fill .16s ease,stroke .16s ease; } .hero-map .map-count{ fill:var(--ink);font-family:var(--en);font-size:17px;font-weight:700; text-anchor:middle;pointer-events:none;font-variant-numeric:tabular-nums; } .hero-map .map-area:hover .map-shape{ fill:color-mix(in srgb,var(--r) 50%,var(--ground)); stroke:color-mix(in srgb,var(--r) 50%,var(--ground)); } .hero-map .map-area:focus-visible{outline:none;} .hero-map .map-area:focus-visible .map-shape{ fill:color-mix(in srgb,var(--r) 50%,var(--ground)); stroke:var(--ink);stroke-width:3; } /* 글이 없는 지역 — 자기 색을 옅게 유지합니다. 전부 회색으로 칠하면 붙어 있는 빈 지역끼리 한 덩어리로 보입니다. */ .hero-map .is-empty .map-shape{ fill:color-mix(in srgb,var(--r) 20%,var(--ground)); stroke:color-mix(in srgb,var(--r) 20%,var(--ground)); } .search-box{margin:24px 0 0;max-width:440px;display:flex;} .search-box input{ flex:1;padding:12px 18px;font-size:15.5px;font-family:inherit; border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink); } .search-box input:focus{outline:2px solid var(--ink);outline-offset:1px;background:var(--ground);} /* ========================================================================== 섹션 ========================================================================== */ .section{padding:42px 0;} .section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;} .section-head h2{margin:0;font-size:19px;letter-spacing:-.025em;font-weight:800;} .more{margin-left:auto;font-size:13px;color:var(--ink-mute);font-family:var(--en);} a.more{color:var(--ink);font-weight:600;} .empty{padding:44px 0;text-align:center;color:var(--ink-mute);} /* ========================================================================== 지역 카드 (홈) ========================================================================== */ /* 지역 8칸 — 넓은 화면에서는 한 줄에 모두 들어갑니다 */ .regions{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;} @media (min-width:900px){ .regions{grid-template-columns:repeat(8,1fr);} } .region{ background:var(--r);color:var(--on-region); border-radius:12px;padding:13px 12px;min-height:98px; display:flex;flex-direction:column;justify-content:space-between;gap:8px; transition:transform .16s ease; } .region:hover{transform:translateY(-2px);} /* word-break:keep-all — 한국어가 낱글자로 쪼개지지 않게. 영어는 단어 단위로 접힙니다 */ .r-name{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.035em;line-height:1.2;word-break:keep-all;} .r-en{ display:block;font-family:var(--en);font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;opacity:.7;margin-top:2px; } .r-count{ font-family:var(--en);font-size:11px;opacity:.9; font-variant-numeric:tabular-nums;line-height:1.4; } .region.empty{ background:var(--surface);color:var(--ink-mute); border:1px dashed var(--line-hard);padding:12px 11px; } .region.empty:hover{transform:none;} /* ========================================================================== 글 카드 ========================================================================== */ .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));} .grid.limit-6 > .card:nth-child(n+7){display:none;} .card{ background:var(--ground);border:1px solid var(--line);border-radius:12px; overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column; transition:transform .16s ease,box-shadow .16s ease; } .card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.11);} .card > a{display:flex;flex-direction:column;height:100%;} /* 썸네일은 사진 비율과 무관하게 항상 같은 크기(4:3)로 잘립니다. ★ img 를 position:absolute 로 띄우는 것이 핵심입니다. 일반 흐름에 두면 세로로 긴 사진이 컨테이너를 밀어올려서 aspect-ratio 가 무시되고 카드마다 높이가 제각각이 됩니다. */ .card-thumb{ aspect-ratio:4/3;display:grid;place-items:center; position:relative;overflow:hidden;min-height:0; background:color-mix(in srgb,var(--r) 15%,var(--surface)); } .card-thumb .emoji{font-size:42px;line-height:1;} .card-thumb.has-photo{background:var(--surface);} .card-thumb img{ position:absolute;inset:0; width:100%;height:100%;object-fit:cover; } .card-tag{ position:absolute;left:9px;top:9px;font-size:11px;font-weight:700; padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff; } .card-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1;} .card-body h3{ margin:0;font-size:15.5px;line-height:1.45;letter-spacing:-.02em;font-weight:700; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; text-wrap:balance; /* 두 줄로 넘어갈 때 줄 길이를 비슷하게 */ } .card-body p{ margin:0;font-size:13px;color:var(--ink-mute);line-height:1.6;flex:1; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .card-meta{ display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-mute); border-top:1px solid var(--line);padding-top:10px; font-family:var(--en);font-variant-numeric:tabular-nums; } .card-meta .dot{width:7px;height:7px;border-radius:50%;background:var(--r);flex:none;} /* ========================================================================== 지역 필터 칩 / 지역 페이지 탭 ========================================================================== */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;} .chip{ padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:600;font-family:inherit; border:1px solid var(--line);background:var(--ground);color:var(--ink-mute);cursor:pointer; } .chip:hover{border-color:var(--line-hard);color:var(--ink);} .chip.active{background:var(--ink);border-color:var(--ink);color:var(--ground);} .region-head{background:var(--r);color:var(--on-region);padding:34px 0 28px;} .region-head h1{margin:6px 0 0;font-size:clamp(30px,6vw,44px);font-weight:800;letter-spacing:-.045em;line-height:1;} .region-head .r-en{opacity:.75;letter-spacing:.2em;} .rtabs-bar{border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:62px;z-index:20;} .rtabs{display:flex;gap:2px;overflow-x:auto;} .rtab{ background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px; padding:13px 15px;font-family:inherit;font-size:14px;font-weight:600; color:var(--ink-mute);cursor:pointer;white-space:nowrap; } .rtab:hover{color:var(--ink);} .rtab.on{color:var(--ink);border-bottom-color:var(--ink);} .rtab .n{font-family:var(--en);font-size:11.5px;opacity:.6;margin-left:5px;} /* ========================================================================== 광고 자리 ========================================================================== */ .ad-slot{ margin:30px auto;min-height:96px;display:grid;place-items:center; border:1px dashed var(--line);border-radius:12px;background:var(--surface); color:var(--ink-mute);font-family:var(--en);font-size:12px;letter-spacing:.14em; } .ad-slot:empty,.ad-slot.live{border:0;background:none;min-height:0;} /* ========================================================================== 글 상세 ========================================================================== */ .post{max-width:720px;margin:0 auto;padding:40px 20px 60px;} .post-head{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:28px;} .post-head .kicker{ display:inline-flex;align-items:center;gap:6px; font-weight:700;font-size:13px;color:var(--ink-mute); } .post-head .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--r);} .post-head .kicker:hover{color:var(--ink);} .post-head h1{ margin:10px 0 12px;font-size:clamp(25px,4.4vw,34px);line-height:1.28; letter-spacing:-.04em;font-weight:800;text-wrap:balance; } .post-head .meta{color:var(--ink-mute);font-size:13.5px;margin:0;font-family:var(--en);} .post-body h2{ margin:40px 0 13px;font-size:20px;letter-spacing:-.03em;font-weight:800; padding-left:13px;border-left:4px solid var(--r); } .post-body h3{margin:26px 0 9px;font-size:17px;font-weight:700;letter-spacing:-.02em;} .post-body p{margin:0 0 18px;} .post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px;} .post-body li{margin-bottom:6px;} .post-body li::marker{color:var(--r);} .post-body img{border-radius:10px;margin:0 0 18px;} .post-body hr{border:0;border-top:1px solid var(--line);margin:32px 0;} .post-body code{ background:var(--surface);border:1px solid var(--line); padding:1px 6px;border-radius:6px;font-size:.92em; } .post-body pre{ background:var(--surface);border:1px solid var(--line); padding:16px;border-radius:10px;overflow-x:auto;margin:0 0 20px; } .post-body pre code{background:none;border:0;padding:0;} .table-scroll{overflow-x:auto;margin:0 0 26px;} .info-table,.md-table{width:100%;border-collapse:collapse;font-size:14.5px;} .info-table th,.info-table td,.md-table th,.md-table td{ border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top; } .info-table th,.md-table th{background:var(--surface);font-weight:700;} .info-table th{width:120px;white-space:nowrap;} /* 확실하지 않은 정보 표시 — 가격·영업시간처럼 자주 바뀌는 항목에 붙습니다 */ .unverified{ display:inline-block;white-space:nowrap; font-size:11.5px;font-weight:700;line-height:1.5; padding:2px 9px;border-radius:999px;margin-left:2px; color:var(--accent-ink,#8a5a12); background:color-mix(in srgb,#e0a01a 16%,var(--ground)); border:1px solid color-mix(in srgb,#e0a01a 42%,var(--ground)); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .unverified{color:#f0c46a;} } :root[data-theme="dark"] .unverified{color:#f0c46a;} /* 지도 바로가기 — 주소를 읽는 것보다 눌러서 여는 쪽이 편합니다 */ .info-table td a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;} .map-link{ display:inline-block;font-weight:700;text-decoration:none!important; padding:5px 12px;border-radius:999px; background:color-mix(in srgb,var(--r) 14%,var(--surface)); border:1px solid color-mix(in srgb,var(--r) 40%,var(--line)); } .map-link:hover{background:color-mix(in srgb,var(--r) 24%,var(--surface));} .callout{ background:color-mix(in srgb,var(--r) 12%,var(--surface)); border-left:4px solid var(--r); padding:15px 18px;border-radius:0 10px 10px 0;margin:0 0 24px;font-size:14.5px; } /* ========================================================================== 이모지 리액션 ========================================================================== */ .reactions{ margin:44px 0 0;padding:24px 20px;text-align:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); } .reactions-title{margin:0 0 16px;font-size:16px;font-weight:800;letter-spacing:-.02em;} .reaction-list{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;} .reaction{ display:inline-flex;align-items:center;gap:7px; padding:8px 14px 8px 11px;border-radius:999px; border:1px solid var(--line);background:var(--ground);color:var(--ink-mute); font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer; transition:transform .12s ease,border-color .15s ease,background .15s ease; } .reaction:hover{border-color:var(--line-hard);color:var(--ink);} .reaction .reaction-emoji{font-size:19px;line-height:1;} .reaction .reaction-label{display:none;} .reaction .reaction-count{min-width:16px;font-family:var(--en);font-variant-numeric:tabular-nums;font-weight:700;} .reaction.pressed{background:color-mix(in srgb,var(--r) 16%,var(--ground));border-color:var(--r);color:var(--ink);} .reaction.bump{transform:scale(1.13);} .reactions.busy .reaction{pointer-events:none;opacity:.6;} .reactions-note{margin:14px 0 0;font-size:12px;color:var(--ink-mute);} @media (min-width:640px){.reaction .reaction-label{display:inline;}} /* ========================================================================== 관련 글 / 문서 페이지 / 푸터 ========================================================================== */ .related{border-top:1px solid var(--line);margin-top:44px;padding-top:26px;} .doc{max-width:720px;margin:0 auto;padding:40px 20px 60px;} .doc h1{font-size:clamp(24px,4vw,32px);letter-spacing:-.04em;margin:0 0 8px;font-weight:800;} .doc .updated{color:var(--ink-mute);font-size:13.5px;margin-bottom:32px;font-family:var(--en);} .doc h2{margin:34px 0 12px;font-size:18px;font-weight:800;letter-spacing:-.025em;padding-left:13px;border-left:4px solid var(--line-hard);} .doc h3{margin:24px 0 9px;font-size:16px;font-weight:700;} .doc ul,.doc ol{padding-left:22px;} .doc li{margin-bottom:6px;} .doc a{text-decoration:underline;text-underline-offset:3px;} .doc .table-scroll{margin-bottom:22px;} .site-footer{ border-top:1px solid var(--line);background:var(--surface); padding:32px 0;margin-top:36px;font-size:13.5px;color:var(--ink-mute); } .footer-inner{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;} .footer-links{display:flex;flex-wrap:wrap;gap:16px;} .footer-links a:hover{color:var(--ink);} .footer-copy{margin-left:auto;font-family:var(--en);} @media (max-width:720px){.footer-copy{margin-left:0;width:100%;}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}