/* 店长登录页：白天的门店。
   一打开先是卷帘门拉上去，像早上开店。左边是标题和一块本周排班白板，右边是柠檬绿的打卡钟，打卡卡插在它下面，
   爆仔跳出来指着卡片（窄一点的屏幕上他趴在打卡钟后面）。打卡成功时卡片往钟里一推、盖上「开工！」，
   钟面指针拨回去、黄色扫一圈、钟飞到屏幕中间，接上系统的加载画面。按钮、错误提示、时间尺、扫屏在 gate.css */

/* ---------- 背景：黄色格子纸 ---------- */
.shop-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(18, 20, 12, .075) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(18, 20, 12, .075) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(ellipse at 26% 40%, #fff7ae 0, rgba(255, 247, 174, 0) 56%),
    var(--yellow);
}
.gate-manager .lime-a { left: 1.6%; bottom: 12%; }
.gate-manager .lime-c { right: auto; left: 47%; top: 6%; width: clamp(44px, 5vw, 80px); }
.gate-manager .star-a { left: auto; right: 3%; top: 16%; }
.gate-manager .star-b { right: auto; left: 3%; bottom: auto; top: 40%; }

/* ---------- 卷帘门：一打开先往上拉，像早上开店 ---------- */
.shutter {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .45), rgba(18, 20, 12, .1)),
    repeating-linear-gradient(#f3f4ea 0 22px, #c4c6b6 22px 24px, #fdfdf8 24px 27px);
  box-shadow: 0 12px 0 rgba(18, 20, 12, .2);
  animation: shutter-up .85s cubic-bezier(.62, 0, .3, 1) .2s both;
}
/* 门底下的横梁和拉手 */
.shutter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: var(--ink); border-top: 4px solid #fff; }
.shutter::before {
  content: ""; position: absolute; z-index: 1; left: 50%; bottom: 7px; width: 74px; height: 12px; margin-left: -37px;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 99px;
}
.sh-sign {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 28px 15px;
  background: var(--lime); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 7px 7px 0 var(--ink);
  rotate: -3deg; transform-origin: 50% -60px; animation: sign-swing 1s ease-in-out both;
}
.sh-sign img { width: min(46vw, 210px); height: auto; }
.sh-sign b { font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; letter-spacing: .32em; padding-left: .32em; line-height: 1; }
@keyframes shutter-up { 0% { transform: translateY(0); } 16% { transform: translateY(2.2%); } 100% { transform: translateY(-105%); } }
@keyframes sign-swing { 0% { rotate: -3deg; } 30% { rotate: 4deg; } 60% { rotate: -6deg; } 100% { rotate: -3deg; } }

/* ---------- 版面：左边标题和白板，中间留给爆仔，右边打卡钟和卡 ---------- */
.shop-main {
  --kid-h: clamp(240px, 42vh, 400px);
  --kid-w: calc(var(--kid-h) * .837);
  position: relative; z-index: 2; height: calc(100% - 46px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--kid-w) - 26px);
  padding: clamp(64px, 9vh, 96px) clamp(28px, 7vw, 128px) clamp(14px, 3vh, 34px) clamp(20px, 4.6vw, 84px);
}
.shop-hero { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 4.6vh, 50px); min-width: 0; }

