:root{
      /* Light (default) */
      --bg:#f6f7fb;
      --surface:#ffffff;
      --text:#0b1220;
      --muted:#5b6476;
      --line:rgba(10,20,40,.12);
      --shadow:0 18px 60px rgba(10,20,40,.12);
      --accent:#7c3aed;
      --accent2:#16a34a;
      --glass:rgba(255,255,255,.72);
    }
    [data-theme="dark"]{
      --bg:#0b0f14;
      --surface:#111827;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --line:rgba(255,255,255,.12);
      --shadow:0 18px 60px rgba(0,0,0,.35);
      --accent:#7c3aed;
      --accent2:#22c55e;
      --glass:rgba(17,24,39,.72);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
      background:
        radial-gradient(900px 500px at 15% 10%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
        radial-gradient(900px 500px at 85% 20%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 60%),
        var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    a{color:inherit; text-decoration:none}
    .wrap{max-width:1040px; margin:0 auto; padding:28px 18px 70px;}
    .top{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding:10px 0 22px;
      position:sticky; top:0;
      background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
      backdrop-filter: blur(10px);
      z-index: 10;
    }
    .brand{display:flex; align-items:center; gap:12px;}
    .logo{
      width:42px; height:42px; border-radius:14px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 95%, #fff), color-mix(in srgb, var(--accent2) 75%, #fff));
      box-shadow: var(--shadow);
      flex:0 0 auto;
    }
    .brand h1{margin:0; font-size:18px; letter-spacing:.2px}
    .brand p{margin:0; color:var(--muted); font-size:13px}

    .nav{
      display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
      align-items:center;
    }
    .pill{
      border:1px solid var(--line);
      padding:8px 12px; border-radius:999px;
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      font-size:13px;
    }

    .toggle, .select, .tinyBtn{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px; border-radius:999px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      cursor:pointer;
      font-size:13px;
      user-select:none;
    }
    .toggle svg{width:16px; height:16px; opacity:.85}

    .select{
      cursor:default;
      padding:6px 10px;
    }
    .select select{
      border:none; outline:none; background:transparent;
      color:var(--text); font-size:13px;
      cursor:pointer;
    }
    .tinyBtn{padding:8px 10px}
    .tinyBtn:hover{transform: translateY(-1px)}
    .tinyBtn:active{transform: scale(.99)}

    .hero{
      border:1px solid var(--line);
      background: var(--glass);
      border-radius:22px;
      padding:26px 22px;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero::after{
      content:"";
      position:absolute; inset:-60px -60px auto auto;
      width:220px; height:220px;
      background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%);
      transform: rotate(18deg);
      pointer-events:none;
    }
    .kicker{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px; border-radius:999px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      color:var(--muted);
      font-size:13px;
    }
    .dot{width:8px; height:8px; border-radius:99px; background:var(--accent2)}
    .title{margin:10px 0 6px; font-size:34px; letter-spacing:-.6px}
    .subtitle{margin:0; color:var(--muted); font-size:16px; max-width:72ch}

    .ctaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px; border-radius:14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      font-size:14px;
      cursor:pointer;
    }
    .btn.primary{
      border-color: color-mix(in srgb, var(--accent) 55%, transparent);
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent) 25%, transparent));
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:14px;
      margin-top:14px;
    }
    .card{
      grid-column: span 6;
      border:1px solid var(--line);
      background: var(--glass);
      border-radius:18px;
      padding:18px;
      box-shadow: 0 10px 30px rgba(0,0,0,.12);
    }
    [data-theme="dark"] .card{box-shadow: 0 10px 30px rgba(0,0,0,.25)}
    .card h3{margin:0 0 8px; font-size:16px}
    .card p{margin:0; color:var(--muted); font-size:14px}

    .list{margin:12px 0 0; padding:0; list-style:none}
    .list li{
      padding:10px 10px;
      border-top:1px dashed color-mix(in srgb, var(--line) 90%, transparent);
      font-size:14px;
      display:flex; gap:10px; align-items:flex-start;
    }
    .badge{
      flex:0 0 auto;
      margin-top:2px;
      font-size:12px;
      padding:3px 8px;
      border-radius:999px;
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      color: color-mix(in srgb, var(--text) 92%, transparent);
    }

    .quote{
      margin-top:14px;
      border:1px solid color-mix(in srgb, var(--accent2) 28%, transparent);
      background: color-mix(in srgb, var(--accent2) 10%, transparent);
      border-radius:18px;
      padding:14px 16px;
      font-size:14px;
    }

    .mini{
      display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
      align-items:center;
    }
    .qbox{
      flex:1 1 280px;
      border:1px dashed var(--line);
      border-radius:14px;
      padding:12px 14px;
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      color:var(--text);
    }
    .qbox small{display:block; color:var(--muted); margin-bottom:6px}
    .qtext{font-weight:600}

    footer{
      margin-top:22px;
      color:var(--muted);
      font-size:12px;
      text-align:center;
      opacity:.95;
    }

    /* ====== 이모지 버튼 + 입력 모달 ====== */
    .liText{flex:1 1 auto; padding-top:2px;}
    .emojiBtn{
      flex:0 0 auto;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      border-radius:12px;
      padding:6px 10px;
      cursor:pointer;
      line-height:1;
      font-size:16px;
      transition: transform .12s ease;
    }
    .emojiBtn:active{transform: scale(.98)}
    .emojiBtn:hover{transform: translateY(-1px)}
    .emojiBtn:focus{
      outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
      outline-offset: 2px;
    }

    .modalOverlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.45);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index: 999;
    }
    .modalOverlay.open{display:flex;}

    .modal{
      width:min(680px, 100%);
      border:1px solid var(--line);
      background: var(--glass);
      border-radius:18px;
      box-shadow: var(--shadow);
      padding:16px;
      backdrop-filter: blur(10px);
    }
    .modalHeader{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .modalTitle{margin:0; font-size:15px; letter-spacing:-.2px;}
    .modalSub{margin:6px 0 0; color:var(--muted); font-size:13px;}
    .closeBtn{
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      border-radius:12px;
      padding:6px 10px;
      cursor:pointer;
      font-size:14px;
      line-height:1;
    }
    .modalTextarea{
      width:100%;
      min-height:120px;
      resize:vertical;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 70%, transparent);
      border-radius:14px;
      padding:12px 12px;
      color:var(--text);
      font-size:14px;
      outline:none;
      margin-top:10px;
    }
    .modalActions{
      display:flex;
      gap:10px;
      justify-content:flex-end;
      margin-top:10px;
      flex-wrap:wrap;
    }

    /* ===== (추가) 공유/내보내기 UI ===== */
    .toolbar{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top:12px;
    }
    .toast{
      position:fixed;
      left:50%; bottom:18px;
      transform:translateX(-50%);
      padding:10px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background: var(--glass);
      box-shadow: var(--shadow);
      font-size:13px;
      color:var(--text);
      display:none;
      z-index:1000;
    }
    .toast.show{display:block;}

    /* Responsive */
    @media (max-width: 820px){
      .title{font-size:30px}
      .card{grid-column: span 12;}
      .nav{justify-content:flex-start}
      .top{align-items:flex-start}
      /* Adjust hero::after for medium screens */
      .hero::after{
        width:180px; height:180px;
        inset:-40px -40px auto auto;
      }
    }
    @media (max-width: 480px){ /* New media query for small phones */
      .brand h1{font-size:16px;}
      .brand p{font-size:12px;}
      .title{font-size:26px} /* Smaller title for very small screens */
      /* Hide hero::after on very small screens */
      .hero::after{
        display: none;
      }
      .pill, .toggle, .select, .tinyBtn{padding:7px 10px}
      .emojiBtn{padding:6px 9px}
    }