/* ==================================================================
   TARO-BUILD-18 — 모바일 첫 화면 재구성
   style.css 는 다른 세션이 병렬로 만지는 파일이라, 이 작업의 규칙은 전부
   여기 둔다. index.html 에서 build14.css 다음(마지막)에 링크한다.
   지시서: SSOT/프로젝트/taro/지시서/2026-11-14-1053-TARO-BUILD-18-모바일-첫화면.md
   ================================================================== */

:root{
  /* 오늘의 카드(가장 큰 카드) 높이 = 뷰포트의 34% (합격 기준 33~36%) */
  --b18-h:clamp(170px,34vh,360px);
  --b18-w:calc(var(--b18-h) * 2 / 3);
}
@supports (height:1svh){
  :root{ --b18-h:clamp(170px,34svh,360px) }
}

/* ==================================================================
   §1 상단바 한 줄
   ================================================================== */
.topbar{padding:6px clamp(10px,3vw,22px);gap:8px;flex-wrap:nowrap}
.brand{gap:6px;min-width:0}
.brand-mark{font-size:12px}
.brand-name{
  font-size:10.5px;letter-spacing:.07em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.topbar-right{flex:1 1 auto;justify-content:flex-end;gap:6px;min-width:0}
.account{gap:6px;min-width:0}
.account-info{gap:6px;min-width:0}
.lang-picker{flex:0 1 auto;min-width:0;display:flex}
.lang-picker select{
  max-width:110px;width:104px;padding:4px 5px;font-size:11px;
  text-overflow:ellipsis;
}
.account-btn{padding:3px 8px;font-size:11px;white-space:nowrap}
.account-btn.subtle{border-color:transparent;padding:4px 2px}
.badge{font-size:10px;padding:2px 7px}
/* 상단바 아래 단청 띠는 그대로 두되 두께만 고정한다 */
.topbar{border-bottom-width:1px}

/* ==================================================================
   §2 히어로 + 오늘의 카드
   ================================================================== */
main{padding-top:clamp(6px,1.6vw,24px)}

.hero{
  /* 카드 영역만 차지한다. 캡션은 히어로 밖(다음 요소)에 있어 겹치지 않는다. */
  height:var(--b18-h);
  margin:0 0 3px;
  display:block;
  position:relative;
  padding:0;
}
/* 장식 레이어는 §8에서 끈다 */
.hero-aurora,.hero-particles{display:none !important}

/* 뒤에 걸친 카드 — 절대 배치로 가운데 카드 뒤에 겹친다 */
.hero-fan{
  position:absolute;inset:0;width:100%;height:100%;
  perspective:none;transform:none;transition:none;
  z-index:1;
}
.hero-card{
  position:absolute;left:50%;top:50%;
  width:calc(var(--b18-w) * .60);
  aspect-ratio:2/3;margin:0;
  border-radius:calc(var(--b18-w) * .05);
  transform-origin:50% 50%;
  animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both;
  box-shadow:0 calc(var(--b18-w) * .06) calc(var(--b18-w) * .18) rgba(0,0,0,.55);
  z-index:1;
}
.hero-card[data-slot="l1"]{transform:translate(-50%,-50%) translateX(calc(var(--b18-w) * -0.545)) rotate(-10deg)}
.hero-card[data-slot="r1"]{transform:translate(-50%,-50%) translateX(calc(var(--b18-w) *  0.545)) rotate( 10deg)}
.hero-card[data-slot="l2"]{
  width:calc(var(--b18-w) * .52);
  transform:translate(-50%,-50%) translateX(calc(var(--b18-w) * -0.885)) rotate(-19deg);
  z-index:0;
}
.hero-card[data-slot="r2"]{
  width:calc(var(--b18-w) * .52);
  transform:translate(-50%,-50%) translateX(calc(var(--b18-w) *  0.885)) rotate( 19deg);
  z-index:0;
}
/* 5번째(바보)는 어느 화면에서도 쓰지 않는다 */
.hero-card[data-slot="off"]{display:none}

/* 오늘의 카드 — 히어로 가운데, 가장 큰 카드 */
.hero .daily{
  position:relative;z-index:3;margin:0;padding:0;
  height:100%;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:5px;
}
.hero .daily-card{
  width:var(--b18-w);flex:0 0 auto;aspect-ratio:2/3;
  border-radius:calc(var(--b18-w) * .05);
  z-index:3;
  box-shadow:0 calc(var(--b18-w) * .05) calc(var(--b18-w) * .16) rgba(0,0,0,.6);
}
.daily-inner,.daily-face{border-radius:inherit}

/* 카드 아래 한 줄: "오늘의 자개빛 · 탭해서 열어보세요" */
.daily-copy{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:0 5px;text-align:center;max-width:100%;
  margin:6px 0 4px;
}
.daily-label{
  margin:0;font-size:10px;letter-spacing:.15em;white-space:nowrap;
  color:var(--gold-soft);
}
.daily-label::after{content:"·";margin-left:5px;color:var(--gold-soft);opacity:.65}
.daily-text{
  margin:0;min-height:0;font-size:11.5px;line-height:1.4;text-align:center;
  max-width:100%;
}

/* 뒤집은 뒤에는 의미 템플릿이 길어지므로 히어로가 늘어난다 */
body.daily-open .hero{height:auto;min-height:var(--b18-h)}
body.daily-open .daily{height:auto}
/* 뒤집힌 설명과 아래 제목 사이를 띄우고 자개빛 구분선을 넣는다 */
body.daily-open .daily-copy{
  flex-direction:column;gap:4px;
  align-items:center;text-align:center;
  padding-bottom:9px;margin-bottom:9px;
  position:relative;
}
body.daily-open .daily-copy::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background-image:
    var(--pat-band),
    linear-gradient(90deg,transparent,rgba(202,216,221,.16) 30%,rgba(213,200,219,.13) 70%,transparent);
  background-repeat:repeat-x,no-repeat;
  background-position:center,center;
  background-size:auto 10px,100% 100%;
  opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent 100%);
}
/* 구분선 아래 제목이 한 호흡 쉬도록 */
body.daily-open .hero-title{margin-top:0}