/* ---------- 标题：白字黑边，一个字一个字掉下来，「谁」时不时蹦一下，「？」晃一晃 ---------- */
.shop-title { margin: 0; font-size: clamp(52px, 6.3vw, 112px); font-weight: 900; line-height: .98; letter-spacing: -.02em; rotate: -3deg; transform-origin: 0 50%; }
.st-row { display: block; }
.st-line { display: block; white-space: nowrap; }
.st-line + .st-line { margin-left: .45em; }
.st-line > * {
  display: inline-block; font-style: normal; font-weight: 900; color: #fff;
  -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: .07em .07em 0 var(--ink);
  animation: glyph-drop .55s var(--spring-pop) calc(.62s + var(--i) * .07s) both;
}
.st-line em {
  color: var(--lime); font-size: 1.24em; rotate: -6deg; translate: 0 .04em;
  animation: glyph-drop .55s var(--spring-pop) calc(.62s + var(--i) * .07s) both, who-hop 3.6s ease-in-out 2.4s infinite;
}
.st-line b { transform-origin: 50% 88%; animation: glyph-drop .55s var(--spring-pop) calc(.62s + var(--i) * .07s) both, q-swing 3.6s ease-in-out 2.9s infinite; }
@keyframes glyph-drop { from { opacity: 0; transform: translateY(-.7em) scale(1.5) rotate(-14deg); } }
@keyframes who-hop { 0%, 62%, 100% { scale: 1; } 69% { scale: 1.2 .86; } 77% { scale: .94 1.1; } 85% { scale: 1.04 .97; } }
@keyframes q-swing { 0%, 68%, 100% { rotate: 0deg; } 75% { rotate: 18deg; } 83% { rotate: -11deg; } 91% { rotate: 5deg; } }
.shop-title small {
  display: inline-flex; align-items: center; gap: .45em; margin-top: .55em; padding: .34em .85em .34em .5em; border-radius: 999px;
  background: var(--ink); color: var(--yellow); font-size: max(13px, .17em); font-weight: 900; letter-spacing: .05em; line-height: 1.2;
  rotate: 2deg; box-shadow: .25em .25em 0 rgba(18, 20, 12, .25);
  animation: tag-in .5s var(--spring) 1.05s both;
}
.shop-title small::before { content: ""; flex: none; width: 1.5em; height: 1.5em; background: url("/img/clock.svg") center / contain no-repeat; }
@keyframes tag-in { from { opacity: 0; transform: translateX(-36px); } }

