:root {
      --bg: #faf9f6;
      --surface: #ffffff;
      --ink: #1a1a18;
      --muted: #6b6a64;
      --line: #e6e4dd;
      --accent: #c2410c;
      --accent-soft: #fdf0e9;
      --r: 14px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.6;
      padding: 0 16px;
    }

    .wrap {
      max-width: 600px;
      margin: 0 auto;
      padding: 40px 0 64px;
    }

    header h1 {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    header p {
      color: var(--muted);
      font-size: 14px;
      margin-top: 6px;
    }

    .field {
      margin-top: 22px;
    }

    .field-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .req {
      color: var(--accent);
      font-size: 11px;
    }

    .opts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .opt {
      padding: 9px 16px;
      border: 1.5px solid var(--line);
      background: var(--surface);
      border-radius: 100px;
      font-size: 14px;
      color: var(--ink);
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }

    .opt:hover {
      border-color: var(--accent);
    }

    .opt.on {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      font-weight: 600;
    }

    .actions {
      display: flex;
      gap: 8px;
      margin-top: 28px;
    }

    .btn {
      flex: 1;
      padding: 16px;
      background: var(--ink);
      color: #fff;
      border: none;
      border-radius: var(--r);
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: opacity 0.15s;
    }

    .btn:hover:not(:disabled) {
      opacity: 0.88;
    }

    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .btn-sub {
      flex: 0 0 auto;
      padding: 16px 20px;
      background: var(--surface);
      color: var(--ink);
      border: 1.5px solid var(--line);
    }

    .btn-sub:hover {
      border-color: var(--accent);
      opacity: 1;
    }

    .status {
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      padding: 28px 0;
    }

    .status.err {
      color: var(--accent);
    }

    .weather {
      background: var(--accent-soft);
      border-radius: var(--r);
      padding: 14px 16px;
      margin: 24px 0 16px;
      font-size: 14px;
      color: #7c2d12;
    }

    .section-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      margin: 24px 0 12px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .cards.single {
      grid-template-columns: 1fr;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.15s;
    }

    .card:hover {
      border-color: var(--accent);
    }

    .card-thumb {
      width: 100%;
      height: 180px;
      background: #eee9e0 center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
    }

    .card-body {
      padding: 14px;
    }

    .card-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }

    .card-name {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.3px;
    }

    .card-cat {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }

    .card-reason {
      margin-top: 8px;
      font-size: 13px;
      color: #44433f;
    }

    .card-meta {
      margin-top: 8px;
      font-size: 11px;
      color: var(--muted);
    }

    .card-map {
      color: var(--accent);
      font-weight: 600;
    }