/* ==================================================================
   §4 제목
   ================================================================== */
.hero-title{
  font-family:var(--font-title);
  font-weight:400;
  font-size:clamp(14px,4.1vw,22px);
  line-height:1.28;letter-spacing:.01em;
  margin:0 0 3px;color:var(--ink);
  text-wrap:balance;
}
.hero-title::after{content:none}
.hero-tagline{
  font-family:var(--font-title);
  font-size:clamp(10.5px,2.9vw,12.5px);
  line-height:1.4;color:var(--ink-dim);
  margin:0 0 7px;
}
.hero-tagline::after{content:none}
/* deck_line 과 제목 밑 장식 띠는 첫 화면에서 뺀다(2단계 덱 소개에서 재사용) */
.deck-line{display:none}

/* ==================================================================
   §5 질문창 (라벨 유지, 2줄)
   ================================================================== */
.field-label{font-size:10.5px;letter-spacing:.13em;margin:0 0 5px}
#question{
  min-height:0;
  height:calc(2 * 1.45em + 20px);
  padding:10px 12px;
  line-height:1.45;
  border-radius:12px;
  resize:none;
}

/* ==================================================================
   §6 스프레드 칩 한 줄
   ================================================================== */
#spreads{
  display:flex;flex-wrap:nowrap;gap:7px;
  overflow-x:auto;overflow-y:hidden;
  margin:0 0 2px;
  padding:2px 30px 8px 0;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* 오른쪽 끝을 흐리게 해서 더 있다는 것을 드러낸다 */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%);
}
#spreads::-webkit-scrollbar{display:none}
#spreads .spread{
  flex:0 0 auto;scroll-snap-align:start;
  padding:7px 13px;border-radius:999px;
  display:flex;align-items:center;
}
#spreads .spread b{font-size:12.5px;font-weight:500;margin:0;white-space:nowrap}
#spreads .spread span,#spreads .spread i{display:none}
/* 잠금 표시는 남기되 글자는 읽히지 않게 하고 아이콘만 보인다 */
#spreads .spread-lock{
  position:absolute;top:3px;right:5px;margin:0;
  font-size:0;line-height:1;
}
#spreads .spread-lock::before{content:"🔒";font-size:8px;margin:0}

