:root{color-scheme:light;--canvas:#f4f5f7;--ink:#192222;--muted:#788282;--teal:#007779;--orange:#ff9b17;--line:#e7ebeb;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);min-width:280px}a{-webkit-tap-highlight-color:transparent}.destinations{min-height:100svh;max-width:1192px;margin:auto;padding:52px 36px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-content:center}.panel{min-width:0;position:relative;display:flex;flex-direction:column;min-height:632px;padding:30px 34px 28px;border:1px solid #e0e5e5;border-radius:28px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 3px 9px #152c2c03;transition:transform .32s cubic-bezier(.2,.75,.25,1),box-shadow .32s,border-color .32s;isolation:isolate}.panel-top,.panel-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.category{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:1.6px;font-weight:650;color:#687776}.index{font-size:12px;font-weight:500;color:#a7b1b0;font-variant-numeric:tabular-nums}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px #0077790c}.journal-icon{font-size:17px;line-height:1;color:var(--teal)}.artwork{height:320px;max-width:100%;position:relative;overflow:hidden;margin:24px 0 7px;pointer-events:none}.artwork img{position:absolute;max-width:none;left:50%;transform:translateX(-50%);object-fit:contain;mix-blend-mode:multiply}.artwork-shop img{width:726px;height:484px;top:-45px}.artwork-blog img{width:1050px;height:700px;top:-180px}.panel-copy{margin-top:auto}.panel-copy h1,.panel-copy h2{margin:0;font-size:35px;font-weight:750;line-height:1.35;letter-spacing:-1.6px}.title-dot{color:var(--teal);margin-left:3px}.panel-copy p{margin:13px 0 31px;font-size:14px;color:var(--muted);line-height:1.8;letter-spacing:.1px}.panel-bottom{padding-top:22px;border-top:1px solid var(--line)}.address{font-size:11px;letter-spacing:.3px;color:#95a09e;overflow-wrap:anywhere}.action{display:flex;align-items:center;gap:15px;white-space:nowrap;font-size:12px;font-weight:650;color:#364845}.arrow{display:grid;place-items:center;width:34px;height:34px;background:#eff6f4;border:1px solid #e3eeea;border-radius:50%;font-size:19px;color:var(--teal);transition:transform .3s,background .3s,color .3s}.panel:focus-visible{outline:3px solid var(--teal);outline-offset:5px}.panel-shop .arrow{background:#fff3df;border-color:#ffead0;color:#9f5e00}.panel:active{transform:translateY(-3px)}
@media(hover:hover){.panel:hover{transform:translateY(-12px);box-shadow:0 26px 52px -20px #123f3b30,0 8px 16px -12px #123f3b20;border-color:#a9c7c2}.panel:hover .arrow{transform:rotate(6deg);background:var(--teal);color:white;border-color:var(--teal)}.panel-shop:hover .arrow{background:var(--orange);border-color:var(--orange);color:#151515}}
@media(min-width:1400px){.destinations{max-width:1272px;gap:36px}.panel{padding:34px 42px 32px;min-height:670px}.artwork{margin-top:30px;height:342px}.panel-copy h1,.panel-copy h2{font-size:38px}}
@media(max-width:760px){.destinations{grid-template-columns:1fr;max-width:530px;padding:28px 20px;gap:22px}.panel{min-height:580px;padding:25px 28px;border-radius:24px}.artwork{margin-top:20px;height:300px}.panel-copy h1,.panel-copy h2{font-size:31px}.panel-copy p{margin-bottom:24px}.panel-bottom{padding-top:19px}}
@media(max-width:360px){.destinations{padding:18px 12px}.panel{padding:22px 20px}.artwork-shop img{width:650px;height:433px;top:-40px}.artwork-blog img{width:950px;height:633px;top:-164px}.artwork{height:275px}.panel-bottom{gap:8px}.action{gap:7px}.address{font-size:10px}}
.artwork img{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;transform:none;clip-path:none}
.panel[aria-disabled="true"]{cursor:default}.panel[aria-disabled="true"]:hover,.panel[aria-disabled="true"]:active{transform:none;box-shadow:0 3px 9px #152c2c03;border-color:#e0e5e5}.panel[aria-disabled="true"]:hover .arrow{transform:none;background:#eff6f4;color:var(--teal);border-color:#e3eeea}
@media(min-width:761px) and (max-height:760px){.destinations{padding-top:30px;padding-bottom:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.panel:hover,.panel:active{transform:none}}
.panel-copy .slogan{font-size:16px;font-weight:600;letter-spacing:.5px;color:#52615f}.panel-copy .slogan strong{margin-left:3px;color:var(--teal);font-size:1.12em;letter-spacing:.08em}
/* ---- 两栏布局 + 高度自适应屏幕（2026-10-20） ---- */
.panel-cdk .arrow{background:#eef4ff;border-color:#e0e9ff;color:#2f5bd0}
.panel-cdk .status-dot{background:#2f5bd0;box-shadow:0 0 0 4px #2f5bd00c}
@media(min-width:761px){
  .destinations{
    min-height:100svh;
    max-width:1192px;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:clamp(12px,2.2vh,28px);
    padding:clamp(20px,6vh,58px) clamp(18px,3vw,46px);
    align-content:stretch;
  }
  .panel{
    min-height:0;
    padding:clamp(14px,2.2vh,30px) clamp(16px,1.8vw,34px) clamp(12px,1.8vh,26px);
    overflow:hidden;
  }
  .panel-shop{grid-row:1 / span 2}
  .panel-blog,.panel-cdk{min-height:0}
  .panel-shop .artwork{height:clamp(130px,33vh,330px);margin:clamp(8px,1.8vh,26px) 0 4px}
  .panel-blog .artwork,.panel-cdk .artwork{height:clamp(46px,10.5vh,140px);margin:clamp(4px,1vh,14px) 0 2px}
  .panel-shop .panel-copy h1{font-size:clamp(22px,3.3vh,42px)}
  .panel-copy h2{font-size:clamp(17px,2.1vh,34px);letter-spacing:-1px}
  .panel-copy p{font-size:clamp(11px,1.2vh,14px);margin:clamp(3px,0.9vh,12px) 0 clamp(6px,1.4vh,24px)}
  .panel-bottom{padding-top:clamp(7px,1.3vh,20px)}
  .panel-blog .action,.panel-cdk .action{font-size:clamp(10px,1.05vh,12px);gap:clamp(7px,1.2vh,14px)}
  .panel-blog .arrow,.panel-cdk .arrow{width:clamp(24px,3.2vh,34px);height:clamp(24px,3.2vh,34px);font-size:clamp(14px,1.8vh,19px)}
  .panel-blog .category,.panel-cdk .category{font-size:clamp(9px,0.95vh,11px)}
  .panel-blog .address,.panel-cdk .address{font-size:clamp(9px,0.95vh,11px)}
}
@media(min-width:1200px){
  .destinations{max-width:1272px}
}