@charset "utf-8";
/* CSS Document */
.edit-mode-banner{
    position: sticky;
    top: 0;
    z-index: 1030;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(90deg, #faf3e3, #f7eccc);
    border-bottom: 1px solid #e2d2a8;
    color: #5a3a10;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
  }
  .edit-mode-banner.is-on{ display: flex; }
  .edit-mode-banner .edit-cancel{
    margin-left: 12px;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid #c89c4a;
    border-radius: 6px;
    color: #6b4a1a;
    font-size: 0.8rem;
    cursor: pointer;
  }
  .edit-mode-banner .edit-cancel:hover{ background: #c89c4a; color: #fff; }

  /* ============================================
     우측 요약 카드 (NEW)
     ============================================ */

  /* 헤더 행 */
  .summary-header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .summary-reset-btn{
    background:#fff;
    border:1px solid #e2e2e2;
    border-radius:20px;
    padding:5px 14px;
    font-size:0.78rem;
    color:#888;
    cursor:pointer;
    transition:all .2s;
    font-family:inherit;
  }
  .summary-reset-btn:hover{ border-color:#2d7d5f; color:#2d7d5f; }

  /* 사용자 선택 chip 4개 */
  .summary-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
  }
  .summary-chip{
    background:#f0f7f3;
    border:1px solid #d4ead9;
    border-radius:18px;
    padding:6px 14px;
    font-size:0.85rem;
    color:#1f5c41;
    transition:opacity .25s, transform .25s;
  }
  .summary-chip b{ font-weight:600; color:#1f5c41; }
  .summary-chip.updating{ opacity:0; transform:translateY(3px); }

  /* AI 추천 코스 미리보기 박스 */
  .ai-preview-box{
    background:#f7fbf8;
    border:1px solid #e0eee5;
    border-radius:14px;
    padding:18px 18px 14px;
    margin-bottom:16px;
  }
  .ai-preview-header{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
  }
  .ai-preview-icon{ font-size:1.05rem; }
  .ai-preview-title{
    font-size:0.98rem;
    font-weight:700;
    color:#1f5c41;
  }
  .ai-preview-desc{
    font-size:0.88rem;
    color:#4a6b58;
    margin:0 0 14px;
    line-height:1.5;
  }
  .ai-preview-list{
    list-style:none;
    padding:0;
    margin:0 0 12px;
  }
  .ai-preview-list .ai-preview-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:10px 0;
    border-bottom:1px solid #ebf2ed;
    transition:opacity .25s, transform .25s;
  }
  .ai-preview-list .ai-preview-item:last-child{ border-bottom:0; }
  .ai-preview-list .ai-preview-item.updating{ opacity:0; transform:translateY(4px); }

  .ai-preview-thumb{
    flex:0 0 64px;
    width:64px;
    height:64px;
    border-radius:10px;
    overflow:hidden;
    background:#e8eee9;
    position:relative;
	 
  }
  .ai-preview-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ai-preview-thumb-fallback{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    background:linear-gradient(135deg,#d4ead9,#a8d5b8);
    color:#fff;
  }

  .ai-preview-body{ flex:1; min-width:0; }
  .ai-preview-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
  }
  .ai-preview-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#2d7d5f;
    color:#fff;
    font-size:0.78rem;
    font-weight:700;
    flex-shrink:0;
	padding:1px 0 0 
  }
  .ai-preview-name{
    font-size:0.93rem;
    font-weight:700;
    color:#222;
    line-height:1.3;
  }
  .ai-preview-tag{
    display:inline-block;
    background:#eaf4ed;
    color:#2d7d5f;
    font-size:0.72rem;
    padding:2px 8px;
    border-radius:8px;
    margin-bottom:4px;
  }
  .ai-preview-place-desc{
    font-size:0.78rem;
    color:#6e7e74;
    margin:0;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .ai-preview-more{
    display:block;
    text-align:right;
    font-size:0.83rem;
    color:#2d7d5f;
    text-decoration:none;
    font-weight:500;
    padding-top:4px;
    border-top:1px solid #ebf2ed;
    margin-top:6px;
    transition:color .2s;
  }
  .ai-preview-more:hover{ color:#1f5c41; }

  /* AI가 이 코스를 추천한 이유 박스 */
  .ai-reason-box{
    background:#fafbf9;
    border:1px solid #e8ebe4;
    border-radius:14px;
    padding:18px;
    position:relative;
  }
  .ai-reason-header{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;
  }
  .ai-reason-icon{ font-size:1.05rem; }
  .ai-reason-title{
    font-size:0.98rem;
    font-weight:700;
    color:#1f5c41;
  }
  .ai-reason-list{
    list-style:none;
    padding:0;
    margin:0 0 14px;
  }
  .ai-reason-list li{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:5px 0;
    font-size:0.85rem;
    color:#3a4a40;
    line-height:1.5;
  }
  .ai-reason-list li b{ font-weight:600; color:#1f5c41; }
  .check-icon{
    flex:0 0 18px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#2d7d5f;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.7rem;
    font-weight:700;
    margin-top:2px;
  }
  .ai-reason-conclusion{
    font-size:0.9rem;
    color:#1f5c41;
    margin:0;
    padding-top:12px;
    border-top:1px solid #e8ebe4;
    font-weight:500;
  }
  .ai-reason-conclusion b{ font-weight:700; }

  /* ============================================
     섹션 헤더 sparkle
     ============================================ */
  .title-spark{
    display:inline-block;
    font-size:1.2rem;
    animation:sparkleFloat 2.4s ease-in-out infinite;
    vertical-align:middle;
    margin-left:6px;
  }
  @keyframes sparkleFloat{
    0%,100% { transform:translateY(0) rotate(0deg); opacity:1; }
    50%     { transform:translateY(-4px) rotate(12deg); opacity:.85; }
  }

  /* ============================================
     Social Proof 카운터 (버튼 아래)
     ============================================ */
  .ai-generate-social-proof{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  .social-proof-avatars{
    display:flex;
    align-items:center;
  }
  .proof-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    border:2px solid #fff;
    margin-left:-8px;
    font-size:0.95rem;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
  }
  .proof-avatar:first-child{ margin-left:0; }
  .social-proof-text{
    font-size:0.9rem;
    color:#555;
    margin:0;
  }
  .social-proof-text b{
    color:#2d7d5f;
    font-weight:700;
    font-size:0.95rem;
  }

  /* ============================================
     STEP B : AI 사고 과정 로딩 (NEW)
     ============================================ */
  .ai-thinking-shell{
    position:relative;
    max-width:680px;
    margin:0 auto;
    padding:42px 30px 26px;
    background:linear-gradient(135deg,#ffffff 0%,#f7fbf5 100%);
    border:1px solid #e6efe2;
    border-radius:22px;
    box-shadow:0 14px 44px rgba(45,125,95,0.09);
    overflow:hidden;
    font-family:'Noto Sans KR', sans-serif;
  }
  .ai-thinking-shell::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,#6fcf97,#2d7d5f,#6fcf97);
    background-size:200% 100%;
    animation:topBar 2.4s linear infinite;
  }
  @keyframes topBar{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }

  /* 라이브 배지 */
  .ai-thinking-live{
    position:absolute;
    top:18px; right:20px;
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 11px 4px 10px;
    background:#fff;
    border:1px solid #e6efe2;
    border-radius:20px;
    font-size:0.7rem; color:#2d7d5f; font-weight:700;
    letter-spacing:0.04em;
  }
  .ai-thinking-live::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,0.7);
    animation:livePulse 1.4s ease-out infinite;
  }
  @keyframes livePulse{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,0.7); }
    70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
  }

  /* 두뇌 / 신경망 비주얼라이저 */
  .ai-thinking-brain{
    position:relative;
    width:100px; height:100px;
    margin:6px auto 16px;
  }
  .ai-thinking-brain .core{
    position:absolute; inset:30px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #8de0b1, #2d7d5f 70%);
    box-shadow:0 0 30px rgba(45,125,95,0.5);
    animation:coreBreath 1.6s ease-in-out infinite;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
  }
  .ai-thinking-brain .core::after{
    content:'✨';
    filter:drop-shadow(0 0 4px rgba(255,255,255,0.8));
  }
  @keyframes coreBreath{
    0%,100%{ transform:scale(1); box-shadow:0 0 30px rgba(45,125,95,0.45); }
    50%{ transform:scale(1.1); box-shadow:0 0 46px rgba(45,125,95,0.75); }
  }
  .ai-thinking-brain .ring{
    position:absolute; inset:0;
    border:2px solid rgba(45,125,95,0.18);
    border-top-color:#2d7d5f;
    border-radius:50%;
    animation:ringSpin 1.6s linear infinite;
  }
  .ai-thinking-brain .ring.r2{
    inset:10px;
    border-color:rgba(111,207,151,0.18);
    border-right-color:#6fcf97;
    animation:ringSpin 2.2s linear infinite reverse;
  }
  @keyframes ringSpin{ to{ transform:rotate(360deg); } }
  .ai-thinking-brain .spark{
    position:absolute;
    top:50%; left:50%;
    width:8px; height:8px; margin:-4px 0 0 -4px;
    border-radius:50%;
    background:#facc15;
    box-shadow:0 0 8px rgba(250,204,21,0.8);
    animation:sparkOrbit 3s linear infinite;
  }
  .ai-thinking-brain .spark.s2{ animation-delay:-1s; background:#6fcf97; box-shadow:0 0 8px rgba(111,207,151,0.8); }
  .ai-thinking-brain .spark.s3{ animation-delay:-2s; background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,0.8); }
  @keyframes sparkOrbit{
    0%{ transform:rotate(0deg) translate(48px) rotate(0deg); opacity:0; }
    15%{ opacity:1; }
    85%{ opacity:1; }
    100%{ transform:rotate(360deg) translate(48px) rotate(-360deg); opacity:0; }
  }

  /* 메인 사고 문장 */
  .ai-thinking-headline{
    text-align:center;
    font-size:1.18rem;
    font-weight:700;
    color:#1a3d2e;
    margin:0 0 8px;
    letter-spacing:-0.01em;
    transition:opacity .25s;
  }
  .ai-thinking-headline.swap{ opacity:0; }
  .ai-thinking-sub{
    text-align:center;
    font-size:0.86rem;
    color:#5a7a6a;
    min-height:22px;
    margin:0 0 18px;
    transition:opacity .25s;
    font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
    letter-spacing:-0.005em;
  }
  .ai-thinking-sub.swap{ opacity:0; }
  .ai-thinking-sub .caret{
    display:inline-block;
    width:7px; height:13px;
    background:#2d7d5f;
    vertical-align:-2px;
    margin-left:2px;
    animation:caret 0.8s steps(1) infinite;
  }
  @keyframes caret{ 0%,50%{opacity:1;} 51%,100%{opacity:0;} }

  /* 사용자 선택 chip (loadingSummary 컨테이너) */
  .ai-thinking-chips{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:6px;
    margin:0 0 18px;
    padding:0;
  }
  .ai-thinking-chips .loading-chip{
    display:inline-block;
    padding:3px 11px;
    background:rgba(45,125,95,0.08);
    border:1px solid rgba(45,125,95,0.18);
    border-radius:20px;
    font-size:0.74rem;
    color:#2d7d5f;
    font-weight:500;
  }

  /* 진행 바 */
  .ai-thinking-progress{
    height:6px;
    background:#eef3ee;
    border-radius:10px;
    overflow:hidden;
    margin:0 0 18px;
    position:relative;
  }
  .ai-thinking-progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#6fcf97,#2d7d5f);
    border-radius:10px;
    transition:width .85s cubic-bezier(.4,0,.2,1);
    position:relative;
  }
  .ai-thinking-progress-fill::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
    animation:shimmer 1.4s linear infinite;
  }
  @keyframes shimmer{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(100%); }
  }

  /* 4-stage 리스트 */
  .ai-thinking-stages{
    list-style:none;
    padding:0;
    margin:0 0 16px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  @media (min-width:540px){
    .ai-thinking-stages{ grid-template-columns:repeat(4, 1fr); }
  }
  .ai-thinking-stages li{
    display:flex; align-items:center; gap:8px;
    padding:9px 10px;
    background:#fafbf9;
    border:1px solid #eef2ec;
    border-radius:10px;
    font-size:0.78rem;
    color:#9aa89f;
    transition:all .35s;
  }
  .ai-thinking-stages li .stage-ico{
    width:22px; height:22px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:#e8ede9;
    color:#fff;
    font-size:0.68rem;
    font-weight:700;
    flex-shrink:0;
    transition:all .35s;
  }
  .ai-thinking-stages li .stage-ico::before{ content:attr(data-num); }
  .ai-thinking-stages li.active{
    background:#f0f8f3;
    border-color:#c5e4d3;
    color:#1a3d2e;
    font-weight:700;
  }
  .ai-thinking-stages li.active .stage-ico{
    background:#2d7d5f;
    animation:stagePulse 1s ease-in-out infinite;
  }
  @keyframes stagePulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(45,125,95,0.55); }
    50%{ box-shadow:0 0 0 6px rgba(45,125,95,0); }
  }
  .ai-thinking-stages li.done{
    background:#fff;
    border-color:#e6efe2;
    color:#5a7a6a;
  }
  .ai-thinking-stages li.done .stage-ico{
    background:#6fcf97;
    animation:none;
  }
  .ai-thinking-stages li.done .stage-ico::before{ content:'✓'; }

  /* 라이브 카운터 */
  .ai-thinking-stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin:0 0 14px;
  }
  .ai-thinking-stat{
    text-align:center;
    padding:9px 4px;
    background:#fafbf9;
    border:1px solid #eef2ec;
    border-radius:10px;
  }
  .ai-thinking-stat .num{
    display:block;
    font-size:1.18rem;
    font-weight:800;
    color:#2d7d5f;
    font-variant-numeric:tabular-nums;
    line-height:1.2;
    letter-spacing:-0.02em;
  }
  .ai-thinking-stat .num .pct{ font-size:0.75rem; font-weight:700; margin-left:1px; }
  .ai-thinking-stat .lbl{
    display:block;
    font-size:0.68rem;
    color:#8a9a8e;
    margin-top:3px;
    letter-spacing:-0.01em;
  }

  /* 팁 박스 */
  .ai-thinking-tip{
    display:flex; align-items:center; gap:8px;
    padding:10px 13px;
    background:linear-gradient(90deg,#fff8e7,#fffcf2);
    border:1px solid #f3e2b5;
    border-radius:10px;
    font-size:0.78rem;
    color:#7a5a1a;
    min-height:42px;
    transition:opacity .25s;
  }
  .ai-thinking-tip.swap{ opacity:0; }
  .ai-thinking-tip-ico{ font-size:1rem; flex-shrink:0; }
  .ai-thinking-tip-text{ line-height:1.4; }
  .ai-thinking-tip-text b{ color:#5a3a10; font-weight:700; }

  /* ============================================
     STEP A : AI 큐레이터 카드 (NEW)
     ============================================ */
  .ai-curator-card{
    position:relative;
    margin:14px 0 18px;
    padding:18px 20px 16px;
    background:linear-gradient(135deg,#ffffff 0%,#f4faf6 100%);
    border:1px solid #d9ead9;
    border-radius:16px;
    box-shadow:0 6px 22px rgba(45,125,95,0.07);
    font-family:'Noto Sans KR', sans-serif;
    overflow:hidden;
    animation:curatorIn .55s cubic-bezier(.16,.84,.36,1) both;
  }
  @keyframes curatorIn{
    0%{ opacity:0; transform:translateY(10px); }
    100%{ opacity:1; transform:translateY(0); }
  }
  .ai-curator-card::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,#6fcf97,#2d7d5f,#6fcf97);
    background-size:200% 100%;
    animation:topBar 3s linear infinite;
    opacity:0.7;
  }

  /* 상단 행 */
  .ai-curator-top{
    display:flex; align-items:center; gap:11px;
    margin-bottom:12px;
    flex-wrap:wrap;
  }
  .ai-curator-avatar{
    width:36px; height:36px;
    border-radius:50%;
    background:linear-gradient(135deg,#8de0b1,#2d7d5f);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:16px;
    color:#fff;
    box-shadow:0 3px 10px rgba(45,125,95,0.3);
    flex-shrink:0;
    position:relative;
    animation:curatorAvatarBreath 2.4s ease-in-out infinite;
  }
  @keyframes curatorAvatarBreath{
    0%,100%{ box-shadow:0 3px 10px rgba(45,125,95,0.3); }
    50%{ box-shadow:0 3px 18px rgba(45,125,95,0.55); }
  }
  .ai-curator-avatar::after{
    content:'';
    position:absolute; inset:-3px;
    border-radius:50%;
    border:1.5px solid rgba(45,125,95,0.35);
    opacity:0;
    animation:curatorAvatarRing 2.4s ease-out infinite;
  }
  @keyframes curatorAvatarRing{
    0%{ transform:scale(0.95); opacity:0; }
    40%{ opacity:0.6; }
    100%{ transform:scale(1.25); opacity:0; }
  }
  .ai-curator-name-row{
    display:flex; flex-direction:column; gap:1px;
    line-height:1.2;
    margin-right:auto;
  }
  .ai-curator-name{
    font-size:0.92rem;
    font-weight:700;
    color:#1a3d2e;
    letter-spacing:-0.01em;
  }
  .ai-curator-tag{
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.7rem;
    color:#5a7a6a;
    font-weight:500;
  }
  .ai-curator-tag::before{
    content:''; width:5px; height:5px; border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,0.6);
    animation:livePulse 1.4s ease-out infinite;
  }
  /* 매칭률 배지 */
  .ai-curator-match{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px 6px 8px;
    background:#fff;
    border:1.5px solid #2d7d5f;
    border-radius:24px;
    font-size:0.78rem;
    color:#1a3d2e;
    font-weight:600;
    box-shadow:0 2px 8px rgba(45,125,95,0.12);
    position:relative;
    animation:matchPulse 2.2s ease-in-out infinite;
  }
  @keyframes matchPulse{
    0%,100%{ box-shadow:0 2px 8px rgba(45,125,95,0.12); }
    50%{ box-shadow:0 2px 14px rgba(45,125,95,0.28); }
  }
  .ai-curator-match .match-check{
    width:18px; height:18px;
    background:#2d7d5f;
    color:#fff;
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.7rem;
    font-weight:700;
    flex-shrink:0;
  }
  .ai-curator-match strong{
    font-size:0.95rem;
    color:#2d7d5f;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.01em;
  }
  .ai-curator-match strong .pct{
    font-size:0.72rem;
    margin-left:0px;
    font-weight:700;
  }

  /* 메시지 본문 */
  .ai-curator-msg{
    margin:0 0 12px;
    font-size:0.93rem;
    line-height:1.6;
    color:#2a3d33;
    letter-spacing:-0.01em;
  }
  .ai-curator-msg b{
    color:#2d7d5f;
    font-weight:700;
    background:linear-gradient(180deg, transparent 60%, rgba(111,207,151,0.28) 60%);
    padding:0 2px;
  }

  /* 신호 칩 (4개) */
  .ai-curator-signals{
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .ai-curator-signal{
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 11px;
    background:#fff;
    border:1px solid #e0ebe2;
    border-radius:20px;
    font-size:0.76rem;
    color:#4a5d52;
    font-weight:500;
    transition:all .2s;
  }
  .ai-curator-signal:hover{
    border-color:#6fcf97;
    background:#f4faf6;
    transform:translateY(-1px);
  }
  .ai-curator-signal .sig-ico{
    font-size:0.85rem;
    line-height:1;
  }
  .ai-curator-signal .sig-lbl{
    color:#8a9a8e;
    font-size:0.7rem;
    font-weight:500;
  }
  .ai-curator-signal .sig-val{
    color:#1a3d2e;
    font-weight:600;
  }

  /* 모바일 최적화 */
  @media (max-width: 540px){
    .ai-curator-match{
      order:3;
      width:100%;
      justify-content:center;
      margin-top:4px;
    }
    .ai-curator-name-row{ flex:1; }
  }

  /* ============================================
     Step C-1: "AI는 왜 여기를 골랐을까요?" 토글
     ============================================ */
  .timeline-card{
    position:relative; /* 우상단 swap 버튼 절대배치 기준 */
  }

  .reason-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    padding:6px 12px 6px 11px;
    background:#f4faf6;
    border:1px solid #d8ebe0;
    border-radius:18px;
    color:#2d7d5f;
    font-family:inherit;
    font-size:0.78rem;
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
    line-height:1;
  }
  .reason-toggle:hover{
    background:#e8f5ed;
    border-color:#6fcf97;
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(45,125,95,0.12);
  }
  .reason-toggle .reason-toggle-arrow{
    display:inline-block;
    font-size:0.7rem;
    transition:transform .25s ease;
    color:#6fcf97;
  }
  .reason-toggle.is-open .reason-toggle-arrow{
    transform:rotate(-180deg);
  }
  .reason-toggle.is-open{
    background:#e8f5ed;
    border-color:#6fcf97;
  }

  /* 펼침 패널 */
  .reason-panel{
    margin-top:10px;
    padding:12px 14px;
    background:linear-gradient(135deg, #f4faf6 0%, #eaf4ee 100%);
    border:1px solid #d8ebe0;
    border-left:3px solid #2d7d5f;
    border-radius:10px;
    animation:reasonFadeIn .35s ease-out;
  }
  @keyframes reasonFadeIn{
    from{ opacity:0; transform:translateY(-4px); }
    to  { opacity:1; transform:translateY(0); }
  }
  .reason-panel-head{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
    font-size:0.78rem;
    font-weight:700;
    color:#2d7d5f;
    letter-spacing:-0.01em;
  }
  .reason-panel-icon{
    font-size:0.9rem;
    line-height:1;
  }
  .reason-panel-body{
    font-size:0.83rem;
    line-height:1.65;
    color:#2a3d33;
    letter-spacing:-0.01em;
  }
  .reason-panel-body b{
    color:#2d7d5f;
    font-weight:700;
    background:linear-gradient(180deg, transparent 60%, rgba(111,207,151,0.28) 60%);
    padding:0 2px;
  }

  /* ============================================
     Step C-2: "🔄 다시 추천받기" swap 버튼
     ============================================ */
  .alt-swap-btn{
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    padding:0;
    background:#fff;
    border:1px solid #e2e2e2;
    border-radius:50%;
    cursor:pointer;
    transition:all .25s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
  }
  .alt-swap-btn:hover{
    border-color:#2d7d5f;
    background:#f4faf6;
    transform:rotate(180deg);
    box-shadow:0 2px 8px rgba(45,125,95,0.18);
  }
  .alt-swap-btn:active{
    transform:rotate(180deg) scale(0.92);
  }
  .alt-swap-icon{
    font-size:0.85rem;
    line-height:1;
    filter:saturate(0.7);
    transition:filter .25s;
  }
  .alt-swap-btn:hover .alt-swap-icon{
    filter:saturate(1.2);
  }

  /* 로딩 오버레이 (swap 진행 중) */
  .swap-loading-overlay{
    position:absolute;
    inset:0;
    background:rgba(248, 247, 242, 0.94);
    backdrop-filter:blur(2px);
    border-radius:12px;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    z-index:3;
    animation:overlayFadeIn .2s ease-out;
  }
  @keyframes overlayFadeIn{
    from{ opacity:0; }
    to  { opacity:1; }
  }
  .timeline-card.swap-loading .swap-loading-overlay{
    display:flex;
  }
  .swap-loading-spinner{
    width:24px;
    height:24px;
    border:2.5px solid #d8ebe0;
    border-top-color:#2d7d5f;
    border-radius:50%;
    animation:swapSpin 0.7s linear infinite;
  }
  @keyframes swapSpin{
    to{ transform:rotate(360deg); }
  }
  .swap-loading-text{
    font-size:0.78rem;
    color:#2d7d5f;
    font-weight:600;
    letter-spacing:-0.01em;
  }

  /* swap 직후 새 카드 fade-in 강조 */
  .timeline-card.swap-arrived{
    animation:swapArrive 0.7s ease-out;
  }
  @keyframes swapArrive{
    0%   { opacity:0; transform:translateY(6px); box-shadow:0 0 0 2px rgba(45,125,95,0); }
    30%  { opacity:1; transform:translateY(0);   box-shadow:0 0 0 2px rgba(45,125,95,0.35); }
    100% { opacity:1; transform:translateY(0);   box-shadow:0 0 0 2px rgba(45,125,95,0); }
  }

  /* 모바일 미세 조정 */
  @media (max-width: 540px){
    .reason-toggle{
      width:100%;
      justify-content:center;
    }
    .reason-toggle-text{
      font-size:0.76rem;
    }
    .alt-swap-btn{
      width:28px;
      height:28px;
      top:8px;
      right:8px;
    }
    .reason-panel-body{
      font-size:0.8rem;
    }
  }

  /* ============================================
     Step C 풀버전: 다른 지역 담은 여행지 알림 카드
     ============================================ */
  .other-picks-alert{
    margin:0 0 16px;
    padding:16px 18px;
    background:linear-gradient(135deg, #fff8e8 0%, #fef2d6 100%);
    border:1px solid #f0d89a;
    border-left:4px solid #d4a64a;
    border-radius:12px;
    animation:otherPicksFadeIn .4s ease-out;
    overflow:hidden;
  }
  @keyframes otherPicksFadeIn{
    from{ opacity:0; transform:translateY(-6px); }
    to  { opacity:1; transform:translateY(0); }
  }

  .other-picks-head{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
  }
  .other-picks-ico{
    flex:0 0 auto;
    font-size:1.4rem;
    line-height:1;
    margin-top:2px;
  }
  .other-picks-head-text{
    flex:1;
    min-width:0;
  }
  .other-picks-title{
    font-size:0.95rem;
    font-weight:700;
    color:#5a3a10;
    margin-bottom:3px;
    letter-spacing:-0.01em;
  }
  .other-picks-title .other-picks-count{
    display:inline-block;
    min-width:22px;
    padding:1px 7px;
    margin:0 2px;
    background:#d4a64a;
    color:#fff;
    border-radius:11px;
    font-size:0.82rem;
    font-weight:800;
    text-align:center;
  }
  .other-picks-sub{
    font-size:0.8rem;
    color:#8a6a30;
    line-height:1.5;
    letter-spacing:-0.01em;
  }
  .other-picks-close{
    flex:0 0 auto;
    width:26px; height:26px;
    padding:0;
    background:transparent;
    border:1px solid transparent;
    border-radius:50%;
    color:#a88a4a;
    font-size:0.9rem;
    cursor:pointer;
    transition:all .2s;
    line-height:1;
  }
  .other-picks-close:hover{
    background:#fff;
    border-color:#d4a64a;
    color:#5a3a10;
  }

  /* 알림 카드 본문 — 지역별 그룹 */
  .other-picks-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .other-picks-group{
    padding:10px 12px;
    background:rgba(255,255,255,0.6);
    border:1px solid #ead7a8;
    border-radius:9px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px;
  }
  .other-picks-group-head{
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
  }
  .other-picks-region{
    font-size:0.82rem;
    font-weight:700;
    color:#5a3a10;
  }
  .other-picks-group-count{
    font-size:0.72rem;
    color:#a88a4a;
    background:#fff;
    border:1px solid #ead7a8;
    border-radius:10px;
    padding:1px 7px;
  }
  .other-picks-chips{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    flex:1;
    min-width:140px;
  }
  .other-picks-chip{
    display:inline-block;
    padding:3px 9px;
    background:#fff;
    border:1px solid #ead7a8;
    border-radius:12px;
    font-size:0.74rem;
    color:#5a3a10;
    font-weight:500;
  }
  .other-picks-switch{
    flex:0 0 auto;
    padding:6px 13px;
    background:#5a3a10;
    color:#fff;
    border:none;
    border-radius:18px;
    font-family:inherit;
    font-size:0.78rem;
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
    letter-spacing:-0.01em;
  }
  .other-picks-switch:hover{
    background:#3d2608;
    transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(90,58,16,0.3);
  }

  /* "지금 보는 코스에 추가" / "OO 코스로 새로 만들기" 두 버튼을 나란히 배치 */
  .other-picks-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }
  .other-picks-add{
    flex:0 0 auto;
    padding:6px 13px;
    background:#fff;
    color:#5a3a10;
    border:1px solid #5a3a10;
    border-radius:18px;
    font-family:inherit;
    font-size:0.78rem;
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
    letter-spacing:-0.01em;
  }
  .other-picks-add:hover{
    background:#5a3a10;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(90,58,16,0.3);
  }

  /* 모바일 */
  @media (max-width: 540px){
    .other-picks-alert{
      padding:14px 14px;
    }
    .other-picks-title{
      font-size:0.88rem;
    }
    .other-picks-sub{
      font-size:0.76rem;
    }
    .other-picks-group{
      flex-direction:column;
      align-items:stretch;
    }
    .other-picks-switch{
      width:100%;
      padding:9px 13px;
    }
    .other-picks-actions{
      flex-direction:column;
      align-items:stretch;
      width:100%;
    }
    .other-picks-add{
      width:100%;
      padding:9px 13px;
    }
    .other-picks-chips{
      min-width:0;
    }
  }

  /* ============================================
     📌 STEP1 picked 패널 (재배치 + 강화)
     ============================================ */
  .planner-picked-box{
    margin:0 0 16px;
    padding:14px 16px;
    background:linear-gradient(135deg, #f4faf6 0%, #ebf6f0 100%);
    border:1px solid #d8ebe0;
    border-left:4px solid #2d7d5f;
    border-radius:12px;
    animation:pickedFadeIn .35s ease-out;
  }
  @keyframes pickedFadeIn{
    from{ opacity:0; transform:translateY(-4px); }
    to  { opacity:1; transform:translateY(0); }
  }
  .planner-picked-box.flash-highlight{
    animation:pickedFlash 1.2s ease-out;
  }
  @keyframes pickedFlash{
    0%, 100% { box-shadow:0 0 0 0 rgba(45,125,95,0); }
    25%      { box-shadow:0 0 0 4px rgba(45,125,95,0.35); }
  }

  .planner-picked-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
  }
  .planner-picked-title{
    font-size:0.92rem;
    font-weight:700;
    color:#2a3d33;
    letter-spacing:-0.01em;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .planner-picked-title b{
    color:#2d7d5f;
    font-weight:800;
    margin:0 1px;
  }
  .planner-picked-ico{
    font-size:1rem;
    line-height:1;
  }
  .planner-picked-clear{
    flex:0 0 auto;
    padding:4px 10px;
    background:transparent;
    border:1px solid #c5dccf;
    border-radius:14px;
    color:#5a7a68;
    font-family:inherit;
    font-size:0.74rem;
    font-weight:500;
    cursor:pointer;
    transition:all .2s;
    letter-spacing:-0.01em;
  }
  .planner-picked-clear:hover{
    background:#fff;
    border-color:#2d7d5f;
    color:#2d7d5f;
  }

  /* 칩 형식 리스트 */
  .planner-picked-list{
    list-style:none;
    padding:0;
    margin:0 0 10px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .planner-picked-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 6px 5px 10px;
    background:#fff;
    border:1px solid #d8ebe0;
    border-radius:18px;
    font-size:0.78rem;
    color:#2a3d33;
    transition:all .2s;
  }
  .planner-picked-item:hover{
    border-color:#6fcf97;
    box-shadow:0 2px 6px rgba(45,125,95,0.10);
  }
  .planner-picked-chip-region{
    display:inline-block;
    padding:1px 7px;
    background:#e8f5ed;
    border-radius:9px;
    font-size:0.7rem;
    font-weight:600;
    color:#2d7d5f;
    letter-spacing:-0.01em;
  }
  .planner-picked-chip-name{
    font-weight:500;
    letter-spacing:-0.01em;
  }
  .planner-picked-remove{
    width:20px; height:20px;
    padding:0;
    background:transparent;
    border:none;
    border-radius:50%;
    color:#a8c2b3;
    font-size:0.74rem;
    cursor:pointer;
    transition:all .15s;
    line-height:1;
  }
  .planner-picked-remove:hover{
    background:#ffd9d9;
    color:#c44;
  }

  .planner-picked-hint{
    font-size:0.74rem;
    color:#5a7a68;
    line-height:1.55;
    letter-spacing:-0.01em;
    padding-top:8px;
    border-top:1px dashed #d8ebe0;
  }

  /* ============================================
     STEP3 timeline picked spot 강조
     ============================================ */
  .timeline-item.is-picked .timeline-dot{
    background:#2d7d5f !important;
    box-shadow:0 0 0 3px rgba(45,125,95,0.18);
  }
  .timeline-card.is-picked{
    border-color:#6fcf97 !important;
    background:linear-gradient(135deg, #fefef9 0%, #f4faf6 100%);
  }
  .picked-badge{
    position:absolute;
    top:-9px;
    right:14px;
    z-index:2;
    padding:3px 9px;
    background:#114ade;
    color:#fff;
    border-radius:11px;
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:-0.01em;
    box-shadow:0 2px 5px rgba(45,125,95,0.25);
    white-space:nowrap;
  }
  /* 이동시간이 발생하는 담은 여행지(장거리) 전용 색상 변형.
     .picked-badge를 대체하는 단일 배지이며, 별도 요소로 추가되지 않으므로 겹치지 않음 */
  .picked-badge-far{
    background:#c9720c;
    box-shadow:0 2px 5px rgba(201,114,12,0.3);
  }

  /* ============================================
     📌 Floating Picked Button (우측 하단 고정)
     ============================================ */
  .float-picked-btn{
    position:fixed;
    right:70px;
    bottom:22px;     /* 다른 floating 요소와 겹치지 않게 */
    z-index:998;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:11px 16px 11px 14px;
    background:#114ade;
    color:#fff;
    border:none;
    border-radius:30px;
    font-family:inherit;
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:-0.01em;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(17,74,22,0.35);
    transition:all .2s;
    animation:floatPickedIn .4s ease-out;
  }
  @keyframes floatPickedIn{
    from{ opacity:0; transform:translateY(20px) scale(0.8); }
    to  { opacity:1; transform:translateY(0) scale(1); }
  }
  .float-picked-btn:hover{
    background:#122a1e;
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(45,125,95,0.45);
  }
  .float-picked-btn:active{
    transform:translateY(0);
  }
  .float-picked-btn svg{
    flex:0 0 auto;
  }
  .float-picked-label{
    line-height:1;
  }
  .float-picked-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:2px 6px 0;
    background:#fff;
    color:#2d7d5f;
    border-radius:11px;
    font-size:0.74rem;
    font-weight:800;
    line-height:1;
  }

  /* ============================================
     Floating Picked Popover
     ============================================ */
  .float-picked-popover{
    position:fixed;
    right:20px;
    bottom:148px;
    z-index:999;
    width:320px;
    max-width:calc(100vw - 40px);
    max-height:60vh;
    overflow-y:auto;
    background:#fff;
    border:1px solid #d8ebe0;
    border-radius:14px;
    box-shadow:0 12px 32px rgba(0,0,0,0.16), 0 0 0 1px rgba(45,125,95,0.08);
    animation:popoverIn .25s ease-out;
  }
  @keyframes popoverIn{
    from{ opacity:0; transform:translateY(8px); }
    to  { opacity:1; transform:translateY(0); }
  }
  .float-picked-popover-head{
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 14px 11px;
    background:linear-gradient(135deg, #f4faf6 0%, #ebf6f0 100%);
    border-bottom:1px solid #d8ebe0;
    border-radius:14px 14px 0 0;
    z-index:1;
  }
  .float-picked-popover-title{
    font-size:0.9rem;
    font-weight:700;
    color:#2a3d33;
    display:inline-flex;
    align-items:center;
    gap:6px;
    letter-spacing:-0.01em;
  }
  .float-picked-popover-title b{
    color:#2d7d5f;
    font-weight:800;
  }
  .float-picked-popover-close{
    width:26px; height:26px;
    padding:0;
    background:transparent;
    border:1px solid transparent;
    border-radius:50%;
    color:#5a7a68;
    font-size:0.85rem;
    cursor:pointer;
    transition:all .15s;
    line-height:1;
  }
  .float-picked-popover-close:hover{
    background:#fff;
    border-color:#c5dccf;
    color:#2a3d33;
  }

  .float-picked-popover-list{
    list-style:none;
    padding:8px;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .float-picked-popover-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 8px 8px 10px;
    background:#f8f9f7;
    border:1px solid #e4ebe6;
    border-radius:9px;
    font-size:0.8rem;
    transition:all .15s;
  }
  .float-picked-popover-item:hover{
    background:#fff;
    border-color:#6fcf97;
  }
  .float-picked-popover-region{
    flex:0 0 auto;
    padding:2px 7px;
    background:#e8f5ed;
    color:#2d7d5f;
    border-radius:9px;
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .float-picked-popover-name{
    flex:1;
    color:#2a3d33;
    font-weight:500;
    letter-spacing:-0.01em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .float-picked-popover-remove{
    flex:0 0 auto;
    width:22px; height:22px;
    padding:0;
    background:transparent;
    border:none;
    border-radius:50%;
    color:#a8c2b3;
    font-size:0.78rem;
    cursor:pointer;
    transition:all .15s;
    line-height:1;
  }
  .float-picked-popover-remove:hover{
    background:#ffd9d9;
    color:#c44;
  }

  .float-picked-popover-foot{
    display:flex;
    gap:6px;
    padding:8px 10px 11px;
    border-top:1px solid #ebf0ed;
  }
  .float-picked-clear-btn,
  .float-picked-scroll-btn{
    flex:1;
    padding:7px 10px;
    background:#fff;
    border:1px solid #d8ebe0;
    border-radius:18px;
    color:#5a7a68;
    font-family:inherit;
    font-size:0.74rem;
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
    letter-spacing:-0.01em;
  }
  .float-picked-clear-btn:hover{
    background:#ffe9e9;
    border-color:#e8b5b5;
    color:#a04;
  }
  .float-picked-scroll-btn{
    background:#2d7d5f;
    border-color:#2d7d5f;
    color:#fff;
  }
  .float-picked-scroll-btn:hover{
    background:#226148;
    border-color:#226148;
  }

  /* 모바일 */
  @media (max-width: 540px){
    .planner-picked-header{
      flex-wrap:wrap;
    }
    .float-picked-btn{
      right:14px;
      bottom:80px;
      padding:10px 13px 10px 12px;
      font-size:0.8rem;
    }
    .float-picked-label{
      display:none; /* 모바일에선 아이콘 + 카운트만 */
    }
    .float-picked-popover{
      right:14px;
      bottom:138px;
      width:calc(100vw - 28px);
    }
    .picked-badge{
      font-size:0.64rem;
      padding:3px 7px;
    }
  }

  /* ============================================
     Day 탭 picked 표시 + 지도 picked 마커 강조
     ============================================ */
  .day-picked-mark{
    display:inline-block;
    margin-left:4px;
    font-size:0.78em;
    line-height:1;
    transform:translateY(-1px);
  }

  /* 지도의 picked 마커 — 핫핑크 색상 + 미묘한 펄스 */
  .map-spot-marker.is-picked{
    animation:mapPickedPulse 2.4s ease-in-out infinite;
  }
  @keyframes mapPickedPulse{
    0%, 100% { box-shadow:0 3px 10px rgba(214,51,108,0.45); }
    50%      { box-shadow:0 3px 16px rgba(214,51,108,0.7); }
  }