/* 선택된 스프레드 설명 한 줄 (renderSpreads 가 만든다) */
.spread-desc{
  margin:0 0 8px;
  font-size:11.5px;line-height:1.35;
  color:var(--gold-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spread-desc:empty{display:none}

/* ==================================================================
   §7 프리미엄: 걸리는 것 한 줄 + 메모는 칩 선택 후
   ================================================================== */
#focusBox{margin:0 0 7px}
#focusBox .field-label{font-size:9.5px;letter-spacing:.1em;margin:0 0 4px}
#focusChips{
  display:flex;flex-wrap:nowrap;gap:6px;
  overflow-x:auto;overflow-y:hidden;
  margin:0;padding-bottom:4px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%);
}
#focusChips::-webkit-scrollbar{display:none}
#focusChips .chip{flex:0 0 auto;padding:6px 12px;font-size:12px;white-space:nowrap}
#focusNote{margin-top:5px;padding:8px 11px;font-size:13px;border-radius:10px}
#focusNote[hidden]{display:none}

/* 버튼과 그 아래 */
#startBtn{margin:0 0 5px;padding:13px 20px;font-size:15px}
#friendBtn{
  display:block;margin:0 auto 2px;
  border:0;background:none;padding:5px 8px;
  font-size:12px;color:var(--ink-dim);
}
#friendBtn:hover{color:var(--ink);border:0}
#collectionLink{
  display:block;margin:0 auto 2px;padding:4px 8px;
  font-size:11px;color:#6f6a62;text-decoration:none;
}
#collectionLink:hover{color:var(--gold)}
#collectionLink:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;border-radius:4px}

/* ==================================================================
   §3 카드 뒷면 — 가운데 자개 문양 70% + 테두리 단청 띠
   세 곳(.face-back /.pick-card /.daily-back)이 같은 변수를 쓴다.
   ================================================================== */
.face-back,.pick-card,.daily-back{
  --card-back-size:100% 100%,70% auto,auto,auto,auto;
}
.face-back::before,.pick-card::before,.daily-back::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background-image:var(--pat-band),var(--pat-band);
  background-repeat:repeat-x,repeat-x;
  background-position:0 0,0 100%;
  background-size:auto 9%,auto 9%;
  opacity:.9;
}

/* ==================================================================
   §8 움직임 — 부유/켄번즈/무한 광택/오로라/입자 정지
   남기는 것: 최초 1회 광택, 포인터 반응 광택, 오늘의 카드 뒤집기
   ================================================================== */
.hero-card{animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both}
.hero-card .hero-art{animation:none !important}
.hero-card:nth-child(3)::after{animation:none !important;opacity:.10}
.hero-sheen{animation:heroSheenOnce 1.5s ease-out .45s 1 both}
@keyframes heroSheenOnce{
  from{background-position:-40% 34%}
  to{background-position:150% 66%}
}

@media (prefers-reduced-motion:reduce){
  .hero-card{animation:none !important}
  .hero-sheen{animation:none !important}
  .hero-card .hero-art{animation:none !important}
  .hero-card:nth-child(3)::after{animation:none !important}
}

/* ==================================================================
   §9 여백 리듬 — 화면 높이에 비례해 고르게 퍼지게
   (2026-11-14 12:33 대표님 피드백: "위쪽이 너무 조밀해 답답하다")

   문제: 간격이 3px·5px·7px 고정값이라 412x915 같은 높은 화면에서도
   상단 블록이 위쪽 736px에 몰리고 아래에 179px가 비어 있었다.
   해결: 높이 700px 이하는 지금 값을 그대로 두고(360x640 합격 기준 보호),
   915px까지 비례해서 벌어진다. 간격마다 700px에서의 값과 915px에서의
   값을 정해 두고 그 사이를 선형으로 잇는다.
   ================================================================== */
