/* 새 커뮤니티 홈: 클릭 우선 오늘의 편지 봉투 레일.
 * 원본 봉투 이미지는 상단 비율을 보존하고, 카드 하단을 편지지 여백으로
 * 확보해 제목과 메타데이터가 겹치지 않게 한다. */
.editorial-envelope-widget{padding:10px 14px 12px;border-radius:12px;overflow:hidden}
.editorial-envelope-widget__head{margin-bottom:7px}
/* 제목과 설명은 세로로 쌓지 않고 한 줄의 섹션 이름으로 읽힌다. */
.editorial-envelope-widget__head>div{display:flex;min-width:0;align-items:baseline;gap:6px;overflow:hidden;white-space:nowrap}
.editorial-envelope-widget__head p{flex:0 0 auto;font-size:16px;line-height:1.2}
.editorial-envelope-widget__head span{display:block;overflow:hidden;margin:0;font-size:10px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.editorial-envelope-widget__write{min-height:27px;padding:0 10px;font-size:9.5px}
.editorial-envelope-card{
  --editorial-envelope-art:url('/k-tell2/assets/care/envelopes/widget/desktop-public-closed.webp?v=20261024_2');
  position:relative;display:block;flex:0 0 calc((100% - 18px)/3);min-width:0;
  /* PC는 3장으로 넓혀 제목과 하단 정보를 편하게 읽는다. */
  aspect-ratio:1.42 / 1;overflow:hidden;border:1px solid rgba(142,96,72,.30);border-radius:10px;
  background-color:#fefcf7;background-image:var(--editorial-envelope-art);
  /* 카드 프레임과 원본의 네 모서리를 맞춘다. cover 크롭으로 꽃장식이 잘리지 않는다. */
  background-repeat:no-repeat;background-position:center center;background-size:100% 100%;
  box-shadow:0 3px 10px rgba(80,55,38,.10);color:#342821;text-align:left;text-decoration:none;
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.editorial-envelope-card.is-shout{
  --editorial-envelope-art:url('/k-tell2/assets/care/envelopes/widget/desktop-diary-closed.webp?v=20261024_2');
  border-color:rgba(58,103,79,.34);background-color:#fefcf7;
}
.editorial-envelope-card:hover,.editorial-envelope-card:focus-visible{
  z-index:1;transform:translateY(-3px);border-color:var(--envelope-accent);
  box-shadow:0 8px 18px rgba(80,55,38,.18);outline:0;
}
.editorial-envelope-card:focus-visible{box-shadow:0 0 0 3px rgba(155,91,57,.25),0 8px 18px rgba(80,55,38,.18)}
.editorial-envelope-card__title{
  position:absolute;z-index:2;top:43%;right:9%;left:9%;display:-webkit-box;overflow:hidden;margin:0;
  color:#342821;font-family:'Gowun Batang','Noto Serif KR',serif;font-size:clamp(12px,1.05vw,15px);
  font-weight:700;line-height:1.2;letter-spacing:-.07em;text-align:center;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.editorial-envelope-card__meta{
  position:absolute;z-index:2;right:8%;bottom:8%;left:8%;overflow:hidden;color:#6a5b4f;font-size:clamp(9px,.72vw,10.5px);
  font-weight:600;line-height:1.2;text-align:center;text-overflow:ellipsis;white-space:nowrap;
}
/* 카드 자체는 표준 링크다. 레일은 자동 슬라이드만 하며 포인터를 가로채지 않는다. */
.editorial-envelope-widget__rail{cursor:default;touch-action:auto;user-select:auto}
.editorial-envelope-widget__rail.is-dragging{cursor:default}
@media(max-width:1100px){
  .editorial-envelope-card{--editorial-envelope-art:url('/k-tell2/assets/care/envelopes/widget/tablet-public-closed.webp?v=20261024_2')}
  .editorial-envelope-card.is-shout{--editorial-envelope-art:url('/k-tell2/assets/care/envelopes/widget/tablet-diary-closed.webp?v=20261024_2')}
}
/* 모바일의 상위 섹션은 flex-column이다. 데스크톱의 align-self:end를 물려받으면
   봉투 두 묶음이 내용 폭만큼 줄어 우측에 붙는다. 모바일은 두 묶음을 세로로,
   각각 화면 전체 폭으로 고정하고 한 번에 봉투 두 장을 보여 준다. */
@media(max-width:768px){
  .editorial-section .editorial-envelope-pair{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    min-width:0;
    align-self:stretch;
    gap:12px;
  }
  .editorial-section .editorial-envelope-widget,
  .editorial-section .editorial-envelope-widget__rail{width:100%;min-width:0}
  .editorial-section .editorial-envelope-card{flex-basis:calc((100% - 9px)/2)}
}
@media(max-width:480px){
  .editorial-envelope-widget{padding:9px 10px 11px}
  .editorial-envelope-widget__head{margin-bottom:6px}
  .editorial-envelope-card{--editorial-envelope-art:url('/k-tell2/assets/care/envelopes/widget/mobile-public-closed.webp?v=20261024_2');flex-basis:calc((100% - 9px)/2);aspect-ratio:1.37 / 1}
  .editorial-envelope-card.is-shout{--editorial-envelope-art:url('/k-tell2/assets/care/envelopes/widget/mobile-diary-closed.webp?v=20261024_2')}
  .editorial-envelope-card__title{top:42%;font-size:12.5px}
  .editorial-envelope-card__meta{font-size:9.5px}
}

/* 테마의 다크모드는 p·span·a에 밝은 글자색을 직접 지정한다. 봉투는 종이의
   따뜻한 대비를 유지하되, 위젯의 패널·보조문·버튼·카드 텍스트를 독립 팔레트로
   고정해 어느 색상 테마에서도 읽을 수 있게 한다. */
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget{
  border-color:rgba(220,191,165,.20);
  background:linear-gradient(150deg,rgba(43,37,34,.96),rgba(29,26,25,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget.is-diary{
  border-color:rgba(143,190,161,.22);
  background:linear-gradient(150deg,rgba(34,48,41,.96),rgba(27,33,30,.96));
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget__head p{
  color:#efb8aa !important;
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget.is-diary .editorial-envelope-widget__head p{
  color:#a9d5ba !important;
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget__head span,
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget__loading{
  color:#cbbdb3 !important;
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget__write{
  border-color:rgba(239,184,170,.44);
  color:#ffd8cd !important;
  background:rgba(255,255,255,.08);
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget.is-diary .editorial-envelope-widget__write{
  border-color:rgba(169,213,186,.45);
  color:#c9ecd5 !important;
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget__write:hover,
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget__write:focus-visible{
  color:#261d1a !important;
  background:#efb8aa;
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget.is-diary .editorial-envelope-widget__write:hover,
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-widget.is-diary .editorial-envelope-widget__write:focus-visible{
  color:#15231b !important;
  background:#a9d5ba;
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-card{
  border-color:rgba(239,216,194,.34);
  background-color:#cfc0ad;
  background-image:linear-gradient(rgba(21,18,16,.18),rgba(21,18,16,.24)),var(--editorial-envelope-art);
  box-shadow:0 5px 14px rgba(0,0,0,.28);
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-card.is-shout{
  border-color:rgba(169,213,186,.34);
  background-color:#b8c5b5;
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-card__title{
  color:#261d19 !important;
  text-shadow:0 1px 0 rgba(255,250,241,.36);
}
:is(:root.darkMode,html.darkMode,body.darkMode,.darkMode) .editorial-envelope-card__meta{
  color:#493b33 !important;
  text-shadow:0 1px 0 rgba(255,250,241,.28);
}