:root{
      --bg:#050505;
      --bg-soft:#0a0a0a;
      --text:#f6f3ed;
      --muted:#c8c3bb;
      --gold:#b99a5b;
      --gold-soft:#d8bc7b;
      --line:rgba(185,154,91,.32);
      --max:1180px;
      --panel:rgba(5,5,5,.58);
      --panel-strong:rgba(3,3,3,.76);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:"Noto Serif TC","PingFang TC","Microsoft JhengHei",serif;
      line-height:1.8;
    }

    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}

    .vii-about{
      overflow:hidden;
      background:#050505;
    }

    .vii-wrap{
      width:min(var(--max),calc(100% - 40px));
      margin:auto;
    }

    /* ========== HERO / 起源 ========== */
    .vii-hero{
      position:relative;
      display:grid;
      place-items:center;
      isolation:isolate;
      overflow:hidden;

      /* 保持背景圖原始比例，不再使用 cover 裁切 */
      min-height:0;
      aspect-ratio:1448 / 1086;

      background-image:url("/image/assets/bg_origin.webp");
      background-size:100% auto;
      background-repeat:no-repeat;
      background-position:center top;
      background-color:#050505;
    }

    /* 左右暗角 + 中央輕微提亮 */
    .vii-hero::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 50% 38%,rgba(255,255,255,.035),transparent 34%),
        linear-gradient(
          90deg,
          rgba(0,0,0,.48) 0%,
          rgba(0,0,0,.08) 22%,
          rgba(0,0,0,.08) 78%,
          rgba(0,0,0,.48) 100%
        );
    }

    /* 底部向黑色自然融合，銜接下一張背景 */
    .vii-hero::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:22%;
      z-index:1;
      pointer-events:none;
      background:linear-gradient(
        to bottom,
        rgba(5,5,5,0) 0%,
        rgba(5,5,5,.28) 42%,
        rgba(5,5,5,.78) 78%,
        #050505 100%
      );
    }

    .vii-hero-inner{
    width: min(860px, 82vw);
    margin-bottom: 500px;
    padding: 32px 54px 44px;
    text-align: center;
    position: relative;
    z-index: 2;

      /* 中間深、左右漸隱 */
      background:
        linear-gradient(
          90deg,
          rgba(0,0,0,0) 0%,
          rgba(0,0,0,.46) 10%,
          rgba(0,0,0,.72) 50%,
          rgba(0,0,0,.46) 90%,
          rgba(0,0,0,0) 100%
        );
    }

    .vii-origin-mini{
      display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 14px;
    font-size: clamp(35px, 4.7vw, 58px);;
    font-weight: 400;
    letter-spacing: .03em;
    line-height: 1;
    text-shadow: 0 2px 5px #000;
    }

    .vii-origin-mini .fleur{
      font-family:Georgia,"Times New Roman",serif;
      font-size:28px;
      opacity:.92;
    }

    .vii-kicker{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      color:var(--gold-soft);
      font:500 12px/1.3 Arial,sans-serif;
      letter-spacing:.19em;
      text-transform:uppercase;
      margin-bottom:32px;
    }

    .vii-kicker::before,
    .vii-kicker::after{
      content:"";
      width:48px;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--gold));
    }

    .vii-kicker::after{
      background:linear-gradient(90deg,var(--gold),transparent);
    }

    .vii-hero h1{
    margin: 0 0 24px;
    text-shadow: 0 3px 7px rgba(0, 0, 0, .9);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    opacity: .92;
    }

    .vii-hero p{
      margin:0 auto;
      max-width:700px;
      color:rgba(255,255,255,.93);
      font-size:clamp(15px,1.7vw,19px);
      letter-spacing:.02em;
      text-shadow:0 2px 6px rgba(0,0,0,.9);
    }

    /* ========== COMMON STORY SECTION ========== */
    .vii-section{
      position:relative;
      padding:112px 0;
      background-color:#050505;
      background-repeat:no-repeat;

      /* 關鍵：保持原圖寬高比例，不再 cover 裁切 */
      background-size:100% auto;
      background-position:center top;

      isolation:isolate;
      overflow:hidden;
      margin-top:-1px;
    }

    /* 背景融合層：上、下淡入黑色 + 左右暗角 */
    .vii-section::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        linear-gradient(
          to bottom,
          #050505 0%,
          rgba(5,5,5,.76) 4%,
          rgba(5,5,5,.30) 12%,
          rgba(5,5,5,0) 23%,
          rgba(5,5,5,0) 77%,
          rgba(5,5,5,.30) 88%,
          rgba(5,5,5,.76) 96%,
          #050505 100%
        ),
        linear-gradient(
          90deg,
          rgba(0,0,0,.70) 0%,
          rgba(0,0,0,.22) 30%,
          rgba(0,0,0,.22) 70%,
          rgba(0,0,0,.70) 100%
        );
    }

    .vii-section > .vii-wrap{
      position:relative;
      z-index:2;
    }

    .vii-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      align-items:center;
      gap:78px;
    }

    .vii-grid.reverse .vii-media{order:2}
    .vii-grid.reverse .vii-copy{order:1}

    .vii-copy{
      padding:34px 38px;
      background:
        linear-gradient(
          90deg,
          rgba(0,0,0,.70) 0%,
          rgba(0,0,0,.58) 58%,
          rgba(0,0,0,.08) 100%
        );
    }

    .vii-grid.reverse .vii-copy{
      background:
        linear-gradient(
          90deg,
          rgba(0,0,0,.08) 0%,
          rgba(0,0,0,.58) 42%,
          rgba(0,0,0,.70) 100%
        );
    }

    .vii-eyebrow{
      color:var(--gold);
      font:500 11px/1.3 Arial,sans-serif;
      letter-spacing:.22em;
      text-transform:uppercase;
      margin-bottom:16px;
    }

    .vii-copy h2{
      margin:0 0 20px;
      font-size:clamp(35px,4.7vw,58px);
      font-weight:400;
      letter-spacing:.07em;
      text-shadow:0 3px 6px #000;
    }

    .vii-copy h2 span{
      display:block;
      margin-top:6px;
      color:#c5b9aa;
      font:400 12px/1.5 Arial,sans-serif;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    .vii-copy p{
      margin:0 0 16px;
      color:#d2cbc1;
      font-size:16px;
    }

    .vii-copy .lead{
      color:#f3ede4;
      font-size:18px;
    }

    .vii-note{
      margin-top:24px;
      padding:16px 19px;
      border-left:1px solid var(--gold);
      background:linear-gradient(90deg,rgba(185,154,91,.09),transparent);
      color:#bdb5aa;
      font-size:13px;
    }

    /* ========== PORTRAIT CARD ========== */
    .vii-media{
      min-height:560px;
      position:relative;
      display:grid;
      place-items:center;
      overflow:visible;
      background:transparent;
      border:0;
    }

    .vii-media::after{
      content:"";
      position:absolute;
      z-index:-1;
      width:72%;
      height:72%;
      border-radius:50%;
      background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%);
      filter:blur(4px);
    }

    .vii-media .portrait-art{
      max-height:470px;
      width:auto;
      filter:drop-shadow(0 22px 26px rgba(0,0,0,.65));
    }

    /* ========== 不老神話 ========== */
    .vii-myth{
      min-height:760px;
      background-image:url("/image/assets/bg_myth.webp");
      background-size:100% auto;
      background-repeat:no-repeat;
      background-position:center top;
    }

    /* ========== 秘密 ========== */
    .vii-secret{
      min-height:780px;
      background-image:url("/image/assets/bg_secret_salon.webp");
      background-size:100% auto;
      background-repeat:no-repeat;
      background-position:center top;
    }

    .secret-art-wrap{
      position:relative;
      width:100%;
      min-height:570px;
      display:grid;
      place-items:center;
    }

    .secret-art-wrap .portrait-art{
      max-height:420px;
      transform:translateY(-55px);
    }

    .secret-art-wrap .secret-key{
      position:absolute;
      left:50%;
      bottom:-80px;
      width:min(300px,42%);
      transform:translateX(-50%);
      filter:drop-shadow(0 18px 20px rgba(0,0,0,.75));
    }

    /* ========== 會所 ========== */
    .vii-salon{
      min-height:680px;
      position:relative;
      display:flex;
      align-items:flex-end;
      padding:120px 0;
      isolation:isolate;
      overflow:hidden;
      margin-top:-1px;

      background-image:url("/image/assets/bg_secret_salon.webp");
      background-size:100% auto;
      background-repeat:no-repeat;
      background-position:center bottom;
      background-color:#050505;
    }

    /* 會所背景上下融合 */
    .vii-salon::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        linear-gradient(
          to bottom,
          #050505 0%,
          rgba(5,5,5,.72) 6%,
          rgba(5,5,5,.22) 18%,
          rgba(5,5,5,0) 38%,
          rgba(5,5,5,0) 72%,
          rgba(5,5,5,.30) 87%,
          #050505 100%
        ),
        radial-gradient(circle at 50% 72%,rgba(255,255,255,.035),transparent 32%),
        linear-gradient(
          90deg,
          rgba(0,0,0,.55) 0%,
          rgba(0,0,0,.05) 22%,
          rgba(0,0,0,.05) 78%,
          rgba(0,0,0,.55) 100%
        );
    }

    .vii-salon .vii-wrap{
      position:relative;
      z-index:2;
    }

    .vii-salon .panel{
      width:min(820px,100%);
      margin:0 auto;
      padding:34px 44px 38px;
      text-align:center;
      background:
        linear-gradient(
          90deg,
          rgba(0,0,0,0) 0%,
          rgba(0,0,0,.62) 12%,
          rgba(0,0,0,.76) 50%,
          rgba(0,0,0,.62) 88%,
          rgba(0,0,0,0) 100%
        );
      border:0;
      backdrop-filter:none;
    }

    .vii-salon h2{
      margin:0 0 18px;
      font-size:clamp(35px,4.7vw,58px);
      font-weight:400;
      letter-spacing:.08em;
      text-shadow:0 3px 7px #000;
    }

    .vii-salon p{
      margin:0;
      color:#ddd5c9;
      font-size:15px;
    }

    /* ========== TODAY ========== */
    .vii-today{
      position:relative;
      z-index:2;
      margin-top:-1px;
      padding:105px 0 95px;
      background:
        linear-gradient(180deg, #040404 0%, #070707 16%, #000000 100%);
      color:#eee;
      border-top:0;
    }

    .vii-today .vii-eyebrow{color:var(--gold)}

    .vii-today h2{
      margin:0 0 24px;
      font-size:clamp(34px,5vw,58px);
      font-weight:400;
      letter-spacing:.04em;
    }

    .vii-today > .vii-wrap > p{
      max-width:860px;
      color:#aaa39a;
    }

    .vii-pillars{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:42px;
    }

    .vii-pillar{
      padding:28px 26px;
      background:linear-gradient(180deg,#0d0d0d,#090909);
      border:1px solid var(--line);
    }

    .vii-pillar b{
      display:block;
      margin-bottom:8px;
      color:#fff;
      font-size:18px;
      font-weight:500;
    }

    .vii-pillar span{
      display:block;
      color:#aaa39a;
      font-size:14px;
      line-height:1.7;
    }

    /* ========== CTA ========== */
    .vii-cta{
      padding:88px 20px;
      text-align:center;
      background:#000;
      border-top:1px solid var(--line);
    }

    .vii-cta h2{
      margin:0 0 12px;
      font-size:clamp(30px,4vw,48px);
      font-weight:400;
    }

    .vii-cta p{
      margin:0 0 28px;
      color:#aaa39a;
    }

    .vii-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:180px;
      height:48px;
      padding:0 26px;
      border:1px solid var(--gold);
      color:#f6f0e4;
      font-family:Arial,sans-serif;
      font-size:13px;
      letter-spacing:.08em;
      transition:.25s ease;
    }

    .vii-btn:hover{
      background:var(--gold);
      color:#090909;
    }

    /* ========== MOBILE ========== */
    @media (max-width:820px){
      .vii-wrap{
        width:min(100% - 28px,var(--max));
      }

      .vii-hero{
        min-height:520px;
        aspect-ratio:auto;
        background-size:auto 100%;
        background-position:center top;
      }

      .vii-hero-inner{
        width:94%;
        margin-top:-10px;
        padding:24px 18px 34px;
      }

      .vii-origin-mini{
        gap:14px;
        font-size:30px;
      }

      .vii-origin-mini .fleur{font-size:23px}

      .vii-kicker{
        margin-bottom:24px;
        font-size:10px;
      }

      .vii-kicker::before,
      .vii-kicker::after{
        width:34px;
      }

      .vii-section{
        padding:76px 0;
        background-size:auto 100%;
        background-position:center top;
      }

      .vii-grid{
        grid-template-columns:1fr;
        gap:28px;
      }

      .vii-grid.reverse .vii-media,
      .vii-grid.reverse .vii-copy{
        order:initial;
      }

      .vii-copy,
      .vii-grid.reverse .vii-copy{
        padding:26px 22px;
        background:linear-gradient(
          90deg,
          rgba(0,0,0,.18),
          rgba(0,0,0,.72) 18%,
          rgba(0,0,0,.72) 82%,
          rgba(0,0,0,.18)
        );
      }

      .vii-media{
        min-height:390px;
      }

      .vii-media .portrait-art{
        max-height:360px;
      }

      .secret-art-wrap{
        min-height:430px;
      }

      .secret-art-wrap .portrait-art{
        max-height:330px;
        transform:translateY(-35px);
      }

      .secret-art-wrap .secret-key{
        width:min(245px,56%);
      }

      .vii-salon{
        min-height:590px;
        padding:72px 0;
        background-size:auto 100%;
        background-position:center bottom;
      }

      .vii-salon .panel{
        padding:26px 20px 30px;
      }

      .vii-pillars{
        grid-template-columns:1fr;
      }
    }
    
    .vii-scroll-down{
  position:absolute;
  left:50%;
  bottom:-250px;
  transform:translateX(-50%);

  width:46px;
  height:46px;

  display:block;

  border:1px solid rgb(255 216 125);
  border-radius:50%;

  font-size:0;
  line-height:0;
  text-decoration:none;

  cursor:pointer;

  transition:
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;
}
#story-myth{
  scroll-margin-top:18vh;
}
/* 箭頭 */
.vii-scroll-down::before{
  content:"";

  position:absolute;
  left:50%;
  top:50%;

  width:10px;
  height:10px;

  border-right:1.5px solid #e9c677;
  border-bottom:1.5px solid #e9c677;

  transform:
    translate(-50%,-65%)
    rotate(45deg);

  animation:viiArrowMove 1.8s ease-in-out infinite;
}

.vii-scroll-down:hover{
  border-color:#d8bc7b;
  background:rgba(185,154,91,.10);

  transform:
    translateX(-50%)
    scale(1.06);
}

@keyframes viiArrowMove{

  0%,
  100%{
    transform:
      translate(-50%,-70%)
      rotate(45deg);

    opacity:.55;
  }

  50%{
    transform:
      translate(-50%,-30%)
      rotate(45deg);

    opacity:1;
  }
}

@media (max-width: 825px) {
    .vii-scroll-down{
            bottom: -400px;
    }
    #story-myth {
    scroll-margin-top: 10vh;
}
}