:root{
  --g0:clamp(2px, calc(1.86vh - 11px), 6px);    /* 700:2   915:6   */
  --g1:clamp(3px, calc(2.33vh - 12.3px), 9px);  /* 700:4   915:9   */
  --g2:clamp(5px, calc(2.79vh - 13.5px), 12px); /* 700:6   915:12  */
  --g3:clamp(6px, calc(2.79vh - 12.5px), 13px); /* 700:7   915:13  */
  --g4:clamp(3px, calc(5.12vh - 31.8px), 15px); /* 700:4   915:15  */
  --q-pad:clamp(10px, calc(1.86vh - 3px), 14px);
}
@supports (height:1svh){
  :root{
    --g0:clamp(2px, calc(1.86svh - 11px), 6px);
    --g1:clamp(3px, calc(2.33svh - 12.3px), 9px);
    --g2:clamp(5px, calc(2.79svh - 13.5px), 12px);
    --g3:clamp(6px, calc(2.79svh - 12.5px), 13px);
    --g4:clamp(3px, calc(5.12svh - 31.8px), 15px);
    --q-pad:clamp(10px, calc(1.86svh - 3px), 14px);
  }
}

/* 오늘의 카드 설명(뒤집은 뒤) — 4줄이 4px 간격으로 붙어 있던 곳.
   간격을 조금 벌리고 카드 이름에만 크기를 줘서 네 줄이 한 덩어리로 읽히지 않게 한다. */
body.daily-open .daily-copy{gap:var(--g0)}
body.daily-open .daily-name{font-size:12.5px}
body.daily-open .daily-keywords{margin-bottom:var(--g1)}
body.daily-open .daily-meaning{line-height:1.62}

/* 히어로 → 카드 설명 → 제목 → 태그라인 */
main{padding-top:var(--g2)}
.hero{margin-bottom:var(--g2)}
.daily-copy{margin:var(--g2) 0 var(--g0)}
body.daily-open .daily-copy{padding-bottom:var(--g3);margin-bottom:var(--g2)}
.hero-title{margin:var(--g2) 0 var(--g1)}
body.daily-open .hero-title{margin-top:var(--g2)}
.hero-tagline{margin:0 0 var(--g3)}

/* 질문창 — 라벨과 입력창이 서로 붙어 보이지 않게 */
.field-label{margin:0 0 var(--g2)}
#question{
  padding:var(--q-pad) 13px;
  height:calc(2 * 1.45em + var(--q-pad) * 2);
}

/* 스프레드 줄 → 설명 → 걸리는 것 */
#spreads{margin:0 0 var(--g1);padding:2px 30px var(--g2) 0}
.spread-desc{margin:0 0 var(--g2)}
#focusBox{margin:0 0 var(--g2)}
#focusBox .field-label{margin:0 0 var(--g1)}
#focusChips{padding-bottom:var(--g1)}

/* 주 동작 버튼은 한 칸 더 띄워 확실히 분리한다 */
#startBtn{margin:var(--g4) 0 var(--g2);padding:clamp(13px,1.9vh,17px) 20px}
#friendBtn{margin:0 auto var(--g1);padding:var(--g1) 10px}
#collectionLink{margin:0 auto 0;padding:var(--g1) 10px}

/* RTL: 칩 줄 왼쪽 여백도 비례값으로 */
body[dir="rtl"] #spreads{padding:2px 0 var(--g2) 30px}

/* ==================================================================
   화면 폭별
   ================================================================== */
/* 640px 이하: 뒤에 걸친 카드는 별·태양 2장만 */
@media (max-width:640px){
  .hero-card[data-slot="l2"],.hero-card[data-slot="r2"]{display:none}
}

/* 데스크톱: 좌우 2장씩 4장 */
@media (min-width:641px){
  .hero{--b18-h:clamp(220px,34svh,380px)}
  .hero-card{width:calc(var(--b18-w) * .64)}
  .daily-label{font-size:11px}
  .daily-text{font-size:12.5px}
  .hero-title{font-size:clamp(20px,3vw,26px)}
  .hero-tagline{font-size:12.5px}
}