/* ---------- 本周排班白板 ---------- */
.wk-board {
  --ws: clamp(12px, 1.02vw, 17px);
  position: relative; width: min(100%, 38em); font-size: var(--ws); padding: 1em 1.05em 1.1em;
  background: var(--paper); border: 3.5px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 var(--ink);
  rotate: 1.2deg; animation: wk-in .8s var(--spring) .5s both;
}
@keyframes wk-in { from { opacity: 0; transform: translateY(60px) rotate(-5deg); } }
/* 白板顶上两颗磁铁 */
.wk-board::before, .wk-board::after {
  content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.wk-board::before { left: 16%; }
.wk-board::after { right: 16%; background: var(--lime); }
.wk-head { display: flex; align-items: center; gap: .6em; margin-bottom: .8em; font-weight: 900; white-space: nowrap; }
.wk-tag { padding: .22em .75em; background: var(--ink); color: var(--yellow); border-radius: .45em; rotate: -2deg; letter-spacing: .06em; }
.wk-range { color: #6b6e5c; font: 800 .92em var(--mono); }
.wk-now { margin-left: auto; display: inline-flex; align-items: center; gap: .4em; padding: .18em .75em; background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 999px; font: 800 .95em var(--mono); }
.wk-now::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #ff4f81; animation: blink 1s steps(1) infinite; }
.wk-days, .wk-body { display: grid; grid-template-columns: 2.3em repeat(7, minmax(0, 1fr)); column-gap: .4em; }
.wk-days { margin-bottom: .45em; }
.wk-days b { padding: .1em 0; border: 2px solid rgba(18, 20, 12, .2); border-radius: 999px; color: #6b6e5c; font-size: .92em; font-weight: 900; text-align: center; }
.wk-days b:first-child { visibility: hidden; }
.wk-days b.is-today { background: var(--ink); border-color: var(--ink); color: var(--yellow); animation: today-pop .5s var(--spring-pop) 1.2s both; }
@keyframes today-pop { 40% { transform: scale(1.3) rotate(-6deg); } }
.wk-body { position: relative; height: var(--wh, clamp(130px, 25vh, 250px)); }
.wk-axis { position: relative; }
.wk-axis span { position: absolute; right: .35em; translate: 0 -50%; color: #8d9080; font: 800 .74em var(--mono); }
/* 08、12、16、20 点各一条横线 */
.wk-col { position: relative; border-radius: .55em; background: repeating-linear-gradient(rgba(18, 20, 12, .08) 0 1px, transparent 1px 26.667%); }
.wk-col.is-today { background-color: rgba(255, 230, 0, .5); box-shadow: inset 0 0 0 2px var(--ink); }
.wk-bar { position: absolute; border: 2px solid var(--ink); border-radius: .4em; box-shadow: 2px 2px 0 var(--ink); transform-origin: 50% 0; animation: bar-draw .55s var(--spring) both; }
.wk-bar.b-early { background: var(--lime); }
.wk-bar.b-mid { background: #fff; }
.wk-bar.b-late { background: var(--ink); box-shadow: 2px 2px 0 rgba(18, 20, 12, .35); }
.wk-bar.b-part { background: var(--pink); }
@keyframes bar-draw { from { transform: scaleY(0); } }
/* 现在几点：一条虚线横过整周 */
.wk-line { position: absolute; z-index: 2; left: 2.3em; right: -.35em; height: 0; border-top: 2.5px dashed #ff4f81; transition: top 1s ease; }
.wk-line::before { content: ""; position: absolute; left: -.4em; top: -.45em; width: .7em; height: .7em; border-radius: 50%; background: #ff4f81; border: 2px solid var(--ink); }

/* ---------- 右边：打卡钟 + 插在下面的打卡卡 ---------- */
.shop-side { --pc-h: 150px; position: relative; width: min(400px, 92vw); }
.puncher {
  --pc-face: 96px;
  position: relative; z-index: 3; display: flex; align-items: flex-start; gap: 14px; height: var(--pc-h); margin: 0 -12px; padding: 14px 16px 0;
  background: var(--lime); border: 3.5px solid var(--ink); border-radius: 24px 24px 18px 18px; box-shadow: 8px 8px 0 var(--ink);
  animation: pc-in .75s var(--spring) .4s both;
}
@keyframes pc-in { from { opacity: 0; transform: translateY(-70px) rotate(-4deg); } }
/* 顶上的铭牌 */
.puncher::before {
  content: "打卡钟"; position: absolute; left: 50%; top: -15px; translate: -50% 0; padding: 1px 12px 2px;
  background: var(--ink); color: var(--lime); border-radius: 8px; font-size: 12px; font-weight: 900; letter-spacing: .3em; white-space: nowrap;
}
.pc-face { flex: none; width: var(--pc-face); height: var(--pc-face); overflow: visible; filter: drop-shadow(3px 3px 0 var(--ink)); }
.pf-hand { transform-box: view-box; transform-origin: 50% 50%; }
.pf-hour, .pf-min { transition: rotate .6s cubic-bezier(.3, 1.3, .5, 1); }
.pf-sec { transition: rotate .3s cubic-bezier(.3, 1.9, .5, 1), opacity .3s; }
.pc-lcd {
  flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px;
  padding: 9px 12px 8px; background: #1b1e12; border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 0 0 2px #2a2f1b;
  color: var(--lime); font-family: var(--mono);
}
.pc-time { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: .03em; white-space: nowrap; text-shadow: 0 0 10px rgba(185, 242, 43, .45); }
.pc-time i { font-style: normal; }
.pc-time span { font-size: .5em; opacity: .75; }
.pc-date { justify-self: end; color: var(--yellow); font: 800 13px/1.25 var(--font); text-align: right; white-space: nowrap; }
.pc-status {
  grid-column: 1 / -1; margin-top: 7px; padding-top: 6px; border-top: 1px dashed rgba(185, 242, 43, .3);
  color: #c9ccb8; font: 800 13px/1.2 var(--font); font-style: normal; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-status.is-ready { color: var(--yellow); }
.pc-status.is-ok { color: var(--lime); }
.pc-status.is-no { color: #ff6b98; animation: blink .26s steps(1) 6; }
/* 插卡口和旁边的指示灯 */
.pc-slot { position: absolute; left: 12%; right: 12%; bottom: 10px; height: 12px; background: var(--ink); border-radius: 99px; box-shadow: inset 0 3px 0 #000, 0 2px 0 rgba(255, 255, 255, .55); }
.pc-led {
  position: absolute; right: calc(5% - 2px); bottom: 9px; width: 13px; height: 13px; border-radius: 50%;
  background: #3b4a12; border: 2.5px solid var(--ink); animation: led-slow 1.6s steps(1) infinite;
}
@keyframes led-slow { 0%, 49% { background: #f4ffb8; box-shadow: 0 0 9px 2px #e2ff6e; } 50%, 100% { background: #3b4a12; box-shadow: none; } }
.puncher.is-typing .pc-led { animation-duration: .36s; }
.puncher.is-ready .pc-led, .puncher.is-ok .pc-led { animation: none; background: #f4ffb8; box-shadow: 0 0 10px 3px #e2ff6e; }
.puncher.is-no .pc-led { animation: led-no .26s steps(1) 6 both; }
@keyframes led-no { 0% { background: #ff6b98; box-shadow: 0 0 10px 3px #ff6b98; } 50% { background: #3b4a12; box-shadow: none; } }

.tc-anchor { position: relative; z-index: 2; margin-top: -16px; animation: tc-in .8s var(--spring) .5s both; }
@keyframes tc-in { from { opacity: 0; transform: translateY(70px) rotate(4deg); } }
.tc-card { position: relative; padding-bottom: 14px; background: var(--paper); border: 3.5px solid var(--ink); border-radius: 18px; box-shadow: 9px 9px 0 var(--ink); }
/* 左边一排打孔 */
.tc-card::after {
  content: ""; position: absolute; left: 9px; top: 96px; bottom: 54px; width: 12px;
  background: radial-gradient(circle, var(--yellow) 4px, var(--ink) 4.6px, transparent 5.4px) 0 0 / 12px 24px;
}
/* 卡片顶上的黄条只放 Logo。高度写死成原来的高（以前右边有个「店长打卡卡」标签撑着）：下面的工号框、左边的打孔、爆仔指的位置都按这个高度摆的 */
.tc-head { display: flex; align-items: center; min-height: 69px; padding: 27px 18px 12px 34px; background: var(--yellow); border-bottom: 3px solid var(--ink); border-radius: 14px 14px 0 0; }
.tc-head img { width: 112px; height: auto; }
.tc-form { padding: 14px 20px 0 34px; }
.tc-form label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 900; }
.tc-input {
  display: block; width: 100%; height: 56px; padding: 0 14px; text-align: center; outline: none;
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 3px 3px 0 rgba(18, 20, 12, .1);
  font-family: var(--mono); font-size: 24px; font-weight: 800; letter-spacing: .12em; transition: background-color .15s, box-shadow .15s;
}
.tc-input::placeholder { font-family: var(--font); font-size: 16px; font-weight: 500; letter-spacing: 0; color: #8d9080; }
.tc-input:focus { background: #fffbe0; box-shadow: inset 3px 3px 0 rgba(18, 20, 12, .1), 0 0 0 4px var(--yellow), 0 0 0 7px var(--ink); }
.tc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 20px 0 34px; }
.tc-week span { display: grid; place-items: center; height: 30px; border: 2px dashed rgba(18, 20, 12, .35); border-radius: 8px; color: var(--ink-2); font-size: 12px; font-weight: 800; }
.tc-week span.is-today { border: 2.5px solid var(--ink); background: var(--yellow); color: var(--ink); }
.tc-week span.is-punched { background: var(--lime); animation: punch .45s var(--spring-pop) both; }
.tc-week span.is-punched::after { content: " ✓"; }
@keyframes punch { 0% { transform: scale(1); } 40% { transform: scale(1.4) rotate(-8deg); } 100% { transform: scale(1); } }
.tc-hint { margin: 10px 20px 0 34px; font-size: 13px; color: #55584a; text-align: center; }

/* 拍在卡上的章 */
.tc-stamp {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: 80%; height: auto; translate: -50% -50%; pointer-events: none;
  filter: drop-shadow(5px 5px 0 rgba(18, 20, 12, .85)); animation: tc-stamp-in .38s var(--spring-pop) both;
}
.tc-stamp.is-no { width: 70%; }
@keyframes tc-stamp-in { from { opacity: 0; transform: scale(2.3) rotate(-22deg); } to { opacity: 1; transform: rotate(-7deg); } }

/* ---------- 爆仔：在中间那条空地上跳出来，手指着卡上的工号框 ----------
   外层管跳出来，里面的图管晃、戳、摇头、跳，换表情时不会把跳出来的动画重播一遍 */
.kid {
  position: absolute; z-index: 4; right: calc(100% - 14px); top: calc(var(--pc-h) + 112px - var(--kid-h) * .41);
  width: var(--kid-w); height: var(--kid-h); pointer-events: none;
  animation: kid-in .8s var(--spring) .85s both;
}
@keyframes kid-in { from { opacity: 0; transform: translate(-30%, 55%) rotate(-16deg) scale(.5); } 45% { opacity: 1; } }
.kid img { width: 100%; height: auto; filter: drop-shadow(6px 6px 0 rgba(18, 20, 12, .9)); transform-origin: 70% 80%; animation: kid-bob 1.3s ease-in-out 1.8s infinite; }
@keyframes kid-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.kid[data-mood="poke"] img { animation: kid-poke .55s ease-out both; }
.kid[data-mood="no"] img { animation: kid-no .55s ease both; }
.kid[data-mood="yes"] img { animation: kid-yes .7s var(--spring) both; }
@keyframes kid-poke { 25% { transform: translateX(16px) rotate(4deg); } 55% { transform: translateX(-3px) rotate(-1deg); } 100% { transform: none; } }
@keyframes kid-no { 15% { rotate: -8deg; } 35% { rotate: 7deg; } 55% { rotate: -4deg; } 75% { rotate: 2deg; } 100% { rotate: 0deg; } }
@keyframes kid-yes { 0% { transform: none; } 35% { transform: translateY(-16%) rotate(-6deg) scale(1.05); } 100% { transform: translateY(-5%); } }
.kid-bubble {
  position: absolute; left: 30%; bottom: 97%; margin: 0; padding: 8px 15px 9px;
  background: #fff; color: var(--ink); border: 3.5px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink);
  font-size: clamp(14px, 1.2vw, 18px); font-weight: 900; line-height: 1.3; white-space: nowrap; rotate: -3deg; transform-origin: 15% 100%;
  animation: kb-pop .45s var(--spring-pop) 1.5s both;
}
.kid-bubble::after {
  content: ""; position: absolute; left: 24px; bottom: -11px; width: 15px; height: 15px; background: #fff;
  border-right: 3.5px solid var(--ink); border-bottom: 3.5px solid var(--ink); transform: rotate(45deg);
}
.kid-bubble.is-pop { animation: kb-pop .32s var(--spring-pop) both; }
@keyframes kb-pop { from { opacity: 0; transform: scale(.45); } }

/* ---------- 大屏：跟着放大，不然中间空一大片 ---------- */
@media (min-width: 1700px) and (min-height: 950px) {
  .shop-title { font-size: clamp(112px, 6.3vw, 150px); }
  .wk-board { --ws: clamp(17px, 1.02vw, 24px); }
  .shop-side { zoom: 1.2; }
  .shop-main { column-gap: calc(var(--kid-w) * 1.2 - 26px); }
}
@media (min-width: 2300px) and (min-height: 1250px) {
  .shop-side { zoom: 1.5; }
  .shop-main { column-gap: calc(var(--kid-w) * 1.5 - 26px); }
}

/* ---------- 窄一点：中间放不下爆仔，他改成趴在打卡钟后面，露出上半身 ---------- */
@media (max-width: 1199px), (max-height: 600px) {
  .shop-main { column-gap: clamp(28px, 4vw, 60px); }
  .shop-side { --peek: clamp(72px, 11vh, 110px); padding-top: var(--peek); }
  /* 露出图片的上半截（举着的柠檬茶、头和指出去的手），宽度按图片比例 921:1100 算 */
  .kid {
    left: 3%; right: auto; top: 0; width: calc(var(--peek) * 2 * .837); height: calc(var(--peek) + 26px); z-index: 2;
    clip-path: inset(-300% -300% 0 -300%);
  }
  .kid-bubble { left: 100%; bottom: auto; top: 4%; margin-left: 4px; transform-origin: 0 60%; }
  .kid-bubble::after { left: -11px; bottom: auto; top: 50%; margin-top: -8px; border: 0; border-left: 3.5px solid var(--ink); border-bottom: 3.5px solid var(--ink); }
}
@media (min-width: 981px) and (max-width: 1199px) and (max-height: 800px) {
  .shop-side { --pc-h: 132px; }
  .puncher { --pc-face: 82px; padding-top: 12px; }
  .pc-time { font-size: 30px; }
}

/* ---------- 手机、平板竖屏：上下排 ---------- */
@media (max-width: 980px), (max-height: 600px) {
  .shop-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: auto; min-height: calc(100% - 46px); padding: 62px 16px 54px; }
  .shop-hero { align-items: center; width: 100%; gap: 16px; }
  .shop-title { display: flex; flex-direction: column; align-items: center; font-size: clamp(36px, 10.4vw, 66px); rotate: -2deg; transform-origin: 50% 50%; }
  .st-row { display: flex; align-items: baseline; gap: .12em; }
  .st-line + .st-line { margin-left: 0; }
  .shop-title small { margin-top: .5em; }
  .wk-board { --ws: clamp(10.5px, 3.1vw, 15px); --wh: clamp(80px, 11vh, 130px); width: min(100%, 520px); }
  .shop-side { --pc-h: 112px; --peek: clamp(64px, 19vw, 100px); width: min(420px, 100%); }
  .puncher { --pc-face: 72px; gap: 10px; margin: 0 -8px; padding: 10px 12px 0; }
  .pc-time { font-size: 28px; }
  .pc-date { font-size: 12px; }
  .pc-status { margin-top: 5px; padding-top: 5px; font-size: 12px; }
  .pc-slot { bottom: 8px; height: 10px; }
  .pc-led { bottom: 7px; }
  .tc-head { min-height: 65px; padding: 25px 16px 10px 30px; }
  .tc-head img { width: 100px; }
  .tc-form { padding: 12px 16px 0 30px; }
  .tc-week { margin: 14px 16px 0 30px; }
  .tc-hint { margin: 8px 16px 0 30px; }
  .tc-card::after { top: 86px; }
  .kid-bubble { font-size: 14px; padding: 7px 12px 8px; }
  .gate-manager .lime-c, .gate-manager .star-b { display: none; }
  .gate-manager .lime-a { left: auto; right: 2%; bottom: auto; top: 13%; width: 44px; }
  .gate-manager .star-a { right: auto; left: 4%; top: 14%; }
}
/* 排班白板放进来就要往下翻才看得到卡片时先不放；再矮一点，爆仔也不放，标题和打卡钟、卡片在一屏里 */
@media (max-width: 980px) and (max-height: 939px), (max-height: 600px) {
  .wk-board { display: none; }
}
@media (max-width: 980px) and (max-height: 739px), (max-height: 600px) {
  .kid { display: none; }
  .shop-side { padding-top: 0; }
}
@media (max-width: 420px) {
  .kid-bubble { max-width: calc(100vw - 156px); white-space: normal; }
}
@media (max-width: 370px) {
  .pc-date { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shutter { display: none; }
}