:root{
      /* Light theme */
      --bg0: #FFFFFF;
      --bg1: #F0F2F5;
      --ink: #0D0D0D;
      --muted: rgba(0, 0, 0, 0.72);
      --subtle: rgba(0, 0, 0, 0.10);
      --line: rgba(0, 0, 0, 0.14);
      --gold: #B58A3F;
      --shadow: 0 28px 90px rgba(0,0,0,.12);
      --radius: 18px;
      --max: 1100px;
    }

    [data-theme='dark'] {
      /* Dark theme */
      --bg0:#070A0F;         /* near-black */
      --bg1:#0B111C;         /* deep indigo charcoal */
      --ink:#F4F1EA;         /* warm ivory */
      --muted:rgba(244,241,234,.72);
      --subtle:rgba(244,241,234,.10);
      --line:rgba(244,241,234,.14);
      --gold:#D7B56D;        /* warm gold accent */
      --shadow: 0 28px 90px rgba(0,0,0,.55);
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(900px 520px at 15% 10%, rgba(215,181,109,.12), transparent 55%),
        radial-gradient(900px 560px at 80% 20%, rgba(244,241,234,.06), transparent 60%),
        linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg0) 100%);
      font-family: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      letter-spacing: .01em;
      transition: background .3s ease, color .3s ease;
    }

    a{ color:inherit; text-decoration:none; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }

    /* Top bar */
    header{
      position:sticky; top:0;
      backdrop-filter: blur(12px);
      background: rgba(var(--bg0),.58);
      border-bottom: 1px solid var(--line);
      z-index:10;
      transition: background .3s ease, border .3s ease;
    }

    [data-theme='dark'] header {
      background: rgba(7,10,15,.58);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap: 14px;
    }
    .brand{
      display:flex; flex-direction:column; gap:2px;
      line-height:1.05;
    }
    .brand .name{
      font-family:"Cormorant Garamond", serif;
      font-weight:600;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--gold);
      font-size: 18px;
    }
    .brand .sub{
      font-size: 12px;
      letter-spacing:.10em;
      color: var(--muted);
    }
    nav ul{
      list-style:none; margin:0; padding:0;
      display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end;
    }
    nav a{
      font-size:13px;
      color: var(--muted);
      padding: 8px 10px;
      border: 1px solid transparent;
      border-radius:999px;
      transition: .18s ease;
    }
    nav a:hover{
      color: var(--ink);
      border-color: var(--line);
      background: var(--subtle);
    }

    .theme-toggle {
      padding: 8px;
      border-radius: 999px;
    }

    .theme-toggle svg {
      display: block;
    }

    /* Hero */
    .hero{ padding: 52px 0 26px; }
    .heroCard{
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(215,181,109,.10), transparent 35%),
        linear-gradient(180deg, rgba(244,241,234,.05), rgba(244,241,234,.02));
      box-shadow: var(--shadow);
      overflow:hidden;
      position: relative;
      transition: background .3s ease, border .3s ease, box-shadow .3s ease;
    }

    [data-theme='dark'] .heroCard {
       background:
        linear-gradient(135deg, rgba(215,181,109,.10), transparent 35%),
        linear-gradient(180deg, rgba(244,241,234,.05), rgba(244,241,234,.02));
    }

    [data-theme='light'] .heroCard {
       background:
        linear-gradient(135deg, rgba(215,181,109,.10), transparent 35%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
    }
    /* subtle “alley light” pattern via inline SVG background */
    .heroCard:before{
      content:"";
      position:absolute; inset:-2px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='560' viewBox='0 0 900 560'%3E%3Cg fill='none' stroke='%23F4F1EA' stroke-opacity='.07'%3E%3Cpath d='M80 560V80c0-22 18-40 40-40h640c22 0 40 18 40 40v480'/%3E%3Cpath d='M160 560V120c0-22 18-40 40-40h480c22 0 40 18 40 40v440'/%3E%3Cpath d='M240 560V170c0-22 18-40 40-40h320c22 0 40 18 40 40v390'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position: right -120px top -120px;
      background-size: 780px auto;
      pointer-events:none;
      opacity:.9;
    }
    [data-theme='light'] .heroCard:before {
      stroke-opacity: .1;
    }
    .heroInner{
      position:relative;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      padding: 30px;
    }
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(7,10,15,.35);
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.08em;
      width: fit-content;
    }
    .dot{ width:4px; height:4px; border-radius:99px; background: rgba(244,241,234,.35); }
    h1{
      margin: 14px 0 12px;
      font-family:"Cormorant Garamond", serif;
      font-weight: 600;
      letter-spacing:.04em;
      font-size: clamp(34px, 4.6vw, 54px);
      line-height:1.04;
    }
    .lead{
      margin: 0;
      color: var(--muted);
      line-height: 1.8;
      font-size: 14.5px;
      max-width: 58ch;
    }
    .lead .gold{ color: var(--gold); }
    .ctaRow{
      margin-top: 18px;
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(244,241,234,.04);
      color: var(--ink);
      font-size: 14px;
      transition: .18s ease;
      cursor:pointer;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(244,241,234,.06); }
    .btn.primary{
      border-color: rgba(215,181,109,.50);
      background: rgba(215,181,109,.14);
    }
    .btn.ghost{
      background: transparent;
      border-color: rgba(244,241,234,.18);
    }

    /* Side info */
    .side{
      display:flex; flex-direction:column; gap: 12px;
    }
    .panel{
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(7,10,15,.35);
      padding: 16px;
    }
    .metaLabel{
      font-size: 12px;
      letter-spacing:.10em;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .metaValue{
      font-size: 14px;
      line-height: 1.7;
      color: var(--ink);
    }
    .metaValue b{ color: var(--gold); font-weight:600; }

    /* Sections */
    section{ padding: 34px 0; }
    .sectionHead{
      display:flex; align-items:baseline; justify-content:space-between;
      gap: 12px; margin-bottom: 14px;
    }
    .sectionHead h2{
      margin:0;
      font-family:"Cormorant Garamond", serif;
      letter-spacing:.08em;
      font-size: 26px;
      font-weight:600;
    }
    .sectionHead p{ margin:0; color: var(--muted); font-size: 13px; }

    .grid{
      display:grid;
      gap: 12px;
    }
    .grid.two{ grid-template-columns: 1fr 1fr; }
    .grid.three{ grid-template-columns: repeat(3, 1fr); }

    .card{
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(244,241,234,.03);
      padding: 18px;
    }
    .card h3{
      margin:0 0 10px;
      font-size: 15px;
      letter-spacing:.02em;
      font-weight:600;
    }
    .card p{
      margin:0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.75;
    }
    .rule{
      border-top: 1px solid var(--line);
      margin: 18px 0 0;
      padding-top: 14px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.7;
    }

    /* Map */
    .mapWrap{
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(7,10,15,.35);
      overflow:hidden;
      box-shadow: var(--shadow);
    }
    .mapAspect{
      position:relative;
      width:100%;
      aspect-ratio: 16 / 9;
      min-height: 320px;
    }
    .mapAspect iframe{
      position:absolute; inset:0;
      width:100%; height:100%;
      border:0;
      filter: saturate(0.92) contrast(1.02);
    }

    /* Footer */
    footer{
      border-top: 1px solid var(--line);
      padding: 26px 0 34px;
      color: var(--muted);
      font-size: 12px;
    }
    .foot{
      display:flex; justify-content:space-between; gap: 12px; flex-wrap:wrap;
      align-items:flex-start;
    }

    /* Small animation */
    .fadeIn{
      animation: fade .6s ease both;
    }
    @keyframes fade{
      from{ opacity:0; transform: translateY(6px); }
      to{ opacity:1; transform: translateY(0); }
    }

    /* Form Styles */
    .form-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        font-size: 14px;
        color: var(--muted);
        margin-bottom: 8px;
        letter-spacing: .08em;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 12px;
        font-size: 14px;
        color: var(--ink);
        background-color: var(--subtle);
        border: 1px solid var(--line);
        border-radius: 12px;
        transition: .18s ease;
    }

    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--gold);
        background-color: transparent;
    }

    .form-group textarea {
        resize: vertical;
        min-height: 120px;
    }

    /* Responsive */
    @media (max-width: 900px){
      .heroInner{ grid-template-columns: 1fr; }
      .grid.two, .grid.three{ grid-template-columns: 1fr; }
      .mapAspect{ min-height: 280px; }
    }