/* 낮은 화면(640 높이): 합격 기준을 지키기 위해 위아래 여백을 회수한다 */
@media (max-height:700px){
  main{padding-top:2px}
  .hero{margin-bottom:1px}
  .hero-title{margin-bottom:2px}
  .hero-tagline{margin-bottom:5px}
  #question{height:calc(2 * 1.45em + 16px);padding:8px 11px}
  #startBtn{padding:12px 18px}
}

/* RTL: 칩 줄의 잘림 힌트와 여백을 반대쪽으로 옮긴다 */
body[dir="rtl"] #spreads{padding:2px 0 var(--g2) 30px}
body[dir="rtl"] #spreads,body[dir="rtl"] #focusChips{
  -webkit-mask-image:linear-gradient(270deg,#000 0,#000 93%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0,#000 93%,transparent 100%);
}

/* 데스크톱: 상단바·칩 줄은 여유가 있으므로 원래 크기로 되돌리고 페이드를 끈다 */
@media (min-width:641px){
  .brand-name{font-size:12.5px;letter-spacing:.12em}
  .lang-picker select{width:130px;max-width:130px;font-size:12.5px;padding:6px 10px}
  .account-btn{font-size:12.5px;padding:6px 12px}
  .badge{font-size:11.5px;padding:4px 10px}
  #spreads,#focusChips{
    -webkit-mask-image:none;mask-image:none;
    padding-right:0;
    flex-wrap:wrap;overflow-x:visible;
  }
}

/* 뒤집힌 상태에서는 라벨 뒤 구분점(·)을 지운다 */
body.daily-open .daily-label::after{content:none}

/* ==================================================================
   §7-b 프리미엄 포커스 한 줄 (2026-11-14)
   메모 입력을 칩 줄 아래에 쌓으면 360x640 에서 #startBtn 이 640px 밖으로
   나간다. 칩 스크롤 줄과 같은 행에 세워 높이 증가를 0으로 만든다.
   메모는 칩을 고른 뒤에만 보인다(renderFocus 가 hidden 을 관리).
   ================================================================== */
.focus-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0}
.focus-row #focusChips{flex:1 1 100%;min-width:0}
.focus-row #focusNote{
  flex:1 1 100%;width:100%;max-width:none;
  height:32px;margin:5px 0 0;padding:6px 11px;font-size:12.5px;
}
/* 넓은 화면에서는 같은 행에 나란히 — 높이 증가가 없다 */
@media (min-width:641px){
  .focus-row{flex-wrap:nowrap}
  .focus-row #focusChips{flex:1 1 auto}
  .focus-row #focusNote{flex:0 1 42%;width:auto;height:38px;margin:0;font-size:13px}
}

/* ==================================================================
   §7-c 낮은 화면(≤700px)에서 오늘의 카드를 뒤집은 상태의 압축
   카드 34% + 뒤집힌 설명 + 버튼을 640px 안에 함께 넣기 위한 한 단계 축소.
   · 카드는 33svh(33.0%)로 합격 범위(33~36%) 안에서 6px 회수
   · 뒤집힌 설명은 3줄 높이에서 내부 스크롤(내용은 전부 읽을 수 있다)
   · 자개 구분선은 그대로 둔다(대표님 지시 2026-11-14 11:52)
   ================================================================== */
