:root{
    --g900:#0a2e5c; --g700:#1457a0; --g500:#2f86d6; --g300:#8fc1ee;
    --g100:#e6f0fb; --g50:#f2f8fd;
    --ink:#16201b; --muted:#5f6b63; --line:#e4ebe6; --white:#fff;
    --amber:#c98a17;
    --maxw:1160px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--ink); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased;}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
  .eyebrow{font-size:13px; font-weight:700; letter-spacing:2px; color:var(--g500); text-transform:uppercase;}
  .h2{font-size:30px; font-weight:800; letter-spacing:-1px; color:var(--ink);}
  .h2 .em{color:var(--g700);}
  .sec{padding:72px 0;}
  .sec-sub{color:var(--muted); font-size:16px; margin-top:8px;}


  /* hero */
  .hero{position:relative; min-height:520px; display:flex; align-items:flex-end; color:#fff; overflow:hidden;}
  .hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .hero .ov{position:absolute; inset:0; background:
    linear-gradient(100deg, rgba(7,28,56,.88) 0%, rgba(9,34,66,.60) 40%, rgba(10,40,75,.22) 72%, rgba(10,40,75,.50) 100%),
    linear-gradient(0deg, rgba(10,40,75,.60), rgba(0,0,0,0) 46%);}
  .hero .inner{position:relative; z-index:2; padding:54px 0 50px; width:100%;}
  .hero .acc{width:60px; height:7px; background:var(--g500); border-radius:5px; margin-bottom:22px;}
  .hero h1{font-size:50px; font-weight:900; line-height:1.22; letter-spacing:-1.5px; text-shadow:0 3px 26px rgba(0,0,0,.55); max-width:680px;}
  .hero h1 .em{color:#7fc3ff;}
  .hero p{margin-top:18px; font-size:19px; color:#eaf7f0; max-width:600px; text-shadow:0 1px 12px rgba(0,0,0,.5); font-weight:500;}
  .trust{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .trust span{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
    padding:8px 16px; border-radius:30px; font-size:14px; font-weight:600;}
  .hero .btns{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}
  .btn{display:inline-flex; align-items:center; gap:8px; font-weight:800; border-radius:12px; padding:15px 26px; font-size:16px;}
  .btn-primary{background:#fff; color:var(--g900);}
  .btn-ghost{background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.5);}
  @media(max-width:640px){ .hero h1{font-size:33px;} .hero{min-height:460px;} }

  /* confirmed departures */
  .confirm{background:var(--g50);}
  .conf-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:28px;}
  .conf-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; position:relative;
    transition:transform .15s, box-shadow .15s;}
  .conf-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(14,77,52,.10);}
  .dbadge{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; padding:6px 13px; border-radius:8px;}
  .dbadge.fix{background:var(--g700); color:#fff;}
  .dbadge.hot{background:#fff; color:var(--amber); border:1.5px solid var(--amber);}
  .conf-card h3{font-size:20px; font-weight:800; margin:14px 0 4px; letter-spacing:-.5px;}
  .conf-card .days{color:var(--g500); font-weight:800; font-size:14px;}
  .conf-card .date{margin-top:12px; font-size:15px; font-weight:700; color:var(--ink);}
  .conf-card .price{margin-top:6px; font-size:22px; font-weight:900; color:var(--g700);}
  .conf-card .go{margin-top:14px; font-size:14px; font-weight:700; color:var(--g700); display:inline-flex; align-items:center; gap:5px;}

  /* style chooser */
  .style-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:28px;}
  .style-card{display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:#fff;
    border:1px solid var(--line); border-radius:16px; padding:22px; transition:.15s;}
  .style-card:hover{border-color:var(--g300); background:var(--g50);}
  .style-ic{width:48px; height:48px; border-radius:12px; background:var(--g100); color:var(--g700);
    display:flex; align-items:center; justify-content:center; font-size:24px;}
  .style-card b{font-size:17px; font-weight:800;}
  .style-card small{font-size:13px; color:var(--muted);}

  /* lineup */
  .line-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:20px; margin-top:30px;}
  .prod{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
    transition:transform .15s, box-shadow .15s;}
  .prod:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(14,77,52,.12);}
  .prod .ph{position:relative; height:190px; overflow:hidden;}
  .prod .ph img{width:100%; height:100%; object-fit:cover;}
  .prod .pn{position:absolute; top:12px; left:12px; background:rgba(14,77,52,.92); color:#fff;
    font-weight:900; font-size:15px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .prod .tag{position:absolute; top:14px; right:12px; background:#fff; color:var(--g700);
    font-size:12px; font-weight:800; padding:5px 11px; border-radius:20px;}
  .prod .body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1;}
  .prod h3{font-size:19px; font-weight:800; letter-spacing:-.5px;}
  .prod .meta{margin-top:4px; font-size:14px; color:var(--g500); font-weight:800;}
  .prod .diff{margin-top:10px; font-size:14px; color:var(--muted); line-height:1.5; flex:1;}
  .prod .row{margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .prod .price{font-size:21px; font-weight:900; color:var(--g700);}
  .prod .dep{margin-top:12px; background:var(--g50); border-left:5px solid var(--g500); border-radius:0 8px 8px 0;
    padding:10px 12px; font-size:13px; font-weight:700; color:var(--g900);}
  .prod .more{margin-top:14px; text-align:center; background:var(--g700); color:#fff; font-weight:800;
    padding:12px; border-radius:10px; font-size:15px;}

  /* compare strip */
  .compare{background:var(--g900); color:#fff; border-radius:20px; padding:36px 32px; margin-top:10px;
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .compare h3{font-size:24px; font-weight:800; letter-spacing:-.5px;}
  .compare p{color:#bfe6d2; margin-top:6px; font-size:15px;}
  .compare .btn-primary{background:#7fc3ff; color:var(--g900);}

  /* why + faq */
  .why{background:var(--g50);}
  .why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:28px;}
  .why-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;}
  .why-card .ic{font-size:30px;}
  .why-card b{display:block; font-size:17px; font-weight:800; margin:10px 0 4px;}
  .why-card small{font-size:14px; color:var(--muted);}
  .faq{margin-top:40px; max-width:780px;}
  .faq h3{font-size:20px; font-weight:800; margin-bottom:14px;}
  details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 18px; margin-bottom:10px;}
  summary{cursor:pointer; list-style:none; padding:16px 0; font-weight:700; font-size:16px; display:flex; justify-content:space-between; align-items:center;}
  summary::-webkit-details-marker{display:none;}
  summary::after{content:"+"; color:var(--g500); font-size:22px; font-weight:400;}
  details[open] summary::after{content:"–";}
  details p{padding:0 0 18px; color:var(--muted); font-size:15px; line-height:1.7;}

  /* sticky cta */
  .cta-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--g900); color:#fff;
    display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px;
    box-shadow:0 -6px 24px rgba(0,0,0,.14);}
  .cta-bar .t{font-weight:800; font-size:16px;}
  .cta-bar a{background:#7fc3ff; color:var(--g900); font-weight:900; padding:11px 22px; border-radius:10px; font-size:15px;}
  .cta-bar .kk{background:#fee500; color:#191600;}
  @media(max-width:640px){ .cta-bar .t{display:none;} .cta-bar{gap:8px;} .cta-bar a{flex:1; text-align:center;} }
  body{padding-bottom:70px;}