/* トップページ「ドリンク」セクション専用。.dk の中だけに効きます */
.dk{
  --dk-ink:#3A2217; --dk-sub:#7A5238; --dk-line:#C9A980; --dk-red:#C8261E;
  --dk-coffee:#2E1A10; --dk-espresso:#4A2A18; --dk-milk:#EAD3AE; --dk-kokuto:#6B3A1A;
  --dk-glass:rgba(122,82,56,.07);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);
  align-items:center;margin:32px 0 24px;color:var(--dk-ink)
}
.dk *,.dk *::before,.dk *::after{box-sizing:border-box}

.dk-stage{display:flex;flex-direction:column;align-items:center;gap:12px}
.dk-cup{width:min(200px,70%);height:auto;overflow:visible}
.dk-caption{font-family:"Klee One",serif;font-size:17px;color:var(--dk-sub);margin:0;min-height:1.8em;letter-spacing:.04em}

/* 注ぐ動き：古い層はすっと抜け、新しい層は下から順に満ちる */
.dk-layer{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);
  transition:transform .35s ease-in}
.dk-group.on .dk-layer{transform:scaleY(1);
  transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .3s + .35s)}
.dk-ice rect{fill:rgba(255,255,255,.42);stroke:rgba(255,255,255,.75);stroke-width:1.5}
.dk-ice{opacity:0;transition:opacity .6s ease}
.dk-ice.on{opacity:1;transition-delay:.9s}
.dk-straw{opacity:.92}

.dk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dk-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:18px;width:100%;
  padding:12px 14px;border-radius:12px;cursor:pointer;
  transition:background-color .3s ease}
.dk-item img{width:76px;height:76px;object-fit:cover;border-radius:10px;flex:none;
  filter:saturate(.85);transition:filter .3s ease}
.dk-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-name{font-family:"Klee One",serif;font-weight:600;font-size:clamp(17px,1.6vw,20px);color:var(--dk-ink);
  display:flex;align-items:center;gap:10px;letter-spacing:.03em}
.dk-name::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--dk-red);
  opacity:0;transform:scale(.3);transition:opacity .3s ease,transform .3s ease}
.dk-desc{font-size:13px;color:var(--dk-sub);line-height:1.7}
.dk-item:hover{background:rgba(201,138,46,.08)}
.dk-item.is-active{background:rgba(201,138,46,.14)}
.dk-item.is-active img{filter:none}
.dk-item.is-active .dk-name::after{opacity:1;transform:scale(1)}
.dk-item:focus-visible{outline:2px solid var(--dk-red);outline-offset:2px}

@media (max-width:760px){
  .dk{grid-template-columns:1fr;gap:16px}
  .dk-cup{width:130px}
  .dk-item{gap:14px;padding:10px}
  .dk-item img{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){
  .dk-layer,.dk-group.on .dk-layer,.dk-ice,.dk-item,.dk-item img{transition:none}
}