@media (max-height:700px){
  body.daily-open .hero{--b18-h:clamp(170px,33svh,360px)}
  body.daily-open .daily{gap:2px}
  /* 뒤집힌 설명: 줄 높이를 하나로 맞춰 클램프가 줄 경계에서 끊기게 하고,
     아래는 페이드로 '더 있다'를 드러낸다. 자개 구분선은 글자 아래에 둔다. */
  body.daily-open .daily-text{
    max-height:calc(3 * 1.32 * 10.5px);
    overflow-y:auto;overscroll-behavior:contain;
    font-size:10.5px;line-height:1.32;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(#000 72%,rgba(0,0,0,.18));
    mask-image:linear-gradient(#000 72%,rgba(0,0,0,.18));
  }
  body.daily-open .daily-text::-webkit-scrollbar{display:none}
  body.daily-open .daily-name,body.daily-open .daily-keywords,body.daily-open .daily-meaning{
    font-size:10.5px;line-height:1.32;margin:0;
  }
  body.daily-open .daily-copy{padding-bottom:10px;margin:3px 0 2px}
  body.daily-open .hero-title{font-size:clamp(13px,3.9vw,18px);margin:2px 0 0}
  body.daily-open .hero-tagline{font-size:10px;line-height:1.3;margin:0 0 2px}
  body.daily-open .field-label{margin:0 0 3px}
  body.daily-open #question{height:calc(2 * 1.4em + 6px);padding:4px 10px}
  body.daily-open #spreads{padding-bottom:2px;margin-bottom:2px}
  body.daily-open .spread-desc{margin:0 0 3px}
  body.daily-open #focusBox{margin:0 0 3px}
  body.daily-open #focusChips{padding-bottom:2px}
  body.daily-open .focus-row #focusNote{height:30px;padding:5px 9px}
  body.daily-open #startBtn{margin-top:0;padding:9px 16px}
}

/* 높은 화면(≥701px): 뒤집힌 설명 아래 자개 구분선 여백을 고정값으로 줄인다.
   var(--g3)/var(--g2) 는 915px에서 17/14px까지 벌어져 412x915 에서 버튼이
   10px 넘게 밀렸다. 구분선 띠 높이(10px)만 남기고 여백을 고정한다. */
@media (min-height:701px){
  body.daily-open .daily-copy{padding-bottom:10px;margin-bottom:6px}
  body.daily-open .hero-title{margin-top:4px}
  body.daily-open #spreads{padding-bottom:8px}
  body.daily-open .spread-desc{margin-bottom:8px}
  /* 메모 입력이 열리면 한 줄만큼 높아지므로 그만큼 다른 여백에서 회수한다 */
  body.focus-note-on #question{height:calc(2 * 1.4em + 6px)}
  body.focus-note-on #spreads{padding-bottom:8px}
  body.focus-note-on .spread-desc{margin-bottom:8px}
  body.focus-note-on #focusBox{margin-bottom:8px}
  body.focus-note-on .focus-row #focusNote{height:34px}
  body.focus-note-on.daily-open .hero-title{margin-top:2px}
}

/* 낮은 화면(≤700px)에서 메모 입력이 열린 상태 — 한 단계 더 조인다.
   칩 선택 → 메모 노출 → 뒤집기까지 겹쳐도 #startBtn 이 640px 안에 남는다. */
@media (max-height:700px){
  body.focus-note-on #question{height:calc(2 * 1.35em + 6px);padding:4px 9px}
  body.focus-note-on .field-label{margin:0 0 2px}
  body.focus-note-on #spreads{padding-bottom:0;margin-bottom:1px}
  body.focus-note-on .spread-desc{margin:0 0 1px}
  body.focus-note-on #focusBox{margin:0}
  body.focus-note-on #focusChips{padding-bottom:1px}
  body.focus-note-on .focus-row #focusNote{height:28px;margin-top:3px;padding:4px 10px;font-size:12px}
  body.focus-note-on #startBtn{padding:9px 15px}
  body.focus-note-on .hero-tagline{margin:0}
  body.focus-note-on .daily-copy{margin:2px 0 1px}
  body.focus-note-on.daily-open .daily-text{max-height:calc(2 * 1.32 * 10.5px)}
}

/* 칩 선택 + 뒤집기 + 메모가 모두 겹친 상태(≥701px): 설명을 3줄 높이에서
   내부 스크롤해 412x915 에서도 버튼이 화면 안에 남게 한다. */
@media (min-height:701px){
  body.focus-note-on.daily-open .daily-text{
    max-height:calc(3 * 1.4 * 12px);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  }
  body.focus-note-on.daily-open .daily-text::-webkit-scrollbar{display:none}
}