* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--headerHeight) + var(--size16)); }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--size16)/var(--bodyLeading) var(--fontBody); word-break: keep-all; overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: var(--size4); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
img { max-width: 100%; }
button, a, select { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.srOnly, .skip { position: absolute; width: var(--size1); height: var(--size1); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; top: var(--size10); left: var(--size10); padding: var(--size12); background: var(--card); z-index: 10; }
.disclosure { margin: 0; padding: var(--size9) var(--size20); text-align: center; background: var(--soft); color: var(--muted); font-size: var(--size12); line-height: 1.5; }
.top, main, .foot { max-width: var(--size1216); margin: auto; }
/* 헤더는 위아래 여백을 줄여 낮게 둔다(2026-10-14 운영자 지시 "헤더 높이를 더 줄여도 될 듯, 위아래 여백이 크다"). */
:root { --headerHeight: 60px; }
.siteHeader { position: sticky; top: 0; z-index: 10; background: var(--headerSurface); backdrop-filter: blur(var(--size16)); border-bottom: var(--stroke) solid var(--line); margin-bottom: var(--size10); }
.top { display: flex; align-items: center; gap: var(--size34); min-height: var(--headerHeight); padding: var(--size8) var(--size28); }
.brand { display: inline-flex; align-items: center; gap: var(--size9); font-size: var(--size25); font-weight: 900; letter-spacing: var(--sizeMinus1); text-decoration: none; }
.brand img { background: var(--imageMat); padding: var(--size4); border-radius: var(--size8); }
main { padding: 0 var(--size28) var(--size64); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(var(--size29), 3.4vw, var(--size46)); line-height: 1.3; letter-spacing: -.045em; margin-bottom: var(--size18); }
h2 { font-size: var(--size24); line-height: 1.4; letter-spacing: -.035em; margin: var(--size32) 0 var(--size18); }
h3 { font-size: var(--size20); line-height: 1.45; margin-bottom: var(--size12); letter-spacing: -.025em; }
.eyebrow { color: var(--muted); font-size: var(--size12); font-weight: 700; margin-bottom: var(--size8); }
.homeIntro { display: flex; justify-content: space-between; align-items: center; padding: var(--size5) 0 var(--size18); }
.homeIntro p { margin: 0; letter-spacing: .025em; }
.editorialHero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--size62); background: var(--forest); color: var(--ivory); padding: var(--size42) var(--size54); border: var(--size1) solid var(--heroLine); border-radius: var(--size28); overflow: hidden; }
.heroCopy { max-width: var(--size435); }
.heroTag { display: flex; align-items: center; gap: var(--size9); color: var(--heroAccent); font-size: var(--size12); margin-bottom: var(--size28); }
.heroTag span { width: var(--size6); height: var(--size6); border-radius: 50%; background: var(--accent); }
.heroCopy h1 { font-size: clamp(var(--size32), 3.65vw, var(--size49)); line-height: 1.32; margin-bottom: var(--size24); }
.heroSummary { color: var(--heroMuted); font-size: var(--size15); line-height: 1.9; margin-bottom: var(--size30); }
.heroRead { display: flex; align-items: center; justify-content: space-between; gap: var(--size25); max-width: var(--size284); padding: var(--size14) var(--size22); background: var(--ivory); color: var(--forest); border-radius: var(--size30); font-size: var(--size14); font-weight: 800; text-decoration: none; }
.heroSignature { display: flex; align-items: center; gap: var(--size14); margin-top: var(--size54); }
.heroSignature p { color: var(--heroCaption); font-size: var(--size12); line-height: 1.8; margin: 0; }
.heroArtwork { min-width: 0; position: relative; }
.editorialHero .carouselRail { box-shadow: var(--size10) var(--size12) 0 var(--heroShadow); border-color: var(--heroImageLine); }
.editorialHero .carouselThumbs button[aria-current=true] { border-color: var(--accent); }
.publicCarousel { width: 100%; max-width: var(--size500); margin: auto; min-width: 0; }
.carouselStage { position: relative; }
.carouselRail { display: flex; position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: var(--size1) solid var(--line); border-radius: var(--size14); }
.carouselRail::-webkit-scrollbar { display: none; }
.carouselRail figure { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
.carouselRail a { display: block; }
.carouselRail img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: contain; background: var(--ivory); }
.carouselFooter { display: flex; align-items: center; justify-content: center; gap: var(--size12); margin-top: var(--size12); }
.carouselFooter .imageArrow { position: static; flex: none; transform: none; width: var(--size40); height: var(--size44); }
.carouselFooter [data-carousel-status] { flex: none; font-size: var(--size12); font-variant-numeric: tabular-nums; opacity: .75; }
.carouselThumbs { position: relative; display: flex; gap: var(--size6); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: var(--size3); }
.carouselThumbs::-webkit-scrollbar { display: none; }
.carouselThumbs button { flex: none; width: var(--size40); height: var(--size54); padding: var(--size2); border: var(--stroke) solid transparent; border-radius: var(--size6); background: transparent; opacity: .55; transition: opacity var(--motionFast); }
.carouselThumbs button:hover, .carouselThumbs button[aria-current=true] { opacity: 1; }
.carouselThumbs button[aria-current=true] { border-color: var(--action); }
.carouselThumbs img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--size3); }
.library { margin-top: var(--size54); }
.libraryHeading, .sectionTitle { display: flex; align-items: end; justify-content: space-between; gap: var(--size20); }
.libraryHeading :is(h1, h2) { margin: 0; font-size: var(--size28); }
.nicheLibrary { margin-top: var(--size24); }
.searchForm { margin: var(--size22) 0 var(--size18); }
.searchForm > label { display: block; font-size: var(--size14); font-weight: 700; margin-bottom: var(--size10); }
.findRow { display: flex; gap: var(--size8); }
.findRow input { width: 100%; min-width: 0; min-height: var(--size54); padding: var(--size12) var(--size18); background: var(--card); color: var(--ink); border: var(--size1) solid var(--line); border-radius: var(--size13); font-size: var(--size15); }
.findRow input::placeholder { color: var(--muted); opacity: 1; }
.findRow button, .buy { display: flex; justify-content: center; align-items: center; min-height: var(--size48); padding: var(--size10) var(--size21); flex-shrink: 0; border: 0; border-radius: var(--size12); background: var(--action); color: var(--actionInk); font-size: var(--size14); font-weight: 700; text-decoration: none; }
.status { color: var(--muted); font-size: var(--size13); margin: var(--size10) 0 0; }
.storyCards, .postList, .gearList, .quickProducts, .cards, .chips, .termList { list-style: none; margin: 0; padding: 0; }
.storyCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size22); }
.storyCards > li { min-width: 0; }
.storyCard { display: block; height: 100%; color: var(--ink); text-decoration: none; border: var(--size1) solid var(--line); background: var(--card); border-radius: var(--size18); overflow: hidden; transition: transform var(--motionFast), border-color var(--motionFast); }
.storyCard:hover { transform: translateY(var(--sizeMinus4)); border-color: var(--muted); }
.storyCover { position: relative; padding: var(--size16) var(--size48); background: var(--soft); }
.storyCover img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: contain; border-radius: var(--size8); }
.storyCover > span { position: absolute; right: var(--size12); bottom: var(--size12); padding: var(--size4) var(--size10); border-radius: var(--size20); background: var(--forest); color: var(--ivory); font-size: var(--size10); }
.storyPlaceholder { display: grid; place-items: center; aspect-ratio: 1.34; padding: var(--size35); }
.storyPlaceholder img { width: var(--size72); height: var(--size72); background: var(--ivory); padding: var(--size8); }
.storyCardBody { padding: var(--size22); }
.storyCardBody h3 { margin: 0 0 var(--size10); }
.storyCardBody > p:not(.eyebrow) { color: var(--muted); font-size: var(--size13); margin-bottom: 0; }
.linkPage main, .linkPage .foot { max-width: var(--size604); }
.linkProfile { display: flex; align-items: center; justify-content: center; gap: var(--size12); padding: var(--size18) 0 var(--size8); text-align: left; }
.linkProfile > img { display: block; width: var(--size48); height: var(--size48); padding: var(--size10); margin: 0; background: var(--forest); border-radius: 50%; }
.linkProfile h1 { font-size: var(--size22); margin: 0; }
.linkProfile p { font-size: var(--size13); color: var(--muted); margin: 0; }
.treeActions { justify-content: center; margin: 0 0 var(--size8); }
.linkSearch { margin: var(--size12) 0 var(--size24); }
.linkSearch .status:empty { display: none; }
.linkSearch input { min-height: var(--size46); background: var(--soft); border-color: transparent; border-radius: var(--size12); font-size: var(--size13); }
.linkSearch button { min-height: var(--size46); padding: var(--size8) var(--size16); font-size: var(--size13); }
.linkNumber { color: var(--ink); font-weight: 800; }
.quickProducts > li + li { margin-top: var(--size24); }
.quickProduct { display: flex; align-items: center; justify-content: space-between; gap: var(--size18); min-height: var(--size82); padding: var(--size17) var(--size20); border: var(--size1) solid var(--line); border-radius: var(--size16); background: var(--card); text-decoration: none; box-shadow: 0 var(--size3) var(--size10) var(--productShadow); transition: border-color var(--motionFast), transform var(--motionFast); }
.quickProduct:hover { border-color: var(--forest); transform: translateY(var(--sizeMinus2)); }
.productRow { display:flex; align-items:stretch; gap:var(--size8); }.productRow .quickProduct { flex:1; min-width:0; cursor:pointer; }
.relatedTrigger { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--size6); flex:none; width:var(--size76); padding:var(--size8) var(--size4); color:var(--muted); background:var(--card); border:var(--stroke) solid var(--line); border-radius:var(--size12); font-size:var(--size11); cursor:pointer; }
.relatedCovers { display:flex; justify-content:center; height:var(--size48); padding-right:var(--size6); }.relatedCovers img { width:var(--size36); height:var(--size46); object-fit:cover; border:var(--stroke) solid var(--line); border-radius:var(--size4); }.relatedCovers img + img { margin-left:var(--sizeMinus12); transform:rotate(8deg); }.relatedTrigger:hover { border-color:var(--forest); }
.treeOwnerTools { display:flex; justify-content:flex-end; align-items:center; gap:var(--size8); max-width:var(--size640); margin:0 auto var(--size16); }.treeOwnerTools button,.productEditTools button,.productEditor button { padding:var(--size6) var(--size12); color:var(--ink); background:var(--card); border:var(--stroke) solid var(--line); border-radius:var(--size6); font-size:var(--size12); cursor:pointer; }.productEditTools { display:flex; justify-content:flex-end; gap:var(--size8); margin-top:var(--size6); }.productEditTools[hidden] { display:none; }
.productEditor { width:min(var(--size480),calc(100vw - var(--size24))); max-height:calc(100dvh - var(--size24)); padding:var(--size20); border:var(--stroke) solid var(--line); border-radius:var(--size12); background:var(--bg); color:var(--ink); }.productEditor::backdrop { background:var(--heroShadow); }.productEditor header,.productEditor footer { display:flex; align-items:center; justify-content:space-between; gap:var(--size12); }.productEditor h2 { font-size:var(--size18); margin:0; }.productEditor form { display:grid; gap:var(--size12); }.productEditor label { display:grid; gap:var(--size6); font-size:var(--size13); }.productEditor input,.productEditor textarea { width:100%; padding:var(--size10); border:var(--stroke) solid var(--line); border-radius:var(--size6); background:var(--card); color:var(--ink); font:inherit; }.productTagPreview { display:flex; align-items:center; gap:var(--size12); }.productTagPreview[hidden] { display:none; }.productEditor footer { justify-content:flex-end; }
@media(max-width:600px) { .productRow .quickProduct { padding:var(--size12); gap:var(--size10); }.relatedTrigger { width:var(--size60); }.relatedCovers img { width:var(--size30); height:var(--size40); }.productRow .productDestination span { display:none; } }
.relatedTrigger:hover { color: var(--ink); }
.relatedDialog { width: min(var(--size1100), calc(100vw - var(--size32))); height: min(var(--size900), calc(100dvh - var(--size32))); max-height: none; padding: 0; border: var(--stroke) solid var(--line); border-radius: var(--size16); color: var(--ink); background: var(--bg); }
.relatedDialog::backdrop { background: var(--heroShadow); backdrop-filter: blur(var(--size4)); }
.relatedDialog[open] { display: flex; flex-direction: column; }
.relatedHeader { display: flex; justify-content: space-between; align-items: center; padding: var(--size16) var(--size20); gap: var(--size16); border-bottom: var(--stroke) solid var(--line); }
.relatedHeader h2 { font-size: var(--size16); margin: 0; }
.relatedHeader button { border: 0; background: transparent; color: var(--ink); font-size: var(--size28); width: var(--size40); height: var(--size40); cursor: pointer; }
.relatedLayout { display: grid; grid-template-columns: var(--size240) minmax(0,1fr); flex: 1; min-height: 0; }
.relatedList { overflow: auto; padding: var(--size12); border-right: var(--stroke) solid var(--line); }
.relatedList button { width: 100%; display: flex; gap: var(--size10); align-items: center; padding: var(--size10); border: var(--stroke) solid transparent; border-radius: var(--size8); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-size: var(--size13); }
.relatedList button[aria-current=true] { border-color: var(--line); background: var(--soft); }
.relatedList img { width: var(--size40); height: var(--size50); object-fit: cover; flex: none; border-radius: var(--size4); }
.relatedReading { min-width: 0; overflow: auto; padding: var(--size20); }
.relatedReading h3 { font-size: var(--size17); margin: 0 0 var(--size16); }
.relatedReading .publicCarousel { width: min(100%, calc((100dvh - var(--size240)) * .8)); margin: auto; }
.relatedCaption { margin-top: var(--size24); }
.relatedFull { display: inline-block; margin: var(--size12) 0; font-size: var(--size13); }
@media (max-width: 700px) { .relatedDialog { width: 100%; height: 100dvh; max-width: none; margin: 0; border-radius: 0; }.relatedLayout { display: flex; flex-direction: column; }.relatedList { max-height: var(--size140); flex: none; border-right: 0; border-bottom: var(--stroke) solid var(--line); padding: var(--size6); }.relatedList button { padding: var(--size6) var(--size10); }.relatedList img { width: var(--size24); height: var(--size30); }.relatedReading { padding: var(--size14); }.relatedReading .publicCarousel { width: 100%; } }
.productThumbnail { width: var(--size76); height: var(--size76); object-fit: contain; background: var(--imageMat); border-radius: var(--size10); flex: none; }
.productName { min-width: 0; flex: 1; }
.quickProduct strong { display: block; font-size: var(--size16); line-height: 1.5; }
.quickProduct .gearKind { display: block; font-size: var(--size11); }
.productDestination { display: inline-flex; align-items: center; gap: var(--size5); color: var(--muted); font-size: var(--size12); line-height: 1; white-space: nowrap; flex: none; }
.productDestination .externalIcon { width: var(--size18); height: var(--size18); }
.buy { gap: var(--size8); line-height: 1.4; }
@media (max-width: 480px) { .quickProduct { gap: var(--size12); padding: var(--size14); } .quickProduct strong { font-size: var(--size14); } .productThumbnail { width: var(--size64); height: var(--size64); } }
.linkPage main { padding-bottom: var(--size35); }
.linkPage .foot { padding-top: var(--size20); }
.hint { font-size: var(--size12); color: var(--muted); margin: var(--size5) 0 0; }
.hero { padding: var(--size28) 0 var(--size30); }
.hero h1 { max-width: var(--size890); }
.lede { color: var(--muted); font-size: var(--size17); max-width: var(--size800); }
.crumbs { color: var(--muted); font-size: var(--size12); padding-top: var(--size18); }
.productPage { max-width: var(--size1000); margin: auto; }
.productPage .hero h1 { margin-bottom: 0; }
.productPage .gearList { grid-template-columns: 1fr; }
.gearDetail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: var(--size20); padding: var(--size24); }
.gear.gearDetail > .productPhoto { width: min(100%, var(--size350)); margin: auto; border-radius: var(--size12); }
.gear.gearDetail > img { max-height: var(--size350); }
.gearDetail .gearBody { padding: var(--size16); }
.gearDetail h2 { margin: 0 0 var(--size16); font-size: var(--size20); }
.productDescription { color: var(--muted); font-size: var(--size15); line-height: 1.85; margin-bottom: var(--size20); }
.productOffer { font-size: var(--size13); line-height: 1.75; }
.productOffer > span { display: block; color: var(--muted); font-size: var(--size11); margin-bottom: var(--size4); }
.productStories { margin-top: var(--size40); }
.productStories h2 span { color: var(--muted); font-size: var(--size14); margin-left: var(--size6); }
.post { max-width: var(--size820); margin: auto; }
.postHeading, .postArtwork .publicCarousel { max-width: var(--size720); margin-left: auto; margin-right: auto; }
@media (min-width: 701px) { .postHeading, .postArtwork .publicCarousel { max-width: min(var(--size720), max(var(--size400), calc((100dvh - var(--size200)) * .8))); } }
.storyText { max-width: var(--size720); margin: var(--size28) auto 0; }
/* 캐러셀·관련상품과 글 사이의 경계. '읽을거리' 뒤로 가는 선을 긋는다. 본문 구역 제목에는 1, 2 번호를 단다(render._paragraphs). */
.storyLead { display: flex; align-items: center; gap: var(--size12); max-width: var(--size720); margin: var(--size48) auto 0; color: var(--captionAccent); font-size: var(--size13); font-weight: 800; letter-spacing: .04em; }
.storyLead::after { content: ""; flex: 1; height: var(--size1); background: var(--line); }
.storyText .sectionNo { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-right: var(--size10); padding: 0 var(--size4); border-radius: 999px; background: var(--captionAccent); color: var(--bg); font-size: .78em; font-weight: 800; line-height: 1; vertical-align: .12em; }
.postHeading { padding: var(--size14) 0 var(--size18); }
.postHeading h1 { font-size: clamp(var(--size22), 3vw, var(--size32)); margin-bottom: var(--size8); }
.postHeading .lede { font-size: var(--size14); margin: 0; }
/* 공유. 글 머리의 단추와 돈값트리 단추 줄에 있다. 폰은 기기 공유 창을 열고 못 열면 주소를 복사해 아래에 잠깐 알린다(hub.js). */
.shareButton { display: inline-flex; align-items: center; gap: var(--size6); min-height: var(--size36); margin-top: var(--size12); padding: var(--size6) var(--size14); border: 0; border-radius: var(--size20); background: var(--soft); color: var(--ink); font: inherit; font-size: var(--size14); font-weight: 700; cursor: pointer; }
.shareButton svg { width: var(--size18); height: var(--size18); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shareToast { position: fixed; left: 50%; bottom: calc(var(--size24) + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%); padding: var(--size10) var(--size16); border-radius: var(--size20); background: var(--ink); color: var(--bg); font-size: var(--size14); font-weight: 700; white-space: nowrap; }
.shareToast[hidden] { display: none; }
.storyText h2 { margin: var(--size40) 0 var(--size16); font-size: var(--size22); line-height: 1.5; color: var(--captionAccent); }
/* 블로그형 본문은 구역 제목 위에 가는 선과 여백을 두어 구역을 나눈다(2026-10-13 운영자 지시). 첫 구역은 선 없이 시작한다. */
.storyText h2:not(:first-child) { margin-top: var(--size44); padding-top: var(--size32); border-top: var(--stroke) solid var(--line); }
.storyText .articleImage { display: block; }
.storyText .articleImage img { display: block; width: 100%; height: auto; border-radius: var(--size12); }
.storyText blockquote { margin: var(--size24) 0; padding: var(--size16) var(--size20); border-left: var(--size3) solid var(--captionAccent); background: var(--soft); border-radius: 0 var(--size12) var(--size12) 0; }
.storyText blockquote p:last-child { margin-bottom: 0; }
:is(.storyText, .relatedCaption) p { line-height: var(--captionLeading); font-size: var(--size15); margin: 0 0 var(--size22); }
:is(.storyText, .relatedCaption) > p:first-child { color: var(--captionAccent); font-size: var(--size17); font-weight: 600; line-height: 1.85; margin-bottom: var(--size28); }
:is(.storyText, .relatedCaption) h3 { color: var(--captionAccent); font-size: var(--size18); font-weight: 800; margin: var(--size32) 0 var(--size12); }
:is(.storyText, .relatedCaption) strong { color: var(--captionAccent); font-weight: 800; }
:is(.storyText, .relatedCaption) ul { padding-left: var(--size24); margin: 0 0 var(--size22); line-height: var(--captionLeading); font-size: var(--size15); }
:is(.storyText, .relatedCaption) li { padding-left: var(--size4); margin: var(--size4) 0; }
:is(.storyText, .relatedCaption) li::marker { color: var(--captionAccent); }
.storyText > p, .storyText > ul, .storyText > ol { font-size: var(--size16); }
:is(.storyText, .relatedCaption) > :last-child { margin-bottom: 0; }
.relatedProducts { max-width: var(--size720); margin: var(--size18) auto 0; }
/* 관련상품은 캐러셀 바로 아래, 본문 앞이다(2026-10-13). */
.relatedProducts > h2 { margin: 0 0 var(--size6); font-size: var(--size12); color: var(--muted); }
.gearList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--size18); }
.gear { overflow: hidden; background: var(--card); border: var(--size1) solid var(--line); border-radius: var(--size18); }
.gear > img { display: block; width: 100%; max-height: var(--size280); object-fit: contain; }
.gear > .productPhoto { width: min(100%, var(--size280)); margin: var(--size16) auto 0; }
.gearBody { padding: var(--size26); }
.gearKind { font-size: var(--size12); color: var(--muted); margin: 0 0 var(--size5); }
.gear h3 a { text-decoration: none; }
.gear .buy { margin-top: var(--size20); }
.compactProducts { display: flex; gap: var(--size10); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--size6); }
.compactProducts .gear { flex: 0 0 clamp(var(--size200), calc((100% - var(--size20)) / 3), var(--size240)); min-width: 0; display: grid; grid-template-columns: var(--size48) minmax(0,1fr); align-items: center; gap: var(--size10); padding: var(--size8); border: var(--stroke) solid var(--line); border-radius: var(--size8); background: var(--card); scroll-snap-align: start; }
.compactProducts .gear > .productPhoto, .compactProducts .gear > img { width: var(--size48); height: var(--size48); max-height: var(--size48); margin: 0; border-radius: var(--size6); }
.compactProducts .gearBody { display: flex; flex-direction: column; align-items: flex-start; gap: var(--size4); padding: 0; }
.compactProducts h3 { margin: 0; font-size: var(--size13); line-height: 1.5; }
.compactProducts .gear .buy { min-height: var(--size32); margin: 0; padding: var(--size4) var(--size12); font-size: var(--size12); font-weight: 700; border-radius: 999px; }
.buy[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
a.productPhoto { display: block; }
.storyText .captionTag { color: var(--captionAccent); text-decoration: none; }
.storyText a { overflow-wrap: anywhere; }
.postNotes { max-width: var(--size720); margin: var(--size24) auto 0; }
.postNotes > h2 { margin: 0 0 var(--size8); font-size: var(--size14); color: var(--muted); }
.postNotes .notice h3 { margin: var(--size12) 0 var(--size4); font-size: var(--size14); }
.postNotes .notice p, .postNotes li { font-size: var(--size13); line-height: 1.7; }
.postNotes .source { color: var(--muted); }
.postNotes .references { margin: 0; padding-left: var(--size20); }
.postNotes a { overflow-wrap: anywhere; }
.compactProducts .externalIcon { width: var(--size14); height: var(--size14); }
.compactProducts .badge { grid-column: 1; margin: var(--size4) 0 0; font-size: var(--size11); }
.badge, .topic { display: inline-block; border-radius: var(--size20); background: var(--soft); color: var(--ink); padding: var(--size4) var(--size11); font-size: var(--size12); font-weight: 700; margin: 0 0 var(--size10); }
.term { border: var(--size1) solid var(--line); padding: var(--size14) var(--size18); background: var(--card); border-radius: var(--size12); margin: var(--size8) 0; }
summary { cursor: pointer; font-weight: 700; }
.term p { margin: var(--size10) 0 0; font-size: var(--size14); }
.tableWrap { overflow-x: auto; }
.compare { width: 100%; min-width: var(--size440); border-spacing: var(--size5); font-size: var(--size13); }
.compare th, .compare td { padding: var(--size10); border-radius: var(--size7); background: var(--card); text-align: left; }
.compare th[scope=col] { background: var(--action); color: var(--actionInk); }
.notice { margin-top: var(--size16); font-size: var(--size14); }
.source { color: var(--muted); font-size: var(--size12); }
.postList a, .card { display: flex; align-items: center; gap: var(--size14); padding: var(--size18); border: var(--size1) solid var(--line); border-radius: var(--size12); background: var(--card); text-decoration: none; }
.postList li + li { margin-top: var(--size10); }
.postThumb { width: var(--size64); height: var(--size80); object-fit: contain; border-radius: var(--size6); flex: none; }
.postTitle { font-size: var(--size15); font-weight: 700; flex: 1; }
.discoverMore { margin: var(--size30) 0; padding: var(--size26); background: var(--soft); border-radius: var(--size18); }
.discoverMore h2 { margin-top: 0; }
.discoverMore p, .discoverMore label { font-size: var(--size13); }
.discoverMore > a { display: inline-block; margin: var(--size20) var(--size20) 0 0; font-size: var(--size13); }
.postPager { max-width: var(--size720); margin: var(--size40) auto 0; }
.postPagerCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size20); }
.postPagerCard { display: flex; flex-direction: column; gap: var(--size10); color: inherit; text-decoration: none; min-width: 0; }
.postPagerCard[rel="next"] { grid-column: 2; }
.postPagerDirection { color: var(--muted); font-size: var(--size13); }
.postPagerCard[rel="next"] .postPagerDirection { text-align: right; }
.postPagerArtwork { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--size12); background: var(--soft); }
.postPagerArtwork img { width: 100%; height: 100%; object-fit: contain; }
.postPagerTitle { font-size: var(--size16); font-weight: 700; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.postPagerCard:hover .postPagerTitle { text-decoration: underline; text-underline-offset: .2em; }
.postPagerList { display: table; margin: var(--size24) auto 0; padding: var(--size10) var(--size20); border: var(--size1) solid var(--line); border-radius: var(--size20); color: inherit; font-size: var(--size13); text-decoration: none; }
.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--size16); }
.card { flex-direction: column; align-items: start; }
.card span, .termList p { color: var(--muted); font-size: var(--size14); }
.chips { display: flex; flex-wrap: wrap; gap: var(--size10); }
.chips a { display: block; padding: var(--size6) var(--size16); background: var(--soft); border-radius: var(--size20); text-decoration: none; }
.termList li { border-bottom: var(--size1) solid var(--line); padding: var(--size16) 0; }
.prose { max-width: var(--size760); }
/* 아래쪽: 단추 줄(설치·새 글 알림)과 글자 링크 줄. 단추가 모두 숨으면 단추 줄도 자리를 차지하지 않는다. */
.foot { display: grid; justify-items: center; gap: var(--size16); padding: var(--size28) var(--size28) var(--size36); border-top: var(--size1) solid var(--line); color: var(--muted); font-size: var(--size12); text-align: center; }
.footActions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--size8); }
.footActions:not(:has(> :not([hidden]))) { display: none; }
.footActions .notificationStatus { flex-basis: 100%; margin: 0; }
.footLinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.footLinks a { padding: var(--size4) var(--size10); color: var(--muted); text-decoration: none; }
.footLinks a + a { border-left: var(--size1) solid var(--line); }
.footLinks a:hover { color: var(--ink); }
.installButton { display: inline-flex; align-items: center; justify-content: center; gap: var(--size6); min-height: var(--size36); padding: var(--size6) var(--size14); border: 0; border-radius: var(--size20); background: var(--soft); color: var(--ink); font: inherit; font-size: var(--size13); font-weight: 700; cursor: pointer; }
.installButton[hidden] { display: none; }
.installButton svg { width: var(--size18); height: var(--size18); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.installHelp { max-width: min(var(--size390), 90vw); padding: var(--size28); border: var(--stroke) solid var(--line); border-radius: var(--size18); background: var(--card); color: var(--ink); }
.installHelp::backdrop { background: var(--heroShadow); }
.installHelp h2 { margin-top: 0; }
.installHelp .buy { width: 100%; cursor: pointer; }
.offlinePage { padding: var(--size54) 0; text-align: center; }
.offlinePage .brandMark { width: var(--size72); height: var(--size72); }
.offlinePage h1 { margin-top: var(--size24); font-size: var(--size28); }
.offlinePage .buy { display: inline-flex; margin-top: var(--size18); }
@media (max-width: 950px) {
  .editorialHero { padding: var(--size32); gap: var(--size32); }
  .heroCopy h1 { font-size: var(--size35); }
  .heroSignature { margin-top: var(--size30); }
  .storyCover { padding: var(--size14) var(--size24); }
}
@media (max-width: 700px) {
  :root { --headerHeight: 52px; }
  .top { gap: var(--size14); padding: var(--size6) var(--size18); }
  .brand { font-size: var(--size22); gap: var(--size5); }
  .brand img { width: var(--size28); height: var(--size28); }
  main { padding: 0 var(--size18) var(--size40); }
  .homeIntro { padding: var(--size3) 0 var(--size14); }
  .homeIntro .eyebrow { font-size: var(--size10); }
  .homeIntro > a { display: none; }
  .editorialHero { grid-template-columns: 1fr; padding: var(--size26) var(--size22) var(--size20); gap: var(--size24); border-radius: var(--size22); }
  .heroCopy { max-width: none; }
  .heroTag { margin-bottom: var(--size15); font-size: var(--size11); }
  .heroCopy h1 { font-size: var(--size31); margin-bottom: var(--size14); }
  .heroSummary { font-size: var(--size13); line-height: 1.8; margin-bottom: var(--size18); }
  .heroRead { max-width: none; padding: var(--size12) var(--size18); font-size: var(--size13); }
  .heroSignature { display: none; }
  .heroArtwork { width: 100%; max-width: var(--size390); margin: auto; }
  .editorialHero .carouselRail { box-shadow: var(--size5) var(--size7) 0 var(--heroShadow); }
  .library { margin-top: var(--size35); }
  .libraryHeading :is(h1, h2) { font-size: var(--size22); }
  .nicheLibrary { margin-top: var(--size16); }
  .searchForm { margin-top: var(--size18); }
  .findRow input { padding: var(--size12); font-size: var(--size13); }
  .findRow button { padding: var(--size10) var(--size17); font-size: var(--size13); }
  .storyCards { grid-template-columns: 1fr; gap: var(--size16); }
  .storyCard { display: grid; grid-template-columns: var(--size114) minmax(0, 1fr); }
  .storyCover { padding: 0; }
  .storyCover img { border-radius: 0; }
  .storyCover > span { display: none; }
  .storyPlaceholder { aspect-ratio: auto; }
  .storyCardBody { min-width: 0; padding: var(--size12); align-self: center; }
  .storyCardBody h3 { font-size: var(--size17); margin-bottom: var(--size6); }
  .storyCardBody > p:not(.eyebrow) { font-size: var(--size11); line-height: 1.6; margin-bottom: 0; }
  .storyCardBody h3, .storyCardBody > p:not(.eyebrow) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .storyCardBody .eyebrow { font-size: var(--size10); line-height: 1.6; margin-bottom: var(--size6); }
  .linkProfile { padding-top: var(--size10); }
  .quickProduct { padding: var(--size15) var(--size16); gap: var(--size12); }
  .hero { padding: var(--size22) 0; }
  .hero h1 { font-size: var(--size29); }
  .lede { font-size: var(--size14); }
  .gearDetail { grid-template-columns: 1fr; gap: var(--size20); padding: var(--size20); }
  .gear.gearDetail > .productPhoto { width: min(100%, var(--size240)); }
  .gearDetail .gearBody { padding: 0; }
  .postArtwork { position: static; }
  .storyText p { font-size: var(--size15); }
  .gearList { grid-template-columns: 1fr; }
  .gearBody { padding: var(--size22); }
  .sectionTitle { display: block; }
  .sectionTitle h2 { margin-bottom: var(--size8); }
  h2 { font-size: var(--size22); }
  .disclosure { font-size: var(--size11); padding: var(--size7) var(--size14); }
  .foot { padding: var(--size24) var(--size18); font-size: var(--size11); }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .storyCard:hover { transform: none; }
}
.notificationButton[aria-pressed="true"] { background: var(--seaSoft); border-color: var(--sea); }
.carouselRail figure a { position:relative; }
.photoBrand { position:absolute; top:var(--size12); left:var(--size12); display:inline-flex; align-items:center; gap:var(--size6); padding:var(--size6) var(--size10); border-radius:var(--size6); color:var(--ink); background:var(--card); font-size:var(--size13); font-weight:700; }
.photoBrand .brandMark { width:var(--size20); height:var(--size20); }
.notificationStatus { flex-basis: 100%; color: var(--muted); font-size: var(--size12); }
.brandHero { position:relative; overflow:hidden; border-radius:var(--size16); background:var(--ivory); margin-bottom:var(--size32); }
.brandHero video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; }
.filmControls,.filmChoices { position:absolute; right:var(--size16); bottom:var(--size16); display:flex; gap:var(--size6); }
.filmChoices { top:var(--size16); bottom:auto; }
.filmControls button,.filmChoices button { display:grid; place-items:center; width:var(--size36); height:var(--size36); padding:var(--size8); background:var(--imageControl); color:var(--imageControlInk); border:var(--stroke) solid var(--line); border-radius:var(--size8); }
.filmChoices [aria-pressed="true"] { background:var(--ivory); color:var(--forest); font-weight:800; }
.filmControls svg { width:var(--size20); height:var(--size20); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.filmControls [hidden] { display:none; }
.featuredBelowFilm .heroCopy h2 { font-size:clamp(var(--size24),3vw,var(--size40)); line-height:1.2; letter-spacing:-.035em; }
@media(max-width:700px) { .brandHero video { aspect-ratio:4/5; }.brandHero { margin-bottom:var(--size24); }.filmControls { right:var(--size10); bottom:var(--size10); }.filmChoices { top:var(--size10); right:var(--size10); } }
.postChoices { display:grid; gap:var(--size8); max-height:50dvh; overflow-y:auto; }
.postChoices .postChoice { display:grid; grid-template-columns:var(--size18) var(--size40) minmax(0,1fr); align-items:center; gap:var(--size10); padding:var(--size8); border:var(--stroke) solid var(--line); border-radius:var(--size6); cursor:pointer; }
.postChoice:has(:checked) { background:var(--soft); border-color:var(--action); }
.postChoice input { width:var(--size16); height:var(--size16); accent-color:var(--action); padding:0; }
.postChoice img { width:var(--size40); aspect-ratio:4/5; object-fit:cover; border-radius:var(--size4); }
.postChoice small { display:block; color:var(--muted); font-size:var(--size11); }
@media(max-width:700px) {
  .linkPage .disclosure { font-size:var(--size11); line-height:1.4; padding:var(--size4) var(--size12); }
  .linkPage .treeOwnerTools { margin-bottom:var(--size8); }
}

.treeOwnerTools { flex-wrap:wrap; }
.treeAutomation,.treeIssue { font-size:var(--size12); color:var(--muted); }
.treeIssue { color:var(--ink); padding:var(--size12); border:var(--stroke) solid var(--line); border-radius:var(--size8); }
.productStatus { display:flex; flex:none; flex-direction:column; align-items:flex-end; justify-content:center; gap:var(--size6); width:var(--size140); font-size:var(--size12); padding:var(--size10); }
.productStatus strong { text-align:right; }.productStatus small,.productAvailability small { color:var(--muted); font-size:var(--size11); }
.productStatus [data-publication="published"] { color:var(--action); }
.productStatus button,.productAvailability button { padding:var(--size6) var(--size10); color:var(--ink); background:var(--card); border:var(--stroke) solid var(--line); border-radius:var(--size6); font:inherit; cursor:pointer; }
.productMeta { display:flex; flex-wrap:wrap; gap:var(--size8); align-items:center; margin:var(--size12) var(--size4) var(--treeTagGap); font-size:var(--size12); }
.productDetails { color:var(--muted); padding:var(--size4) 0; margin-right:var(--size4); }.searchTag { color:var(--ink); text-decoration:none; background:var(--soft); border-radius:var(--size6); padding:var(--size4) var(--size8); }
.searchTag:hover { background:var(--line); }.productDetails:hover { color:var(--ink); }
.gearDetail .productMeta { margin:var(--size20) 0; }
.productAvailability { display:flex; flex-wrap:wrap; align-items:center; gap:var(--size8); margin:var(--size8) var(--size4); font-size:var(--size11); color:var(--muted); }
.ownerProducts > li { padding-bottom:var(--size12); border-bottom:var(--stroke) solid var(--line); }
.fieldHint { font-size:var(--size12); color:var(--muted); margin:0; }
.productEditor [role="status"]:empty { display:none; }
.productEditor .tagUrlConfirm { display:flex; align-items:center; gap:var(--size8); }
.productEditor .tagUrlConfirm[hidden],.productEditor [data-tag-change][hidden],.productEditor [data-tag-address-note][hidden] { display:none; }
.productEditor .tagUrlConfirm input { width:var(--size17); height:var(--size17); padding:0; margin:0; accent-color:var(--action); }
@media(max-width:600px) { .ownerProducts .productStatus { width:var(--size96); padding:var(--size4); }.ownerProducts .productThumbnail { width:var(--size48); height:var(--size48); }.ownerProducts .productName strong { font-size:var(--size13); }.ownerProducts .productDestination { display:none; } }

.linkPage:has(.ownerProducts) main { max-width:var(--size900); }
.treeConnection,.productProgress { color:var(--muted); font-size:var(--size12); line-height:1.6; }
.treeConnection button { margin-left:var(--size8); }
.stateSkeleton { border-radius:var(--size8); background:var(--soft); animation:treeStatePulse 1.2s ease-in-out infinite alternate; }
.ownerProducts .productThumbnail { background:var(--soft); }
.ownerProducts .productThumbnail img { background:var(--imageMat); }
.treeIssue[hidden],.productProgress[hidden],.treeConnection[hidden] { display:none; }
@keyframes treeStatePulse { to { opacity:.4; } }
@media(prefers-reduced-motion:reduce) { .stateSkeleton { animation:none; } }

/* 물때 페이지. 표면은 딥그린 히어로와 바탕 둘뿐이고 위계는 글자 크기와 여백이 만든다(초기 기획 2026-10-12). */
.tidePage { max-width: var(--size640); margin: 0 auto; }
.tideBanner { margin: 0 0 var(--size10); padding: var(--size9) var(--size14); border-radius: var(--size12); background: var(--soft); font-size: var(--size13); font-weight: 600; }
.tideHero { background: var(--forest); color: var(--ivory); border-radius: var(--size22); padding: var(--size14) var(--size18); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta meta" "now shore" "prog prog" "sea sea"; gap: 0 var(--size12); align-items: center; }
.tideMeta { grid-area: meta; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--size2) var(--size10); font-size: var(--size12); color: var(--heroMuted); line-height: 1.4; }
.tideMeta span { white-space: nowrap; }
.tideMeta b { color: var(--ivory); }
/* 지금 카드 첫 줄: 왼쪽 들물·썰물, 오른쪽 다음 만조·간조까지 남은 시간. 아래 작은 줄은 카드 폭을 다 쓴다(2026-10-14 운영자 지시). */
.tideNow { grid-area: now; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "word until" "next next"; align-items: baseline; column-gap: var(--size12); margin-top: var(--size10); min-width: 0; }
.tideHero .tideWord { grid-area: word; font-size: var(--size24); font-weight: 900; line-height: 1.2; letter-spacing: -.01em; justify-self: start; color: inherit; }
.tideUntil { display: contents; }
.tideUntil > span { grid-area: until; justify-self: end; text-align: right; font-size: var(--size18); font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tideUntil small { grid-area: next; display: block; font-size: var(--size12); font-weight: 500; color: var(--heroMuted); margin-top: var(--size6); font-variant-numeric: tabular-nums; }
.tideShore { grid-area: shore; width: var(--size114); height: auto; display: block; margin-top: var(--size8); }
.tideProg { grid-area: prog; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--size10); margin-top: var(--size10); font-size: var(--size12); color: var(--heroMuted); font-variant-numeric: tabular-nums; }
.tideTrack { height: var(--size4); border-radius: var(--size4); background: var(--heroLine); overflow: hidden; }
.tideTrack i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: var(--size4); transition: width var(--motionFast); }
.tideTerm { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: .22em; text-decoration-thickness: var(--size2); line-height: inherit; }
.tideSec { padding: var(--size14) var(--size4) 0; }
.tideHead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--size10); }
.tideHead h2 { font-size: var(--size16); margin: 0; }
.tideHead span { font-size: var(--size12); color: var(--muted); }
.tideDays { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--size2); margin-top: var(--size6); }
.tideDay { font: inherit; color: inherit; background: none; border: 0; padding: var(--size6) 0 var(--size5); cursor: pointer; text-align: center; line-height: 1.2; border-radius: var(--size10); display: grid; gap: var(--size1); }
.tideDay .w { font-size: var(--size11); color: var(--muted); font-weight: 700; }
.tideDay.sun .w { color: var(--stop); }
.tideDay .n { font-size: var(--size14); font-weight: 800; font-variant-numeric: tabular-nums; }
.tideDay .m { font-size: var(--size11); color: var(--muted); font-weight: 600; margin-top: var(--size2); }
.tideDay .t { font-size: var(--size11); font-weight: 700; font-variant-numeric: tabular-nums; }
.tideDay .m + .t { margin-top: var(--size3); }
.tideDay .t.night { color: var(--muted); font-weight: 500; }
.tideDay[aria-selected=true] { background: var(--soft); }
.tideSpark { width: 100%; height: var(--size44); display: block; margin-top: var(--size2); }
.tideRanges { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--size2); text-align: center; font-size: var(--size11); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: var(--size2); }
.tideRanges .on { color: var(--ink); font-weight: 800; }
.tideChart { position: relative; margin-top: var(--size6); }
.tideChart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.tideTip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-size: var(--size12); padding: var(--size5) var(--size9); border-radius: var(--size7); white-space: nowrap; transform: translate(-50%, -125%); font-variant-numeric: tabular-nums; opacity: 0; font-weight: 600; }
.tideTip.show { opacity: 1; }
.tideBoard { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size4); }
.tideBoard div { display: grid; text-align: center; line-height: 1.2; padding: var(--size4) 0; }
.tideBoard .k { font-size: var(--size11); font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.tideBoard .hi .k { color: var(--ok); }
.tideBoard .t { font-size: var(--size20); font-weight: 900; font-variant-numeric: tabular-nums; margin-top: var(--size2); letter-spacing: -.01em; }
.tideBoard .c { font-size: var(--size11); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: var(--size1); }
.tideMetaRow { display: flex; flex-wrap: wrap; gap: var(--size4) var(--size12); font-size: var(--size12); color: var(--muted); margin: var(--size6) 0 0; font-variant-numeric: tabular-nums; }
.tideMetaRow b { color: var(--ink); }
.tideTable { width: 100%; border-collapse: collapse; font-size: var(--size13); margin-top: var(--size12); }
.tideTable th, .tideTable td { text-align: left; padding: var(--size6) var(--size8); border-bottom: var(--stroke) solid var(--line); }
.tideTerms { position: relative; }
.tideTermLine { font-size: var(--size13); color: var(--muted); line-height: 1.8; margin: 0; }
.tideTermLine .tideTerm { color: var(--ink); font-weight: 600; }
.tideTermPop { position: absolute; left: var(--size4); right: var(--size4); top: 100%; z-index: 5; background: var(--ink); color: var(--bg); border-radius: var(--size14); padding: var(--size12) var(--size16); box-shadow: 0 var(--size14) var(--size34) var(--heroShadow); font-size: var(--size13); line-height: 1.55; }
.tideTermPop b { display: block; font-size: var(--size14); margin-bottom: var(--size2); }
.tideTermPop a { color: var(--bg); text-decoration: underline; font-size: var(--size12); font-weight: 600; }
.tideTermClose { position: absolute; top: var(--size6); right: var(--size10); font: inherit; border: 0; background: none; color: var(--bg); opacity: .75; cursor: pointer; font-size: var(--size18); }
.tideTermPop:focus { outline: var(--size2) solid var(--accent); outline-offset: var(--size2); }
.tidePosts { display: grid; margin-top: var(--size4); }
.tidePost { display: grid; grid-template-columns: 1fr auto; gap: var(--size12); align-items: center; padding: var(--size12) 0; border-top: var(--stroke) solid var(--line); text-decoration: none; color: inherit; }
.tidePost:first-child { border-top: 0; }
.tidePost b { display: block; font-size: var(--size14); line-height: 1.35; }
.tidePost > span > span { display: block; font-size: var(--size12); color: var(--muted); margin-top: var(--size2); }
.tidePost em { font-style: normal; font-size: var(--size11); font-weight: 800; color: var(--ok); background: var(--soft); padding: var(--size3) var(--size8); border-radius: var(--size20); white-space: nowrap; }
.tidePost[hidden] { display: none; }
.tideSafe { display: grid; grid-template-columns: var(--size22) 1fr; gap: var(--size12); align-items: start; padding: var(--size14) var(--size16); background: var(--soft); border-radius: var(--size16); margin-top: var(--size10); font-size: var(--size13); line-height: 1.6; }
.tideSafe svg { width: var(--size22); height: var(--size22); stroke: var(--stop); fill: none; stroke-width: 1.8; margin-top: var(--size2); }
.tideSafe b { display: block; font-size: var(--size14); margin-bottom: var(--size2); }
.tideSafe p { margin: 0; }
.tideSafe .source { font-size: var(--size12); color: var(--muted); margin-top: var(--size4); }
.tideLink { display: flex; align-items: center; justify-content: space-between; gap: var(--size10); padding: var(--size14) 0 var(--size2); text-decoration: none; color: inherit; font-size: var(--size14); font-weight: 700; }
.tideLink span span { display: block; font-size: var(--size12); color: var(--muted); font-weight: 500; }
.tideLink svg { width: var(--size18); height: var(--size18); flex: none; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.homeTools { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size140), 1fr)); gap: var(--size8); margin-top: var(--size24); }
.homeTools a { display: grid; gap: var(--size2); padding: var(--size12) var(--size14); border-radius: var(--size14); background: var(--soft); text-decoration: none; color: inherit; min-width: 0; }
.homeTools a b { font-size: var(--size14); }
.homeTools a span { font-size: var(--size12); color: var(--muted); line-height: 1.4; }
.postTide { max-width: var(--size720); margin: var(--size20) auto 0; padding: var(--size12) 0 0; border-top: 1px solid var(--line); }
/* 준비물 체크리스트. 물때 페이지의 히어로·섹션·안전 안내 틀을 그대로 쓴다. */
.listIndexHero { display: block; }
.listIndexTitle { font-size: var(--size34); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; margin: var(--size8) 0 0; }
.listIndexLede { font-size: var(--size14); color: var(--heroMuted); margin: var(--size6) 0 0; line-height: 1.5; }
.listHero { grid-template-columns: 1fr; grid-template-areas: "meta" "word" "next" "track"; }
.listHero .tideMeta { grid-area: meta; }
.listWord { grid-area: word; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--size8); font-size: var(--size46); font-weight: 900; line-height: 1; letter-spacing: -.02em; margin: var(--size8) 0 0; font-variant-numeric: tabular-nums; }
.listWord small { font-size: var(--size16); font-weight: 700; color: var(--heroMuted); white-space: nowrap; }
.listNext { grid-area: next; font-size: var(--size16); font-weight: 700; line-height: 1.3; margin-top: var(--size6); }
.listNext small { display: block; font-size: var(--size12); font-weight: 500; color: var(--heroMuted); margin-top: var(--size2); }
.listTrack { grid-area: track; margin-top: var(--size12); }
.listItems { display: grid; margin-top: var(--size4); }
.listItem { display: grid; grid-template-columns: var(--size24) 1fr auto; gap: var(--size12); align-items: center; padding: var(--size9) 0; border-top: var(--stroke) solid var(--line); }
.listItem:first-child { border-top: 0; }
.listItem input { width: var(--size20); height: var(--size20); accent-color: var(--forest); margin: 0; }
.listItem label { font-size: var(--size14); font-weight: 600; line-height: 1.3; cursor: pointer; }
.listItem label small { display: block; font-size: var(--size12); color: var(--muted); font-weight: 500; }
.listItem.done label { color: var(--disabled); text-decoration: line-through; text-decoration-color: var(--disabled); }
.listRequired { font-size: var(--size11); color: var(--stop); font-weight: 800; margin-left: var(--size2); }
.listGear { font-size: var(--size11); font-weight: 800; color: var(--ok); text-decoration: none; white-space: nowrap; }
.listTools { margin: var(--size10) 0 0; font-size: var(--size12); color: var(--muted); }
.listTools .tideTerm { color: var(--muted); }
/* 밤하늘. 고른 날 밤의 달 없는 어둠과 달을 한 줄로 보인다(2026-10-13, 밤 띠 그림을 뺌). */
.skyLine { margin-top: var(--size14); }
.skyLine[hidden] { display: none; }
/* 바다 날씨. 히어로의 세 숫자와 3시간 띠다. */
.weatherStrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size40), 1fr)); gap: var(--size2); margin-top: var(--size6); text-align: center; }
.weatherStrip div { font-size: var(--size11); color: var(--muted); line-height: 1.25; padding: var(--size4) 0; }
.weatherStrip div b { display: block; font-size: var(--size14); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.weatherStrip div i { display: block; font-style: normal; font-size: var(--size11); color: var(--muted); font-variant-numeric: tabular-nums; }
.weatherStrip div.now { background: var(--soft); border-radius: var(--size8); }
.weatherStrip div.nextDay { box-shadow: inset var(--stroke) 0 0 var(--line); color: var(--ink); font-weight: 700; }
/* 물때 페이지의 날짜별 금어기 줄과 바뀌는 날의 점. 접힌 줄을 펼치면 어종별 기준이 나온다(2026-10-13, 따로 된 금어기 페이지를 옮김). */
.tideRules { margin-top: var(--size10); border-radius: var(--size12); background: var(--soft); }
.tideRules summary { display: grid; grid-template-columns: 1fr auto; gap: var(--size10); align-items: center; padding: var(--size10) var(--size12); list-style: none; cursor: pointer; }
.tideRules summary::-webkit-details-marker { display: none; }
.tideRules summary b { display: block; font-size: var(--size13); }
.tideRules summary small em { font-style: normal; color: var(--stop); font-weight: 800; }
.tideRules summary small { display: block; font-size: var(--size12); color: var(--muted); margin-top: var(--size1); }
.tideRules summary small:empty { display: none; }
.tideRules summary svg { width: var(--size16); height: var(--size16); stroke: var(--muted); fill: none; stroke-width: 2; transition: transform .15s; }
.tideRules[open] summary svg { transform: rotate(180deg); }
.tideRules > .tidePosts, .tideRules > .tideSafe, .tideRules > .tideBanner, .tideRuleSource { margin-inline: var(--size12); }
.tideRules .tideSafe { background: none; padding-inline: 0; }
.tideRules .tidePost em.stop { color: var(--stop); }
.tideRules .tidePost em.plain { color: var(--muted); }
.tideRuleSource { font-size: var(--size12); color: var(--muted); line-height: 1.5; margin-block: var(--size10) 0; padding-bottom: var(--size12); }
.tideRuleChange { font-style: normal; color: var(--warn); font-size: var(--size12); font-weight: 700; margin-left: var(--size6); }
.tideDay { position: relative; }
.tideDayDot { position: absolute; top: var(--size5); right: var(--size6); width: var(--size6); height: var(--size6); border-radius: 50%; background: var(--stop); }
/* 바다 한 곳 한 화면의 맨 위: 지역 고르기 단추, 즐겨찾기 별, 즐겨찾기 바로가기. 상자 테두리와 강조선은 쓰지 않는다. */
.placeBar { display: flex; align-items: center; gap: var(--size8); margin: 0 0 var(--size10); }
.placePick { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--size6); min-height: var(--size44); padding: var(--size6) var(--size14); border-radius: var(--size14); background: var(--soft); color: inherit; text-decoration: none; }
.placePick b { font-size: var(--size20); font-weight: 900; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placePick svg { width: var(--size20); height: var(--size20); flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.placePick .placeChevron { margin-left: auto; }
.placeStar { flex: none; display: inline-grid; place-items: center; width: var(--size44); height: var(--size44); padding: 0; border: 0; border-radius: var(--size14); background: var(--soft); color: var(--muted); cursor: pointer; }
.placeStar svg { width: var(--size22); height: var(--size22); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.placeStar[aria-pressed=true] { color: #D9A520; }
.placeStar[aria-pressed=true] svg { fill: currentColor; }
/* 낚시 포인트로 연 지점 페이지(?spot=번호). 물때가 어느 지점 기준인지와 포인트 정보를 두 줄로 둔다(tide.js). */
.spotNote { display: grid; gap: var(--size2); margin: calc(-1 * var(--size4)) 0 var(--size10); padding: 0 var(--size4); font-size: var(--size13); line-height: 1.5; }
.spotNote[hidden] { display: none; }
.spotNote small { color: var(--muted); font-size: var(--size12); }
.placeFavs { display: flex; gap: var(--size8); overflow-x: auto; margin: 0 0 var(--size10); padding-bottom: var(--size2); scrollbar-width: none; }
.placeFavs[hidden] { display: none; }
.placeFavs a, .placeFavs span { flex: none; display: inline-flex; align-items: center; min-height: var(--size36); padding: var(--size4) var(--size14); border-radius: var(--size20); background: var(--soft); color: inherit; text-decoration: none; font-size: var(--size14); font-weight: 700; white-space: nowrap; }
.placeFavs span[aria-current] { background: var(--forest); color: var(--ivory); }
.placeFavs a::before, .placeFavs span::before, [data-stations-top] .stationList a.starred::before { content: "★"; margin-right: var(--size4); color: #D9A520; font-size: var(--size12); }
/* 지금 카드의 바다 날씨 한 줄. 파고를 모르는 지점은 '--'이고 상태 이름을 붙이지 않는다(weather.js). */
.seaNow { grid-area: sea; display: flex; align-items: center; gap: var(--size16); margin-top: var(--size12); font-variant-numeric: tabular-nums; }
.seaNow[hidden] { display: none; }
.seaNow span { display: grid; line-height: 1.2; }
.seaNow small { font-size: var(--size11); font-weight: 700; color: var(--heroMuted); }
.seaNow b { font-size: var(--size16); font-weight: 900; color: var(--ivory); white-space: nowrap; }
.seaNow em { margin-left: auto; font-style: normal; font-size: var(--size12); font-weight: 800; padding: var(--size3) var(--size10); border-radius: var(--size20); background: var(--heroLine); color: var(--ivory); white-space: nowrap; }
.seaNow em:empty { display: none; }
.seaNow em.ok { background: var(--heroAccent); color: var(--forest); }
.seaNow em.stop { background: var(--stopSoft); color: var(--stop); }
/* 고른 날 아래의 바다 날씨. */
.daySub { margin-top: var(--size18); }
.daySub[hidden] { display: none; }
.daySub h3 { font-size: var(--size15); margin: 0; }
details.tideFoot summary { cursor: pointer; font-weight: 700; min-height: var(--size40); display: flex; align-items: center; }
details.tideFoot p { margin: 0; }
.stationFind { display: flex; gap: var(--size8); margin-top: var(--size12); }
.stationFind input { flex: 1; min-width: 0; min-height: var(--size44); padding: var(--size8) var(--size14); border: 0; border-radius: var(--size12); background: var(--ivory); color: var(--forest); font: inherit; font-size: var(--size16); }
.stationFind button { flex: none; min-height: var(--size44); padding: var(--size8) var(--size14); border: 0; border-radius: var(--size12); background: var(--sun, #F3E3A0); color: var(--forest); font: inherit; font-weight: 800; cursor: pointer; }
.stationNote { margin: var(--size8) 0 0; font-size: var(--size12); color: var(--heroMuted); }
.stationList { display: flex; flex-wrap: wrap; gap: var(--size8); margin-top: var(--size8); }
.stationList a { display: inline-flex; align-items: center; min-height: var(--size40); padding: var(--size6) var(--size14); border-radius: var(--size20); background: var(--soft); color: inherit; text-decoration: none; font-size: var(--size14); font-weight: 600; }
.stationList a[hidden], [data-stations-group][hidden] { display: none; }
[data-stations-top] .stationList a { background: var(--forest); color: var(--ivory); font-weight: 800; }
.stationList a[aria-current=page] { background: var(--forest); color: var(--ivory); }
/* 지역 고르기 시트. 지점 페이지에서 고르기 목록을 아래에서 올린다(stations.js). 맨 위 찾기 줄은 고정하고 닫기 단추를 같은 줄에 둔다.
   찾기로 목록이 줄어도 시트 높이는 그대로다. 바깥을 누르면 닫히도록 시트 자체에는 여백을 두지 않는다. */
.placeSheet { width: 100%; max-width: var(--size640); height: 88vh; height: 88dvh; max-height: none; margin: auto auto 0; padding: 0; border: 0; border-radius: var(--size20) var(--size20) 0 0; background: var(--bg); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.placeSheet::backdrop { background: rgb(0 0 0 / .45); }
.placeSheet [data-stations] { padding: 0 var(--size16) var(--size24); }
.placeSheet .listHero { position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--size16)); padding: var(--size14) var(--size16); border-radius: 0; }
.placeSheet .stationFind { margin-top: 0; }
.stationFind .placeSheetClose { flex: none; display: inline-grid; place-items: center; width: var(--size44); height: var(--size44); padding: 0; border: 0; border-radius: 50%; background: var(--heroLine); color: var(--ivory); cursor: pointer; }
.stationFind .placeSheetClose svg { width: var(--size20); height: var(--size20); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* 목록·지도 전환과 지도(stations.js). 지점은 초록 점, 낚시 포인트는 노란 점이다. 지도 그림은 OpenStreetMap에서 받는다. */
.stationModes { display: inline-flex; justify-self: start; width: max-content; gap: var(--size2); margin-top: var(--size10); padding: var(--size3); border-radius: var(--size12); background: var(--heroLine); }
.stationModes[hidden] { display: none; }
.stationModes button { min-height: var(--size36); min-width: var(--size64); padding: var(--size4) var(--size16); border: 0; border-radius: var(--size10); background: transparent; color: var(--heroMuted); font: inherit; font-size: var(--size14); font-weight: 800; cursor: pointer; }
.stationModes button[aria-pressed=true] { background: var(--ivory); color: var(--forest); }
.stationMap { position: relative; height: 62vh; height: 62dvh; margin-top: var(--size12); border-radius: var(--size16); overflow: hidden; background: var(--soft); }
.stationMap[hidden] { display: none; }
.stationMapCanvas { width: 100%; height: 100%; }
.onMap [data-stations-group], .onMap [data-stations-top], .onMap [data-stations-spots], .onMap [data-stations-empty] { display: none !important; }
/* 지도 위 오른쪽의 위성 단추. 누르면 위성 사진에 길과 지명을 겹친다. */
.mapType { position: absolute; top: var(--size10); right: var(--size10); z-index: 5; min-height: var(--size36); padding: var(--size4) var(--size16); border: 0; border-radius: var(--size20); background: #ffffff; color: #153D32; font: inherit; font-size: var(--size13); font-weight: 800; box-shadow: 0 var(--size1) var(--size4) rgb(0 0 0 / .25); cursor: pointer; }
.mapType[hidden] { display: none; }
.mapType[aria-pressed=true] { background: #153D32; color: #ffffff; }
/* 점은 크기가 0인 상자 위에 얹어 좌표가 점의 가운데가 된다(stations.js dot). 지점 이름표는 가까이 볼 때만 보인다. */
.mapStation, .mapSpot, .mapYou { position: relative; width: 0; height: 0; cursor: pointer; }
.mapStation i, .mapSpot i, .mapYou i { position: absolute; display: block; box-sizing: border-box; border-radius: 50%; }
.mapStation i { left: calc(-1 * var(--size8)); top: calc(-1 * var(--size8)); width: var(--size16); height: var(--size16); background: #153D32; border: var(--size2) solid #FBF7EC; box-shadow: 0 var(--size1) var(--size3) rgb(0 0 0 / .3); }
.farAway .mapStation i { left: calc(-1 * var(--size5)); top: calc(-1 * var(--size5)); width: var(--size10); height: var(--size10); border-width: var(--size1); }
.mapStation span, .mapYou span { position: absolute; left: 0; bottom: var(--size12); transform: translateX(-50%); padding: var(--size1) var(--size6); border-radius: var(--size6); background: rgb(255 255 255 / .94); color: #153D32; font-size: var(--size11); font-weight: 800; white-space: nowrap; box-shadow: 0 var(--size1) var(--size2) rgb(0 0 0 / .15); }
.stationMap:not(.showLabels) .mapStation span { display: none; }
.mapSpot i { left: calc(-1 * var(--size7)); top: calc(-1 * var(--size7)); width: var(--size14); height: var(--size14); background: #E8B72E; border: var(--size2) solid #153D32; }
.mapYou i { left: calc(-1 * var(--size8)); top: calc(-1 * var(--size8)); width: var(--size16); height: var(--size16); background: #2F80ED; border: var(--size3) solid #ffffff; box-shadow: 0 0 0 var(--size4) rgb(47 128 237 / .25); }
/* 점을 누르면 뜨는 말풍선(네이버 InfoWindow 안의 내용). */
.mapPop { display: grid; gap: var(--size4); min-width: var(--size140); max-width: 15rem; padding: var(--size12) var(--size14); border-radius: var(--size12); background: #ffffff; color: #1d2a24; font-size: var(--size13); line-height: 1.5; box-shadow: 0 var(--size4) var(--size16) rgb(0 0 0 / .18); }
.mapPop b { font-size: var(--size15); }
.mapPop span { color: #4b5a52; }
.mapPop a { justify-self: start; margin-top: var(--size4); padding: var(--size6) var(--size12); border-radius: var(--size10); background: #153D32; color: #ffffff; font-weight: 800; text-decoration: none; }
.spotList a { font-weight: 500; }
/* 날짜·날씨 더보기. 머리 오른쪽의 작은 단추와 펼친 달력 칸(받아 둔 날 전체)이다(2026-10-14, 아래쪽 주 넘기기 줄을 대신함). */
.tideMore { flex: none; min-height: var(--size32); padding: var(--size4) var(--size12); border: 0; border-radius: var(--size16); background: var(--soft); color: var(--ink); font: inherit; font-size: var(--size12); font-weight: 700; cursor: pointer; }
.tideMore[hidden] { display: none; }
.weatherMore { display: block; margin: var(--size8) auto 0; }
.tideCalendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--size2); margin-top: var(--size10); padding: var(--size8); border-radius: var(--size12); background: var(--soft); text-align: center; }
.tideCalendar[hidden] { display: none; }
.tideCalendar .w { font-size: var(--size11); color: var(--muted); font-weight: 700; padding-bottom: var(--size4); }
.tideCalendar .w.sun, .tideCalDay.sun b { color: var(--stop); }
.tideCalDay { display: grid; gap: var(--size1); padding: var(--size6) 0; border-radius: var(--size8); color: inherit; text-decoration: none; line-height: 1.2; }
.tideCalDay b { font-size: var(--size13); font-variant-numeric: tabular-nums; }
.tideCalDay span { font-size: var(--size10); color: var(--muted); min-height: 1.2em; }
.tideCalDay.today { box-shadow: inset 0 0 0 var(--stroke) var(--sea); }
.tideCalDay.on { background: var(--bg); }
.tideCalDay.empty { opacity: .35; }
.tideFoot { font-size: var(--size12); color: var(--muted); line-height: 1.5; padding: var(--size16) var(--size4) 0; }
@media (prefers-reduced-motion: no-preference) { .tidePulse { animation: tidePulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; } }
@keyframes tidePulse { 0% { transform: scale(.5); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }
@media (max-width: 360px) { .tideHero { grid-template-areas: "meta meta" "now now" "shore shore" "prog prog"; } .tideShore { width: 100%; max-width: var(--size140); } }