@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root {
  --ink: #29221d;
  --muted: #736960;
  --paper: #fbfaf7;
  --line: rgba(76, 61, 47, .16);
  --shadow: 0 18px 48px rgba(72, 53, 35, .09);
  --serif: 'Gowun Batang', 'Noto Serif KR', serif;
  --sans: 'Noto Sans KR', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 8% 0%, rgba(186, 153, 117, .11), transparent 25rem),
    linear-gradient(90deg, rgba(130, 105, 79, .025) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 5px 5px, auto;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); }
.skip-link:focus { top: 16px; }

.demo-topbar {
  min-height: 34px;
  padding: 8px clamp(20px, 6vw, 84px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,.88);
  background: #694f3d;
  font-size: 11px;
  letter-spacing: -.02em;
}
.demo-topbar strong { font-weight: 600; color: #fff; }
.community-home { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 18px 0 44px; }
.eyebrow, .section-kicker { margin: 0; color: #876a51; font-size: 11px; font-weight: 700; letter-spacing: .13em; }


.editorial-stream { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.editorial-section { --accent: #a3453b; --accent-rgb: 163, 69, 59; display: grid; grid-template-columns: minmax(260px, .78fr) minmax(460px, 1.22fr); grid-template-areas: 'words visual' 'rail rail'; grid-template-rows: minmax(0, 1fr) auto; min-height: min(780px, calc(100svh - 124px)); padding-block: clamp(18px, 3vh, 36px); column-gap: clamp(42px, 7vw, 108px); row-gap: 16px; align-items: center; scroll-margin-top: 72px; }
.editorial-section--amber { --accent: #a0702f; --accent-rgb: 160, 112, 47; }
.editorial-section--sand { --accent: #81684f; --accent-rgb: 129, 104, 79; }
.editorial-section--leaf { --accent: #35745f; --accent-rgb: 53, 116, 95; }
.editorial-section--plum { --accent: #785a76; --accent-rgb: 120, 90, 118; }
.editorial-section--night { --accent: #375873; --accent-rgb: 55, 88, 115; }
.editorial-section--reverse { grid-template-columns: minmax(460px, 1.22fr) minmax(260px, .78fr); grid-template-areas: 'visual words' 'rail rail'; }
.editorial-section--reverse.editorial-section--portrait { grid-template-columns: minmax(260px, .78fr) minmax(460px, 1.22fr); }
.editorial-section--memory-focus .showcase-photo { background-position: 100% center; }
.reading-highlight-grid{grid-area:rail;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:8px 16px;border:1px solid rgba(111,78,103,.32);border-radius:14px;background:rgba(255,255,255,.55)}
.reading-highlight-card{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:12px;min-width:0;box-sizing:border-box;padding:6px 12px;border:1px solid rgba(111,78,103,.16);border-radius:10px;background:#fefcf7;color:#493d43;text-decoration:none}
.reading-highlight-cover{--book:#755d67;position:relative;display:block;box-sizing:border-box;width:88px;aspect-ratio:3/4.1;overflow:visible;border-radius:2px 5px 5px 2px;background:linear-gradient(90deg,rgba(0,0,0,.28) 0 3px,rgba(255,255,255,.2) 3px 5px,rgba(0,0,0,.1) 5px 8px,transparent 8px),linear-gradient(160deg,rgba(255,255,255,.14),rgba(0,0,0,.14)),var(--book);box-shadow:inset -1px 0 0 rgba(255,255,255,.22),2px 4px 8px rgba(40,28,35,.25)}
.reading-highlight-cover::before{content:'';position:absolute;inset:8px 7px 8px 13px;border:1px solid rgba(255,255,255,.3);border-radius:1px;pointer-events:none}
.reading-highlight-cover::after{content:'';position:absolute;top:3px;right:-4px;bottom:3px;width:4px;border-radius:0 2px 2px 0;background:repeating-linear-gradient(180deg,#f6efe2 0 2px,#d9cdb8 2px 3px);box-shadow:1px 2px 3px rgba(40,28,35,.2)}
.reading-highlight-cover.has-poster::before{display:none}
.reading-highlight-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px 5px 5px 2px}
.reading-highlight-cover.has-poster::after{z-index:1}
.reading-highlight-meta{display:flex;min-width:0;flex-direction:column;gap:4px}
.reading-highlight-meta strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#352c30;font-size:14px;font-weight:700;line-height:1.38;word-break:keep-all}
.reading-highlight-meta em{overflow:hidden;color:#6a5b62;font-size:12px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.reading-highlight-meta small{white-space:nowrap;align-self:flex-start;margin-top:2px;padding:2px 7px;border-radius:4px;background:rgba(111,78,103,.1);color:#6c5775;font-size:11px;font-weight:600}
.reading-highlight-cover.tone-sage{--book:#60786d}.reading-highlight-cover.tone-brick{--book:#8b5145}.reading-highlight-cover.tone-navy{--book:#40596b}.reading-highlight-cover.tone-rose{--book:#8f6872}.reading-highlight-cover.tone-plum{--book:#6c5775}.reading-highlight-cover.tone-forest{--book:#496455}
@media (min-width: 821px) {
  .editorial-section--portrait .editorial-showcase { width: min(100%, 390px); min-height: 0; aspect-ratio: 3 / 4; justify-self: start; align-self: center; }
  .editorial-section--memory-focus .showcase-photo { background-position: 100% center; }
}
@media (min-width: 1100px) {
  .editorial-section--memory-focus { grid-template-columns: minmax(500px, .86fr) minmax(0, 1.14fr); column-gap: clamp(32px, 4vw, 60px); }
  .editorial-section--memory-focus.editorial-section--reverse { grid-template-columns: minmax(0, 1.14fr) minmax(500px, .86fr); }
  .memory-heading-line { display: inline-block; white-space: nowrap; }
}
.section-words { grid-area: words; padding: 15px 0; }
.section-kicker { color: var(--accent); }
.section-count { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.section-count strong { color: var(--accent); font-size: 18px; }
.section-words h2 { margin: 27px 0 22px; font-family: var(--serif); font-size: clamp(32px, 3.25vw, 54px); font-weight: 400; line-height: 1.27; letter-spacing: -.09em; }
.section-words h2 em { color: var(--accent); font-style: normal; }
.section-summary { max-width: 370px; margin: 0; color: #61564e; font-size: 14px; line-height: 2; letter-spacing: -.03em; word-break: keep-all; }
.section-actions { display: flex; align-items: center; gap: 17px; margin-top: 31px; }
.text-link { padding-block: 10px; color: var(--accent); border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 700; }
.text-link span { margin-left: 9px; }
.soft-button { padding: 11px 14px; border: 1px solid rgba(var(--accent-rgb), .34); border-radius: 5px; color: var(--accent); background: rgba(var(--accent-rgb), .05); font-size: 12px; font-weight: 700; }

.editorial-showcase { grid-area: visual; position: relative; min-height: clamp(270px, 43svh, 430px); overflow: hidden; isolation: isolate; border-radius: 2px; background: #ddd0c0; box-shadow: var(--shadow); }
.showcase-photo { position: absolute; inset: 0; background-position: center; background-size: cover; transform: scale(1.01); transition: opacity .7s ease, transform 6s ease; }
.editorial-section:hover .showcase-photo { transform: scale(1.045); }

/* 오늘의 편지 외에는 플라루맥스의 실제 위젯만 사용하며, 히어로 바로 아래의 같은 레일 행에 둔다. */
.editorial-existing-widget,
.editorial-envelope-pair { grid-area: rail; min-width: 0; align-self: end; }
.editorial-existing-widget .uxc_slide,
.editorial-existing-widget .chat-rooms-widget { margin: 0; }

/* 사이드탭은 본문을 scale하지 않는다. 열린 상태에서 오늘의 편지만 4칸에서 3칸으로 전환한다. */
.container[data-side="on"] .editorial-envelope-card { flex-basis: calc((100% - 18px) / 3); }

/* 오늘의 편지: 긴 목록을 실제 봉투를 닮은 4칸 카드로 다시 구성한다. */
.letter-rail-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; min-width: 0; }
.letter-rail-panel { --letter-accent: #a3453b; padding: 18px; overflow: hidden; border: 1px solid rgba(163, 69, 59, .21); border-radius: 5px; background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(249,239,233,.78)); box-shadow: 0 11px 28px rgba(83, 51, 33, .055); }
.letter-rail-panel--diary { --letter-accent: #35745f; border-color: rgba(53, 116, 95, .23); background: linear-gradient(150deg, rgba(255,255,255,.94), rgba(232,244,237,.75)); }
.letter-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.letter-rail-head p { margin: 0; color: var(--letter-accent); font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: -.055em; }
.letter-rail-head span { display: block; margin-top: 2px; color: #85776e; font-size: 10px; }
.letter-rail-controls { display: flex; flex: 0 0 auto; gap: 4px; }
.letter-rail-controls button { width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--letter-accent) 28%, transparent); border-radius: 50%; color: var(--letter-accent); background: rgba(255,255,255,.82); cursor: pointer; }
.letter-rail-controls button:hover { color: #fff; background: var(--letter-accent); }
.envelope-rail { display: flex; gap: 9px; overflow: hidden; scroll-behavior: smooth; }
.envelope-card { position: relative; flex: 0 0 calc((100% - 27px) / 4); min-width: 0; aspect-ratio: .92; padding: 28px 9px 11px; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--letter-accent) 35%, #d7c6b9); border-radius: 5px; color: #352c27; background-color: #fbf7ee; background-image: linear-gradient(rgba(255,252,246,.82), rgba(255,252,246,.88)), var(--envelope-paper, none); background-position: center; background-size: cover; box-shadow: 0 5px 13px rgba(87, 59, 39, .1); cursor: pointer; text-align: left; transition: transform .24s ease, box-shadow .24s ease; }
.envelope-card::before { content: ''; position: absolute; z-index: -1; top: -1px; left: -1px; width: calc(100% + 2px); height: 35%; border-radius: 5px 5px 48% 48%; background: linear-gradient(135deg, color-mix(in srgb, var(--letter-accent) 82%, #fff), var(--letter-accent)); box-shadow: inset 0 -1px rgba(255,255,255,.32); }
.envelope-card::after { content: ''; position: absolute; z-index: -1; right: -25%; bottom: -20%; width: 122%; height: 70%; border: 1px solid color-mix(in srgb, var(--letter-accent) 24%, transparent); background: linear-gradient(42deg, transparent 49.5%, color-mix(in srgb, var(--letter-accent) 16%, #fff) 50%, transparent 50.5%), linear-gradient(-42deg, transparent 49.5%, color-mix(in srgb, var(--letter-accent) 15%, #fff) 50%, transparent 50.5%); transform: rotate(-2deg); opacity: .7; pointer-events: none; }
.envelope-card:hover, .envelope-card:focus-visible { z-index: 1; transform: translateY(-5px); box-shadow: 0 12px 22px rgba(87, 59, 39, .18); outline: none; }
.envelope-card__stamp { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 30px; border: 1px dashed rgba(255,255,255,.85); border-radius: 2px; color: #fff; background: color-mix(in srgb, var(--letter-accent) 78%, #fff); font-family: var(--serif); font-size: 10px; line-height: 1; }
.envelope-card__kind { display: block; min-width: 0; overflow: hidden; color: rgba(255,255,255,.95); font-size: 9px; font-weight: 700; letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
.envelope-card__title { display: -webkit-box; overflow: hidden; margin: 12px 0 7px; font-family: var(--serif); font-size: clamp(12px, 1.1vw, 15px); font-weight: 700; line-height: 1.4; letter-spacing: -.075em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.envelope-card__meta { position: absolute; right: 9px; bottom: 9px; left: 9px; overflow: hidden; color: #8a7c72; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.envelope-card__seal { position: absolute; z-index: 1; right: 10px; bottom: 25px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--letter-accent); box-shadow: 0 1px 3px rgba(54, 31, 21, .24); font-size: 8px; }

.demo-footer { padding: 34px 24px; text-align: center; color: rgba(255,255,255,.75); background: #654b39; font-size: 12px; }

@media (max-width: 820px) {
  .community-home { width: min(100% - 32px, 620px); padding-top: 18px; }
  .demo-topbar { justify-content: center; padding-inline: 16px; }
  .demo-topbar > span:first-child, .demo-topbar > span:last-child { display: none; }
  .editorial-stream { gap: 72px; }
  .editorial-section, .editorial-section--reverse { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .editorial-section--reverse .section-words, .editorial-section--reverse .editorial-showcase { order: unset; }
  .section-words { padding: 0; }
  .section-words h2 { margin: 18px 0 16px; font-size: clamp(32px, 9vw, 47px); }
  .section-summary { max-width: none; font-size: 13px; line-height: 1.9; }
  .section-actions { margin-top: 22px; }
  .editorial-showcase { min-height: min(108vw, 490px); }
  .editorial-section--portrait .showcase-photo { background-position: center 75%; }
  .editorial-existing-widget { width: 100%; }
  .letter-rail-pair { grid-template-columns: 1fr; gap: 15px; }
  .letter-rail-panel { padding: 14px; }
  .envelope-card { flex-basis: calc((100% - 18px) / 3); }
}

/* 모바일은 데스크톱 레이아웃을 축소하지 않는다. 섹션·히어로·위젯을 한 열로 다시 배치한다. */
@media (max-width: 768px) {
  /* 모바일에서도 DOM에 남는 플라루맥스 사이드바가 본문 폭을 296px만큼
     빼앗지 않도록 한다. 이 자산은 화보형 커뮤니티 홈에서만 불린다. */
  .container .sideWrap ~ .contentsWrap,
  .container .contentsWrap {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .community-editorial-shell { width: 100%; min-width: 0; }
  .community-home { width: 100%; padding: 12px 16px 30px; overflow: hidden; }
  .editorial-stream { gap: 46px; }
  .editorial-section,
  .editorial-section--reverse { min-height: 0; padding: 14px 0 24px; gap: 16px; }
  .section-kicker { font-size: 10px; letter-spacing: .1em; }
  .section-count { margin-top: 8px; }
  .section-count strong { font-size: 16px; }
  .section-words h2 { margin: 14px 0 12px; font-size: clamp(30px, 9vw, 40px); line-height: 1.24; }
  .section-summary { font-size: 13px; line-height: 1.75; }
  .section-actions { gap: 12px; margin-top: 18px; }
  .text-link { font-size: 12px; }
  .soft-button { padding: 10px 12px; font-size: 12px; }
  .editorial-showcase { width: 100%; min-height: 0; aspect-ratio: 4 / 3; }
  .editorial-existing-widget { width: 100%; min-width: 0; }
  .editorial-existing-widget .uxc_slide { padding: 11px; }
  .editorial-existing-widget .chat-rooms-widget { border-radius: 10px; }
}

@media (max-width: 480px) {
  .community-home { padding-inline: 12px; }
  .editorial-stream { gap: 36px; }
  .section-actions { align-items: flex-start; flex-wrap: wrap; }
  .editorial-showcase { aspect-ratio: 1.25 / 1; }
  .envelope-rail { overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .envelope-card { flex-basis: calc((100% - 9px) / 2); scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* 청춘커뮤니티 메인에서만 쓰는 표면의 모서리 체계. 사진·글·대화 위젯이
   서로 다른 스킨에서 오더라도, 과하게 둥글지 않은 같은 결로 읽히게 한다. */
.community-editorial-shell {
  --editorial-surface-radius: 12px;
  --editorial-control-radius: 9px;
}
.community-editorial-shell .editorial-showcase,
.community-editorial-shell .letter-rail-panel,
.community-editorial-shell .editorial-existing-widget .uxc_slide,
.community-editorial-shell .editorial-existing-widget .chat-rooms-widget,
.community-editorial-shell .editorial-envelope-widget {
  border-radius: var(--editorial-surface-radius);
}
.community-editorial-shell .editorial-existing-widget .uxc_slide,
.community-editorial-shell .editorial-envelope-widget {
  overflow: hidden;
}
.community-editorial-shell .soft-button,
.community-editorial-shell .envelope-card,
.community-editorial-shell .envelope-card::before,
.community-editorial-shell .envelope-card__stamp {
  border-radius: var(--editorial-control-radius);
}

@media (max-width: 768px) {
  .community-editorial-shell {
    --editorial-surface-radius: 10px;
    --editorial-control-radius: 8px;
  }
}

@media (max-width:820px){.reading-highlight-card{grid-template-columns:64px minmax(0,1fr);gap:8px;padding:6px 10px}.reading-highlight-cover{width:64px}.reading-highlight-meta strong{font-size:13px}}

.ebook-button{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid #28150c;border-radius:10px;color:#f6e6cc;text-decoration:none;background:linear-gradient(rgba(122,82,50,.68),rgba(90,56,32,.8)),url('/k-tell2/assets/care/ui/reading-leather-walnut-v1.png') center/cover,#6a4428;box-shadow:0 3px 0 #4a2e1a,0 8px 14px rgba(40,22,10,.28),inset 0 0 0 1px rgba(255,232,196,.22);transition:transform .15s,filter .15s}
.ebook-button:hover,.ebook-button:focus-visible{transform:translateY(-1px);filter:brightness(1.08);outline:0}
.ebook-ic{display:grid;width:34px;height:34px;place-items:center;border-radius:8px;background:rgba(30,14,4,.22);box-shadow:inset 0 2px 4px rgba(30,14,4,.45),0 1px 0 rgba(255,232,196,.25)}
.ebook-ic svg{width:20px;height:20px;fill:none;stroke:#fff1d6;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ebook-tx{display:grid;gap:1px;line-height:1.25}
.ebook-tx b{font-size:14px;font-weight:800;color:#fff6e4;text-shadow:0 1px 0 rgba(40,20,8,.6)}
.ebook-tx small{font-size:11px;color:#f0dcbc}
.ebook-button em{padding:2px 7px;border-radius:4px;background:#e9c97c;color:#4a2a08;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.06em}
@media(max-width:820px){.ebook-button{width:100%;box-sizing:border-box;justify-content:flex-start}.ebook-button em{margin-left:auto}}
.section-actions{flex-wrap:wrap}
.ebook-button{flex:0 0 100%;width:100%;max-width:340px;box-sizing:border-box;margin-top:6px}
.ebook-button em{margin-left:auto}
.soft-button{white-space:nowrap}

.ebook-button{gap:8px;padding:0 12px;height:38px;max-width:none;width:auto;flex:0 0 auto;border-radius:9px;margin-top:0}
.ebook-button svg{width:18px;height:18px;fill:none;stroke:#fff1d6;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ebook-button b{font-size:13px;font-weight:800;color:#fff6e4;text-shadow:0 1px 0 rgba(40,20,8,.6)}
.ebook-button em{margin-left:2px;padding:1px 6px}
@media(max-width:820px){.ebook-button{width:auto}}

.editorial-section--amber .showcase-photo { background-position: 78% center; }
/* 모바일에서는 사진 박스가 좁아져 가로가 잘린다. 인물이 박스 안에 오도록 구역별로 위치를 맞춘다. */
@media (max-width: 820px) {
  #public-letter .showcase-photo { background-position: 58% center; }
  #daily-story .showcase-photo { background-position: 100% center; }
  #memories .showcase-photo { background-position: 88% center; }
  #memory .showcase-photo { background-position: 100% center; }
}

/* 모두의 추억 위젯: 가로 사진을 자르지 않고 틀 안에 전체로 보여 준다. */
[data-memory-highlights] .reading-highlight-card{grid-template-columns:112px minmax(0,1fr)}
[data-memory-highlights] .reading-highlight-cover{width:112px;aspect-ratio:4/3}
[data-memory-highlights] .reading-highlight-cover img{object-fit:contain;background:#2b241f}
@media (max-width:820px){[data-memory-highlights] .reading-highlight-card{grid-template-columns:84px minmax(0,1fr)}[data-memory-highlights] .reading-highlight-cover{width:84px}}

/* 추억·함께읽기 레일은 어두운 화면과 어울리는 반투명 패널로 표시한다. */
html.darkMode .reading-highlight-grid[data-memory-highlights]{background:linear-gradient(150deg,rgba(54,42,32,.88),rgba(33,28,25,.88));border-color:rgba(214,177,127,.24)}
html.darkMode .reading-highlight-grid[data-reading-highlights]{background:linear-gradient(150deg,rgba(50,38,47,.88),rgba(31,27,30,.88));border-color:rgba(192,157,181,.24)}
html.darkMode .reading-highlight-grid .reading-highlight-card{background:#f7f1e7;border-color:rgba(110,82,69,.3);color:#352c30}
html.darkMode .reading-highlight-grid .reading-highlight-meta strong{color:#352c30!important}
html.darkMode .reading-highlight-grid .reading-highlight-meta em{color:#5c4e54!important}
html.darkMode .reading-highlight-grid .reading-highlight-meta small{color:#5f4965!important}