:root{
--mint:#1fc7b1;
--mint-2:#71dfcf;
--mint-dark:#087d70;
--mint-deep:#075b55;
--mint-soft:#e6fbf7;
--coral:#ff6e68;
--coral-2:#ff8a79;
--coral-dark:#df514d;
--sun:#ffd86a;
--ink:#153f3d;
--ink-soft:#395f5c;
--muted:#6c8582;
--line:#d7e7e4;
--paper:#ffffff;
--paper-soft:#f8fffd;
--shadow:0 10px 28px rgba(14,93,86,.10);
--shadow-soft:0 5px 18px rgba(14,93,86,.08);
font-family:Pretendard,"Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{min-height:100%;background:#eef8f6}
body{margin:0;color:var(--ink);font-size:16px;min-height:100vh;background:#f4f7f6}
button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
.eyebrow{margin:0;color:var(--mint-dark);font-weight:850}

/* ------------------------------
Family mobile page
-------------------------------- */
body.travel-page{
background:
linear-gradient(180deg,rgba(255,255,255,0) 0 39%,rgba(255,255,255,.92) 56%,#f7fbfa 74%),
radial-gradient(circle at 86% 6%,rgba(255,239,163,.98) 0 38px,rgba(255,239,163,.42) 39px 70px,transparent 71px),
linear-gradient(180deg,#a9edf5 0 13%,#69dbe8 13% 25%,#2cc7d0 25% 37%,#91e0d3 37% 42%,#f5ddb0 42% 51%,#f7fbfa 51% 100%);
background-attachment:fixed;
}
body.travel-page::before,
body.travel-page::after{
content:"";
position:fixed;
pointer-events:none;
z-index:0;
filter:blur(.2px);
opacity:.9;
}
body.travel-page::before{
width:170px;height:170px;left:-82px;top:-58px;
background:
linear-gradient(34deg,transparent 44%,rgba(12,117,97,.28) 45% 49%,transparent 50%),
radial-gradient(ellipse at 70% 40%,rgba(9,145,111,.34) 0 28%,transparent 30%),
radial-gradient(ellipse at 75% 70%,rgba(12,130,105,.28) 0 22%,transparent 24%);
transform:rotate(-13deg)
}
body.travel-page::after{
width:150px;height:120px;right:-54px;top:70px;
background:
radial-gradient(ellipse at 25% 22%,rgba(255,255,255,.52) 0 26%,transparent 28%),
radial-gradient(ellipse at 70% 55%,rgba(255,255,255,.38) 0 22%,transparent 24%);
}

.travel-page .app-shell{
position:relative;
z-index:1;
max-width:720px;
margin:0 auto;
padding:10px 12px 132px;
}

/* Hero */
.travel-page .hero{
position:relative;
isolation:isolate;
overflow:hidden;
text-align:center;
min-height:218px;
margin:0 -2px 12px;
padding:27px 14px 20px;
border:1px solid rgba(255,255,255,.7);
border-radius:30px;
background:
linear-gradient(180deg,rgba(255,255,255,.08) 0 42%,rgba(255,255,255,.30) 43% 59%,rgba(255,255,255,.92) 60% 100%),
radial-gradient(ellipse at 48% 70%,rgba(255,255,255,.6) 0 10%,transparent 11%),
linear-gradient(180deg,#a4ecf5 0 43%,#46cbd7 43% 63%,#22bfc5 63% 69%,#f1d9aa 69% 100%);
box-shadow:0 14px 40px rgba(10,93,99,.18),inset 0 1px 0 rgba(255,255,255,.9);
}
.travel-page .hero::before{
content:"";
position:absolute;
z-index:-1;
left:-12%;right:-12%;bottom:58px;
height:72px;
background:
radial-gradient(ellipse at 18% 100%,rgba(255,255,255,.92) 0 5%,transparent 6%),
radial-gradient(ellipse at 46% 100%,rgba(255,255,255,.72) 0 5%,transparent 6%),
radial-gradient(ellipse at 76% 100%,rgba(255,255,255,.82) 0 4%,transparent 5%);
opacity:.92;
}
.travel-page .hero::after{
content:"";
position:absolute;
z-index:-1;
inset:auto -10% -54px;
height:135px;
border-radius:50% 50% 0 0;
background:rgba(255,255,255,.94);
}
.travel-page .hero-art{
position:absolute;
inset:12px 14px auto;
display:flex;
justify-content:space-between;
align-items:flex-start;
font-size:31px;
pointer-events:none;
filter:drop-shadow(0 3px 4px rgba(0,80,80,.12));
}
.travel-page .hero-art span{font-size:31px}
.travel-page .hero .eyebrow{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:2px;
padding:7px 13px;
border-radius:999px;
color:#0a6e63;
background:rgba(255,255,255,.82);
box-shadow:0 3px 12px rgba(0,96,89,.10);
backdrop-filter:blur(8px);
}
.travel-page .hero .eyebrow::before{content:"🌴"}
.travel-page .hero h1{
margin:8px 0 10px;
color:#075f5a;
font-size:clamp(36px,10.2vw,52px);
line-height:1.02;
letter-spacing:-2.1px;
font-weight:1000;
text-shadow:0 3px 0 rgba(255,255,255,.96),0 9px 24px rgba(1,91,86,.18);
}
.travel-page .trip-pill,
.travel-page .stay-pill{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
border:1px solid rgba(10,116,103,.08);
background:rgba(255,255,255,.94);
box-shadow:0 6px 18px rgba(11,99,91,.10);
backdrop-filter:blur(8px);
}
.travel-page .trip-pill{
padding:8px 16px;
color:#173f3c;
font-size:15.5px;
font-weight:950;
}
.travel-page .stay-pill{
margin-top:8px;
padding:7px 14px;
color:#486a67;
font-size:13.5px;
font-weight:780;
}

/* Intro */
.travel-page .intro{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:12px 0 10px;
padding:6px 0;
}
.travel-page .intro-icon{
width:39px;height:39px;flex:none;
border:3px solid var(--mint);
border-radius:11px;
display:grid;
place-items:center;
background:#fff;
color:#f2ad13;
font-size:23px;
font-weight:1000;
box-shadow:0 4px 10px rgba(8,126,112,.12);
transform:rotate(-4deg);
}
.travel-page .intro h2{
margin:0;
padding:6px 12px;
border-radius:14px;
color:#183f3d;
background:rgba(255,255,255,.92);
font-size:clamp(20px,5.5vw,25px);
line-height:1.2;
font-weight:950;
letter-spacing:-.8px;
box-shadow:0 4px 13px rgba(0,86,82,.08);
}

/* Folded info */
.travel-page .fold{
overflow:hidden;
margin:10px 0 12px;
border:1px solid rgba(13,119,105,.11);
border-radius:20px;
background:rgba(255,255,255,.94);
box-shadow:var(--shadow-soft);
backdrop-filter:blur(10px);
}
.travel-page .fold summary{
list-style:none;
cursor:pointer;
position:relative;
padding:14px 44px 14px 16px;
color:#1a4e4a;
font-size:15.5px;
font-weight:900;
}
.travel-page .fold summary::-webkit-details-marker{display:none}
.travel-page .fold summary::after{
content:"＋";
position:absolute;
top:50%;right:16px;
transform:translateY(-50%);
display:grid;
place-items:center;
width:25px;height:25px;
border-radius:50%;
background:var(--mint-soft);
color:var(--mint-dark);
font-size:17px;
font-weight:1000;
}
.travel-page .fold[open] summary::after{content:"−"}
.travel-page .fold .in{
padding:0 15px 14px;
color:#3c5f5c;
font-size:14.5px;
line-height:1.58;
}
.travel-page .fold .in div{padding:8px 0}
.travel-page .fold .in div+div{border-top:1px dashed #d7e8e5}
.travel-page .fold .in strong{display:block;margin-bottom:2px;color:#1b4b48}
.travel-page .fold small{display:block;margin-top:4px;color:var(--muted)}

/* Sticky category tabs */
.travel-page .tabs{
position:sticky;
top:0;
z-index:20;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px;
margin:0 -3px 10px;
padding:9px 3px 10px;
background:linear-gradient(180deg,rgba(248,255,253,.97) 0 76%,rgba(248,255,253,0) 100%);
backdrop-filter:blur(12px);
}
.travel-page .tab{
min-width:0;
border:1px solid rgba(9,115,104,.12);
border-radius:999px;
padding:12px 5px;
color:#466d69;
background:rgba(255,255,255,.97);
box-shadow:0 4px 14px rgba(12,98,91,.08);
font-size:clamp(12.5px,3.6vw,16px);
font-weight:900;
white-space:nowrap;
cursor:pointer;
transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.travel-page .tab:active{transform:scale(.98)}
.travel-page .tab.active{
border-color:transparent;
color:#fff;
background:linear-gradient(135deg,#13bca4,#2dcbb5);
box-shadow:0 7px 18px rgba(20,188,164,.28),inset 0 1px 0 rgba(255,255,255,.27);
}

/* Long list */
.travel-page .cards{
display:grid;
gap:10px;
padding-bottom:8px;
}
.travel-page .group-title{
display:flex;
align-items:center;
gap:7px;
margin-top:5px;
padding:11px 7px 5px;
color:#0b5d57;
font-size:18px;
font-weight:950;
letter-spacing:-.4px;
text-shadow:0 1px 0 rgba(255,255,255,.9);
}

/* Place card */
.travel-page .place-card{
cursor:pointer;
position:relative;
overflow:hidden;
width:100%;
display:grid;
grid-template-columns:42px 108px minmax(0,1fr);
gap:11px;
align-items:center;
padding:10px 11px;
border:1px solid rgba(22,111,101,.12);
border-radius:22px;
color:var(--ink);
text-align:left;
background:rgba(255,255,255,.975);
box-shadow:0 6px 20px rgba(13,82,77,.09);
transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
contain:layout paint;
}
.travel-page .place-card::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(105deg,rgba(255,255,255,.28),transparent 22%,transparent 78%,rgba(31,199,177,.03));
}
.travel-page .place-card:hover{box-shadow:0 9px 24px rgba(13,82,77,.12)}
.travel-page .place-card:active{transform:scale(.992)}
.travel-page .place-card:focus-visible{outline:3px solid rgba(31,199,177,.25);outline-offset:2px}
.travel-page .place-card.selected{
border:2px solid var(--mint);
padding:9px 10px;
background:linear-gradient(135deg,#edfff9 0,#fff 70%);
box-shadow:0 9px 25px rgba(21,185,160,.17);
}
.travel-page .checkbox{
position:relative;
z-index:1;
width:34px;height:34px;
justify-self:center;
display:grid;
place-items:center;
border:2.5px solid #789592;
border-radius:50%;
background:#fff;
color:#fff;
font-size:21px;
font-weight:1000;
box-shadow:inset 0 0 0 3px #fff,0 2px 8px rgba(0,70,65,.08);
transition:.15s ease;
}
.travel-page .selected .checkbox{
border-color:var(--mint);
background:var(--mint);
transform:scale(1.04);
box-shadow:0 4px 12px rgba(31,199,177,.26);
}

/* Photo-like category thumbnail */
.travel-page .thumb{
position:relative;
z-index:1;
overflow:hidden;
width:108px;height:82px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.82);
border-radius:17px;
font-size:38px;
text-shadow:0 2px 8px rgba(0,70,70,.20);
box-shadow:inset 0 0 0 1px rgba(0,91,89,.04),0 4px 10px rgba(10,80,75,.10);
isolation:isolate;
}
.travel-page .thumb::before,
.travel-page .thumb::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.travel-page .thumb::after{
background:
linear-gradient(180deg,rgba(255,255,255,.24),transparent 38%),
linear-gradient(0deg,rgba(0,65,61,.10),transparent 38%);
mix-blend-mode:soft-light;
}
.travel-page .thumb-sight{
background:
radial-gradient(circle at 76% 18%,#fff4ae 0 7%,transparent 8%),
linear-gradient(172deg,transparent 0 43%,rgba(255,255,255,.88) 44% 47%,transparent 48%),
linear-gradient(180deg,#7cdff1 0 47%,#36c7d5 48% 64%,#67c997 65% 75%,#e7c486 76% 100%);
}
.travel-page .thumb-sight::before{
background:
linear-gradient(150deg,transparent 0 54%,rgba(35,126,92,.35) 55% 72%,transparent 73%),
linear-gradient(25deg,transparent 0 66%,rgba(16,113,88,.25) 67% 82%,transparent 83%);
}
.travel-page .thumb-food{
background:
radial-gradient(circle at 23% 27%,rgba(255,255,255,.48) 0 6%,transparent 7%),
radial-gradient(circle at 68% 43%,#ffcf78 0 20%,transparent 21%),
radial-gradient(circle at 40% 66%,#ed7a53 0 25%,transparent 26%),
linear-gradient(135deg,#ffe0aa,#ffae8e 58%,#d77a55);
}
.travel-page .thumb-food::before{
background:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 6px,transparent 6px 13px);
}
.travel-page .thumb-shop{
background:
linear-gradient(90deg,rgba(255,255,255,.72) 0 7%,transparent 8% 92%,rgba(255,255,255,.42) 93%),
repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 7px,transparent 7px 15px),
linear-gradient(135deg,#c8e8ff 0,#b8eedf 46%,#ffdbac 100%);
}
.travel-page .thumb-spa{
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.65) 0 10%,transparent 11%),
radial-gradient(circle at 30% 30%,rgba(255,255,255,.35) 0 9%,transparent 10%),
linear-gradient(135deg,#eadcff 0,#ffd8d0 44%,#c6efe6 100%);
}
.travel-page .place-card:nth-of-type(4n+2) .thumb{filter:saturate(1.08) hue-rotate(2deg)}
.travel-page .place-card:nth-of-type(4n+3) .thumb{filter:saturate(.96) brightness(1.03)}
.travel-page .place-card:nth-of-type(4n+4) .thumb{filter:saturate(1.12) contrast(.98)}

.travel-page .place-copy{
position:relative;
z-index:1;
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
}
.travel-page .place-top{display:block;min-width:0}
.travel-page .place-top strong{
display:block;
color:#173b39;
font-size:18px;
line-height:1.24;
letter-spacing:-.45px;
font-weight:950;
overflow-wrap:anywhere;
}
.travel-page .place-sub{
color:#3f5f5c;
font-size:14px;
line-height:1.38;
font-weight:720;
}
.travel-page .chips{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:5px;
margin-top:1px;
}
.travel-page .time-chip,
.travel-page .status-badge{
display:inline-flex;
align-items:center;
border-radius:999px;
line-height:1.2;
font-weight:850;
}
.travel-page .time-chip{
padding:4px 8px;
background:var(--mint-soft);
color:#0d7569;
font-size:11.8px;
}
.travel-page .status-badge{padding:4px 8px;font-size:11.3px}
.travel-page .status-badge.good{background:#e5f8ee;color:#16714d}
.travel-page .status-badge.check{background:#fff1bd;color:#775900}
.travel-page .status-badge.warn{background:#ffe0dd;color:#a23c36}
.travel-page .status-badge.discuss{background:#e8ebff;color:#4658a6}
.travel-page .status-badge.note{background:#f0ebff;color:#674f97}
.travel-page .status-badge.new{
color:#fff;
background:linear-gradient(135deg,#ff6e68,#ff8b79);
box-shadow:0 3px 9px rgba(255,110,104,.23)
}
.travel-page .place-detail{
color:var(--muted);
font-size:12.8px;
line-height:1.42;
}
.travel-page .map-link{
position:relative;
z-index:3;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
margin-top:3px;
padding:6px 11px;
border:1.5px solid rgba(11,151,134,.34);
border-radius:999px;
color:#087f72;
background:#f7fffd;
font-size:12.5px;
font-weight:900;
text-decoration:none;
box-shadow:0 2px 8px rgba(12,106,98,.06);
transition:.15s ease;
}
.travel-page .map-link:hover{background:#eafff9;border-color:var(--mint);transform:translateY(-1px)}
.travel-page .map-link:active{transform:translateY(0) scale(.98)}

/* Bottom action */
.travel-page .bottom-bar{
position:fixed;
z-index:40;
left:0;right:0;bottom:0;
display:flex;
flex-direction:column;
align-items:center;
padding:22px 14px calc(9px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,rgba(247,251,250,0),rgba(247,251,250,.94) 38%,rgba(247,251,250,.99) 100%);
pointer-events:none;
}
.travel-page .submit-btn{
pointer-events:auto;
width:min(680px,100%);
min-height:58px;
border:1px solid rgba(211,67,65,.12);
border-radius:22px;
color:#fff;
background:linear-gradient(135deg,var(--coral-2),var(--coral) 52%,#ff5d64 100%);
box-shadow:0 12px 28px rgba(239,83,84,.30),inset 0 1px 0 rgba(255,255,255,.25);
font-size:21px;
font-weight:1000;
letter-spacing:-.4px;
cursor:pointer;
transition:transform .15s ease,filter .15s ease;
}
.travel-page .submit-btn::before{content:"✓ ";font-weight:1000}
.travel-page .submit-btn:active{transform:scale(.992)}
.travel-page .submit-btn:disabled{opacity:.58;filter:grayscale(.15)}
.travel-page .submit-status{
min-height:15px;
margin-top:3px;
color:#55726f;
font-size:11.5px;
font-weight:700;
pointer-events:none;
}
.travel-page .toast{
position:fixed;
z-index:60;
left:50%;bottom:108px;
width:min(90%,560px);
padding:13px 16px;
border-radius:16px;
color:#fff;
text-align:center;
font-weight:850;
opacity:0;
pointer-events:none;
transform:translate(-50%,18px);
transition:.2s ease;
box-shadow:0 10px 25px rgba(0,50,45,.18);
}
.travel-page .toast.show{opacity:1;transform:translate(-50%,0)}
.travel-page .toast.ok{background:#0e7467}
.travel-page .toast.bad{background:#a53b38}

/* Tablet / desktop: two-column card wall but mobile stays one-column */
@media(min-width:760px){
.travel-page .app-shell{max-width:980px;padding-left:18px;padding-right:18px}
.travel-page .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.travel-page .group-title{grid-column:1/-1}
.travel-page .hero{min-height:238px;padding-top:31px}
.travel-page .place-card{grid-template-columns:42px 114px minmax(0,1fr)}
.travel-page .thumb{width:114px;height:86px}
}

@media(max-width:470px){
.travel-page .app-shell{padding-left:9px;padding-right:9px}
.travel-page .hero{border-radius:25px;min-height:205px;padding-left:9px;padding-right:9px}
.travel-page .hero-art{left:10px;right:10px}
.travel-page .place-card{grid-template-columns:34px 90px minmax(0,1fr);gap:8px;padding:9px 9px}
.travel-page .place-card.selected{padding:8px 8px}
.travel-page .checkbox{width:31px;height:31px;font-size:19px}
.travel-page .thumb{width:90px;height:72px;border-radius:15px;font-size:33px}
.travel-page .place-top strong{font-size:16.7px}
.travel-page .place-sub{font-size:13.1px}
.travel-page .place-detail{font-size:12px}
.travel-page .map-link{min-height:30px;padding:5px 9px;font-size:11.8px}
.travel-page .tab{padding:11px 3px}
}

@media(max-width:370px){
.travel-page .place-card{grid-template-columns:31px 78px minmax(0,1fr);gap:7px}
.travel-page .thumb{width:78px;height:68px}
.travel-page .tab{font-size:11.5px}
.travel-page .hero h1{font-size:34px}
}

@media(prefers-reduced-motion:reduce){
.travel-page *,
.travel-page *::before,
.travel-page *::after{scroll-behavior:auto!important;transition:none!important}
}