/* ========================================================= AROUNDTRIP — Editorial Minimal Redesign (DESIGN MOCKUP) Design system + components. Not the live site. ========================================================= */ /* ---------- Fonts ---------- */ /* Pretendard·Google(Noto/Black Han Sans) 폰트 CSS는 각 HTML 에서 로 병렬 로드. (이전엔 여기서 @import → style.css 파싱 후에야 폰트 CSS를 받는 렌더링 차단 워터폴이 생겨 페이지 이동 시 빈 화면 깜빡임을 유발했음. preconnect + 병렬 link로 근본 해결) */ /* 어라운드트립 실제 디스플레이 폰트 (TmonMonsori Black) — 라이브 사이트와 동일 자산 */ /* font-display:swap → 폰트 로드 후 실제 폰트로 교체. optional은 폰(첫 방문)에서 영구 폴백되어 PC와 폰트가 달라지는 문제 발생 */ @font-face{font-family:'TmonMonsori Black';src:url('https://framerusercontent.com/assets/Al1FbS6VZLWpDlDyh50UZtvJT4.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;} @font-face{font-family:'TmonMonsori';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;} /* ---------- Tokens ---------- */ :root{ --ink:#0E0E0E; --ink-2:#3D3D3D; --ink-3:#8A8A8A; --paper:#FFFFFF; --paper-2:#F4F3F1; --paper-3:#EAE9E6; --line:#E7E6E3; --line-2:#D7D6D2; --clay:#0E0E0E; /* 어라운드트립은 모노톤(흑/백) — 액센트=잉크 */ --clay-deep:#000; --white:#fff; /* 어라운드트립 톤: 디스플레이=TmonMonsori Black, 본문=Pretendard */ --display:'TmonMonsori Black','Black Han Sans','Noto Sans KR',sans-serif; --serif:var(--display); --serif-ko:var(--display); --sans:'Pretendard','Pretendard Variable','Noto Sans KR',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --maxw:1280px; --gutter:clamp(20px,5vw,72px); --radius:2px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Page Transitions ---------- */ /* CSS View Transitions: 같은 도메인 페이지 이동 시 크로스페이드 (Chrome 126+, Safari 18.2+) 구 페이지가 사라진 뒤 신 페이지가 그려지는 빈 구간(깜빡임)을 제거한다 */ /* 페이지 전환 크로스페이드 (Chrome 126+, Safari 18.2+): 구 페이지를 0.16s 동안 페이드아웃, 신 페이지는 즉시 표시. pagereveal 핸들러(main.js)가 뷰포트 이미지 로드 후 전환 시작. */ /* ---------- Page transition ---------- */ @view-transition{navigation:auto} ::view-transition-old(root){animation:none} ::view-transition-new(root){animation:none} html:active-view-transition .site-header{transition:none!important} /* ---------- Reset ---------- */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} a,button,label,input,select,textarea,[role="button"]{touch-action:manipulation} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable} body{ font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.65; font-size:16px; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} ::selection{background:var(--clay);color:#fff} /* ---------- Layout helpers ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .wrap-wide{max-width:1600px;margin:0 auto;padding-inline:var(--gutter)} .section{padding-block:75px} /* PC 메인페이지: 섹션 상하 여백 50px */ @media(min-width:769px){.page-home .section{padding-block:50px}} .divider{height:1px;background:var(--line);border:0} /* eyebrow / index labels */ .eyebrow{ font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--clay);font-weight:600; display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--clay);display:inline-block} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(32px,4vw,20px)} .sec-head h2{ font-family:var(--sans);font-weight:340; font-size:clamp(30px,4.6vw,38px);line-height:1.25;letter-spacing:-.02em; margin-top:18px; } .sec-head .sub{color:var(--ink-2);max-width:46ch;font-size:15px;margin-top:14px} .sec-head .idx{font-family:var(--serif);font-size:13px;color:var(--ink-3);letter-spacing:.1em;white-space:nowrap} /* links */ .link-more{ font-size:13px;letter-spacing:.04em;font-weight:600; display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--ink); padding-bottom:3px;transition:gap .3s var(--ease),color .3s,border-color .3s; } .link-more:hover{gap:14px;color:var(--clay);border-color:var(--clay)} .link-more .arw{transition:transform .3s var(--ease)} .link-more:hover .arw{transform:translateX(2px)} /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; height:54px;padding:0 30px;border-radius:100px; font-size:16px;font-weight:600;letter-spacing:.02em; transition:transform .3s var(--ease),background .3s,color .3s; } .btn-fill{background:var(--ink);color:var(--paper)} .btn-fill:hover{background:var(--clay);transform:translateY(-2px)} .btn-line{border:1px solid var(--line-2);color:var(--ink)} .btn-line:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)} /* ============ HEADER ============ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(251,250,246,0); transition:background .4s var(--ease),box-shadow .4s,border-color .4s; border-bottom:1px solid transparent; } .site-header.solid{backdrop-filter:saturate(140%) blur(14px)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px} .nav .brand,.nav .nav-menu,.nav .nav-cta{transform:translateY(10px)} .brand{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:.02em;line-height:1;display:flex;flex-direction:column} .brand b{font-weight:500} .brand small{font-family:var(--sans);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;font-weight:600} .nav-menu{display:flex;gap:clamp(14px,2vw,30px);align-items:center;flex:0 0 auto;white-space:nowrap} .nav-menu a{font-size:15px;font-weight:600;letter-spacing:.08em;color:#000000;position:relative;padding:6px 0;transition:color .3s} .nav-menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--clay);transition:width .35s var(--ease)} .nav-menu a:hover,.nav-menu a.active{color:var(--ink)} .nav-menu a:hover::after,.nav-menu a.active::after{width:100%} .nav-cta{display:flex;align-items:center;gap:18px;flex:0 0 auto} .nav-cta .kakao,.nav-cta .nav-login{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink);transition:color .3s;white-space:nowrap;flex:0 0 auto} .nav-cta .nav-login{display:inline-flex;align-items:center;justify-content:center;background:#000;color:#fff;padding:4px 15px;border-radius:30px;border:1px solid #000} .nav-cta .nav-login:hover{color:#fff;background:#1f1f1f} .nav-caret{font-size:.5em;margin-left:4px;line-height:1;opacity:.85} .nav-cta .pill{background:none;color:#000;height:40px;padding:0 12px;border-radius:100px;font-size:13px;font-weight:400;display:inline-flex;align-items:center;justify-content:center;min-width:70px;white-space:nowrap;flex:0 0 auto} .burger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px} .burger span{width:22px;height:1.5px;background:var(--ink);display:block;margin-inline:auto;transition:.3s} body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mobile-menu{position:fixed;inset:0;z-index:99;background:var(--paper);transform:translateY(-100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);visibility:hidden} body.menu-open .mobile-menu{transform:translateY(0);visibility:visible;z-index:101} .mm-close{position:absolute;top:20px;right:20px;background:none;border:none;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;opacity:.7} .mm-close:hover{opacity:1} .mobile-menu a{font-family:var(--serif);font-size:34px;font-weight:340;padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .mobile-menu a span{font-family:var(--sans);font-size:12px;color:var(--ink-3);letter-spacing:.1em} /* ============ HERO ============ */ .hero{position:relative;min-height:var(--app-vh,100svh);display:flex;flex-direction:column;padding-top:120px;overflow:hidden;isolation:isolate} /* PC: 히어로를 헤더 아래로 내리고 폭 1600px로 컨테인 (around-trip.com 스타일) */ @media(min-width:769px){ .hero{ min-height:50svh; max-width:1600px; width:calc(100% - 2 * var(--gutter)); margin:96px auto 0; padding-top:0; border-radius:10px; } } .hero-main{flex:1;display:flex;align-items:center;width:100%;position:relative} .hero-bottom{width:100%;display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;position:relative;z-index:1} .hero-bottom .hero-dots{margin-top:0} .hero-desc{font-size:22px;max-width:32ch;line-height:1.55;color:rgba(255,255,255,.92);margin-top:10px} .hero-bg{position:absolute;inset:0;z-index:-1} .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.95);opacity:0;transition:opacity 1s var(--ease)} .hero-bg img.is-active{opacity:1} .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,5,.34) 0%,rgba(10,8,5,.05) 40%,rgba(10,8,5,.55) 100%)} .hero .wrap-wide{width:100%} .hero-inner{color:#fff;max-width:920px} .hero .eyebrow{color:#fff;font-size:16px} .hero .eyebrow::before{background:#fff} .hero h1{font-family:var(--serif);font-weight:330;font-size:45px;line-height:1.3;letter-spacing:0;margin:22px 0 0;text-shadow:0 2px 40px rgba(0,0,0,.25)} .hero-more{display:inline-block;margin-top:30px;color:#fff;font-size:17px;font-weight:600;letter-spacing:.04em;border-bottom:0;padding-bottom:4px;opacity:.88;transition:opacity .3s var(--ease)} .hero-more:hover{opacity:1} .hero h1 em{font-style:italic;font-weight:300} .hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:34px} .hero-foot p{font-size:clamp(15px,1.7vw,19px);max-width:30ch;line-height:1.55;color:rgba(255,255,255,.92)} .scroll-hint{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:10px} .scroll-hint::after{content:"";width:40px;height:1px;background:rgba(255,255,255,.6);display:inline-block;animation:scrollLine 2.2s var(--ease) infinite} @keyframes scrollLine{0%,100%{transform:scaleX(.3);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}} .hero-marquee{position:absolute;bottom:0;left:0;right:0;border-top:1px solid rgba(255,255,255,.18);overflow:hidden;background:rgba(10,8,5,.18)} .hero-marquee .track{display:flex;gap:40px;white-space:nowrap;padding:12px 0;animation:marquee 32s linear infinite;color:rgba(255,255,255,.86);font-size:12px;letter-spacing:.16em;text-transform:uppercase} .hero-marquee .track span{display:inline-flex;gap:40px} .hero-marquee .track i{font-style:normal;color:var(--clay);filter:brightness(1.4)} @keyframes marquee{to{transform:translateX(-50%)}} /* ============ PROGRAM / TRAVEL CARDS ============ */ .grid-travel{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,52px) clamp(24px,3vw,44px)} .tcard{display:block;position:relative} .tcard .media{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:var(--paper-3)} .tcard .media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .tcard:hover .media img{transform:scale(1.05)} .tcard .tag{position:absolute;top:14px;left:14px;z-index:3;background:rgba(251,250,246,.94);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.06em;padding:4px 10px 2px 10px;border-radius:100px} .tcard .tag.soon{background:var(--clay);color:#fff} /* 여행 상태 배지: 여행중(강조) / 모집마감(흐림) 2종만 사용 */ .tcard .tag.ongoing{background:var(--clay);color:#fff} .tcard .tag.closed{background:rgba(14,14,14,.58);color:#fff} .tcard .cardmeta{display:block;margin-top:18px} .tcard h3{font-family:var(--sans);font-weight:700;font-size:clamp(19px,1.9vw,26px);line-height:1.25;letter-spacing:-.01em} .tcard[data-cat="group"] h3{font-size:clamp(19px,1.9vw,20px)} .tcard[data-cat="group"]{border:1px solid var(--line-2);border-radius:var(--radius);padding:5px 18px 16px 18px} /* 지역 라벨: 이미지 우측 상단 배지로 분리 (제목과 겹치지 않게) */ .tcard .place{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.94);color:var(--ink);padding:4px 10px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} .tcard .info{display:flex;gap:16px;margin-top:10px;color:var(--ink-3);font-size:13px} .tcard .info span{display:inline-flex;align-items:center;gap:6px} .tcard:hover h3{color:var(--clay)} /* feature row (split) */ .feature{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,90px);align-items:center} .feature.rev{direction:rtl}.feature.rev>*{direction:ltr} .feature .media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--paper-3)} .feature .media img{width:100%;height:100%;object-fit:cover} .feature h2{font-family:var(--serif);font-weight:340;font-size:clamp(28px,3.6vw,40px);line-height:1.08;letter-spacing:-.02em;margin:16px 0 18px} .feature p{color:var(--ink-2);max-width:48ch;margin-bottom:25px} .feature .eyebrow{font-size:16px;font-weight:500} .feature .btn{height:50px} /* ============ CLASS list ============ */ .class-list{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px} /* 카드 */ .class-card{display:flex;flex-direction:column;text-decoration:none;color:inherit} .cc-img{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--paper-3)} .cc-img .tag{position:absolute;top:14px;left:14px;z-index:3;background:rgba(251,250,246,.94);color:var(--ink);font-size:11px;font-weight:500;letter-spacing:.06em;padding:4px 10px 2px 10px;border-radius:100px} .cc-img .tag.soon{background:var(--clay);color:#fff} .cc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);display:block} .cc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.72) 100%);pointer-events:none} .class-card:hover .cc-img img{transform:scale(1.06)} .cc-tags{position:absolute;top:14px;left:14px;z-index:2;display:flex;gap:6px;flex-wrap:wrap} .cc-tag{font-size:12px;font-weight:500;color:#fff;background:rgba(255,255,255,.22);border-radius:100px;padding:3px 9px;backdrop-filter:blur(6px);letter-spacing:.02em} .cc-over{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:18px 15px 20px} .cc-title{font-family:var(--sans);font-size:1.45em;font-weight:600;color:#fff;line-height:1.25;margin-bottom:5px} .cc-sub{font-size:1.2em;color:#ffffff;font-weight:400;line-height:1.4} /* 카드 하단 정보 */ .cc-body{padding:14px 2px 0} .cc-badge{display:inline-block;width:15px;height:15px;background:#e11d48;border-radius:50%;font-size:9px;font-weight:700;color:#fff;text-align:center;line-height:15px;vertical-align:middle;margin-left:3px} .cc-meta{font-size:15px;color:#000000;line-height:1.6;display:flex;gap:11px;align-items:flex-start;margin-bottom:3px} .cc-meta .ico{flex-shrink:0;display:inline-flex;align-items:center;height:1.6em} @media(max-width:768px){.class-list{grid-template-columns:repeat(2,1fr);gap:24px 14px}} /* 건축클래스 페이지(class.html) 다른강연 목록 — 모바일에서 1열 */ @media(max-width:768px){.page-class .class-list{grid-template-columns:1fr;gap:18px}} @media(max-width:480px){.class-list{grid-template-columns:1fr}} /* ============ MAGAZINE cards ============ */ .grid-mag{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,2.6vw,44px)} .mcard .media{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--paper-3)} .mcard .media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .mcard:hover .media img{transform:scale(1.05)} .mcard .cat{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);font-weight:500;margin-top:18px;display:block} .mcard h3{font-family:var(--sans);font-weight:600;font-size:clamp(18px,1.7vw,22px);line-height:1.3;margin-top:10px} .mcard .excerpt{color:var(--ink-2);font-size:14px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mcard .by{font-size:12px;color:var(--ink-3);margin-top:12px} .mcard:hover h3{color:var(--clay)} /* big editorial first item */ .mag-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,4vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,72px)} .mag-hero .media{aspect-ratio:16/11;overflow:hidden;border-radius:var(--radius)} .mag-hero .media img{width:100%;height:100%;object-fit:cover} .mag-hero h2{font-family:'Pretendard',var(--sans);font-weight:600;font-size:clamp(26px,2.8vw,35px);line-height:1.45;margin:16px 0 16px;letter-spacing:-.01em} .mag-hero .cat{font-size:16px} .mag-hero p{color:var(--ink-2);max-width:50ch;margin-bottom:20px} /* ============ INTERVIEW / quote ============ */ .quote-band{background:var(--ink);color:#fff} .quote-band .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center} /* 메인 인터뷰 띠: 하단 여백 축소 (이미지 80% 높이 + 큰 section 패딩으로 아래가 비어 보임) */ .page-home .quote-band .wrap{padding-bottom:16px} .quote-band .media{aspect-ratio:8/9;overflow:hidden;border-radius:var(--radius)} .quote-band .media img{width:100%;height:80%;object-fit:cover;filter:grayscale(.2)} .quote-band .eyebrow{color:#CFCFCF}.quote-band .eyebrow::before{background:#CFCFCF} .quote-band blockquote{font-family:var(--sans);font-weight:400;font-size:2em;line-height:1.6;letter-spacing:-.01em;margin:22px 0 26px;white-space:pre-line} .quote-band cite{font-style:normal;color:rgba(255,255,255,.66);font-size:14px} .quote-band cite b{color:#fff;font-weight:600} /* ============ ARCHIVE grid (mosaic) ============ */ .grid-archive{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:14px} .acard{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--paper-3);aspect-ratio:1} .acard.tall{grid-row:span 2;aspect-ratio:auto} .acard.wide{grid-column:span 2;aspect-ratio:auto} .acard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .acard:hover img{transform:scale(1.06)} .acard .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:linear-gradient(180deg,transparent 40%,rgba(10,8,5,.7));opacity:0;transition:opacity .4s} .acard:hover .ov{opacity:1} .acard .ov b{color:#fff;font-family:var(--serif-ko);font-weight:500;font-size:16px} .acard .ov span{color:rgba(255,255,255,.75);font-size:12px;margin-top:3px} /* ============ NEWS ============ */ .news-row{display:grid;grid-template-columns:140px 1fr auto;gap:28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:.35s var(--ease)} .news-row:first-child{border-top:1px solid var(--line)} .news-row:hover{padding-left:14px} .news-row .date{font-size:13px;color:var(--ink-3);font-family:var(--serif)} .news-row h4{font-size:16px;font-weight:600} .news-row .ncat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);font-weight:600} /* PC 메인페이지 새소식 행 (모바일은 하단 @media에서 별도 지정) */ .page-home .news-row{padding:14px 0} .page-home .news-row .date{font-size:14px;font-family:var(--sans);font-weight:400} .page-home .news-row .ncat{font-size:14px;font-weight:400} .page-home .news-row h4{font-weight:400} /* ============ FOOTER ============ */ .site-footer{background:var(--paper);color:var(--ink);padding-top:clamp(64px,8vw,70px);border-top:0} .foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding-bottom:clamp(44px,6vw,80px)} .foot-brand .b{font-family:var(--serif);font-size:22px;font-weight:400} .foot-legal{display:flex;gap:18px;margin:20px 0 16px} .foot-legal a{font-size:13px;color:var(--ink-2);transition:color .3s} .foot-legal a:hover{color:var(--ink)} .foot-brand .biz{color:var(--ink-3);max-width:62ch;font-size:11.5px;line-height:1.75;margin-bottom:14px} .foot-brand .copy{color:var(--ink-3);font-size:11px;letter-spacing:.06em} .foot-col h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px} .foot-col a{display:block;padding:7px 0;color:var(--ink-2);font-size:14px;transition:color .3s,padding-left .3s} .foot-col a:hover{color:var(--ink);padding-left:5px} /* Contact 운영정보(운영시간·전화·이메일): 운영정보라 호버 반응(이동/색변화) 제거 */ .foot-col:last-child a:not(.foot-inquiry):hover{color:var(--ink-2);padding-left:0} .foot-col:last-child a.foot-tel:hover{color:var(--ink)} .foot-col .foot-tel{font-size:20px;font-weight:600;color:var(--ink)} .foot-col .foot-inquiry{display:inline-block;margin-top:16px;font-weight:700;color:var(--ink);border:1px solid var(--ink);border-radius:100px;padding:9px 22px} .foot-col .foot-inquiry:hover{background:var(--ink);color:var(--paper);padding-left:22px} @media(max-width:760px){.foot-top{grid-template-columns:1fr;gap:34px}} /* ============ PAGE HERO (sub pages) ============ */ .page-hero{padding-top:110px;padding-bottom:0} .page-hero .eyebrow{margin-bottom:18px} .page-hero h1{font-family:var(--sans);font-weight:330;font-size:clamp(30px,4.6vw,38px);line-height:1.25;letter-spacing:-.03em} .page-hero .lede{color:var(--ink-2);max-width:54ch;margin-top:10px;font-size:clamp(15px,1.7vw,18px)} /* filter chips */ .chips{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 6px} .chip{height:33px;padding:0 28px;border:1px solid var(--line-2);border-radius:3px;font-size:13px;font-weight:600;color:var(--ink-2);transition:.3s} .chip:hover{border-color:var(--ink)} .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ============ TRAVEL DETAIL ============ */ /* 좌우 여백: 기존 inset을 유지하되, 넓은 화면에선 본문(.wrap, max 1280) 박스 가장자리에 맞춰 텍스트가 본문보다 좌측으로 넘어가지 않게 */ /* 좌우 여백: .wrap 박스(max 1280) 가장자리에 맞춤 → td-hero 폭이 항상 본문(.td-body) 이상 */ .td-hero{position:relative;height:min(calc(var(--app-vh,100vh) * .51),450px);display:flex;align-items:flex-end;overflow:hidden;margin:92px max(0px, calc((100% - var(--maxw)) / 2)) 0;border-radius:6px} .td-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65);opacity:0;transition:opacity .4s} .td-hero img.img-ready{opacity:1} /* .td-hero::after (그라데이션 오버레이) 제거됨 */ .td-hero .wrap-wide{position:relative;color:#fff;padding-bottom:150px;width:100%} .td-hero .place{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;display:inline-flex;gap:10px;align-items:center} .td-hero .place::before{content:"";width:24px;height:1px;background:#fff} .td-hero h1{font-family:var(--serif-ko);font-weight:500;font-size:clamp(32px,5.4vw,45px);line-height:1.05;margin:0;padding:35px 0 0;letter-spacing:0;max-width:18ch} .td-meta{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:26px} .td-meta .m b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:600;margin-bottom:5px} .td-meta .m span{font-family:'Noto Sans KR',sans-serif;font-size:17px;font-weight:800} .td-body{display:grid;grid-template-columns:1fr 360px;gap:clamp(36px,5vw,80px);align-items:start;margin-top:-40px} .td-body>aside{margin-top:15px} /* 여행 상세페이지: 본문 추가로 올리고, 예약카드는 td-hero 위로 띄움 */ .page-travel .td-body{margin-top:-55px} .page-travel #book .booking{margin-top:-280px;position:sticky;top:96px;z-index:6} /* 예약·신청 사이드 booking 카드 reveal 애니메이션 완전 제거 — 즉시 표시 */ .page-travel #book .booking.reveal, .page-lecture #book .booking.reveal, .page-lecture #book .booking, .page-lecture #book .reveal.in, .page-apply .apply-side .booking, .page-apply .apply-side .booking.reveal, .page-apply .apply-side .reveal.in{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; transition-delay:0s !important; } .prose{max-width:none} .prose .lead{font-family:var(--serif-ko);font-size:23px;line-height:1.5;font-weight:400;color:var(--ink);margin-bottom:30px;letter-spacing:-.01em} .prose h3{font-family:var(--serif-ko);font-weight:600;font-size:22px;margin:42px 0 14px} .prose p{color:#000000;margin-bottom:12px;line-height:1.6;font-family:'Noto Sans KR'} .prose figure{margin:34px 0} .prose figure img{width:100%;border-radius:var(--radius)} .prose figcaption{font-size:12.5px;color:var(--ink-3);margin-top:10px;padding-left:14px;border-left:2px solid var(--clay)} .prose .pullquote{font-family:var(--serif-ko);font-weight:500;font-size:clamp(22px,2.6vw,24px);line-height:1.4;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:28px 0;margin:40px 0;letter-spacing:-.01em} /* itinerary */ .itinerary{border-top:1px solid var(--line)} .day{border-bottom:1px solid var(--line);padding:24px 0;display:grid;grid-template-columns:88px 1fr;gap:24px} .day .d{font-family:var(--serif);color:var(--clay);font-size:15px;font-weight:500} .day h4{font-family:var(--sans);font-size:19px;font-weight:700;margin-bottom:8px} .day ul li{position:relative;padding-left:18px;color:var(--ink-2);margin-bottom:4px;font-size:14.5px;line-height:1.6} .day ul li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--line-2)} /* booking sidebar */ .booking{position:sticky;top:96px;background:var(--white);border:1px solid #adadad;border-radius:6px;padding:28px;box-shadow:0 18px 50px -30px rgba(20,15,5,.4)} .booking .price{display:flex;align-items:baseline;gap:8px;margin-bottom:6px} .booking .price b{font-family:var(--serif);font-size:34px;font-weight:500} .booking .price small{color:var(--ink-3);font-size:13px} .booking .bk-evt-title{display:none} .booking .meta-line{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px} .booking .meta-line>span:first-child{color:var(--ink-3)} .booking .meta-line:last-of-type{border-bottom:none} .booking .btn{width:100%;margin-top:18px} .booking .reassure{font-size:12px;color:var(--ink-3);text-align:center;margin-top:14px;line-height:1.6} .gallery-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px} .gallery-strip img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius);cursor:pointer;transition:opacity .3s} .gallery-strip img:hover{opacity:.82} /* guide card */ .guide-card{display:flex;gap:18px;align-items:center;padding:22px;background:var(--paper-2);border-radius:6px;margin-top:30px} .guide-card img{width:78px;height:78px;border-radius:50%;object-fit:cover;flex-shrink:0} .guide-card b{font-family:var(--serif-ko);font-size:17px;font-weight:600;display:block} .guide-card .role{font-size:12px;color:var(--clay);font-weight:600;letter-spacing:.06em;margin:3px 0 7px} .guide-card p{font-size:13.5px;color:var(--ink-2);line-height:1.6} /* ============ MAGAZINE DETAIL ============ */ .article-head{text-align:center;max-width:1000px;margin:0 auto;padding-top:130px} .article-head .cat{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);font-weight:600;border:1px solid #000;border-radius:20px;padding:5px 14px} .article-head h1{font-family:var(--sans);font-weight:600;font-size:clamp(30px,4.6vw,42px);line-height:1.18;letter-spacing:-.02em;margin:45px 0 50px} .article-head .sub{width:85%;margin:0 auto;font-size:clamp(15px,2vw,17px);color:var(--ink-2);line-height:1.55;font-weight:400;white-space:pre-line} .article-head .byline{display:flex;gap:18px;align-items:center;justify-content:center;margin-top:28px;font-size:14px;color:var(--ink-3)} .article-head .byline b{color:var(--ink);font-weight:600;margin-left:4px} .article-cover{margin:clamp(34px,5vw,60px) 0} .article-cover img{width:100%;max-height:78vh;object-fit:cover;border-radius:var(--radius)} .article-cover figcaption{font-size:12.5px;color:var(--ink-3);margin-top:12px;text-align:center} .article-body{max-width:950px;margin:0 auto} /* 본문 텍스트는 좁은 가독 컬럼, 이미지(figure)는 넓게 흐르도록 */ .article-body>p,.article-body>h2,.article-body>.pullquote,.article-body>.tags{max-width:800px;margin-inline:auto} .article-body p{font-size:16.5px;line-height:1.85;color:#2c2820} .article-body h2{font-family:var(--serif-ko);font-weight:600;font-size:clamp(24px,3vw,32px);margin:48px 0 16px;letter-spacing:-.01em} .article-body figure{margin:42px 0} .article-body figure.wide{width:min(100vw - 2*var(--gutter),1100px);margin-left:50%;transform:translateX(-50%)} .article-body figure img{width:100%;border-radius:var(--radius);display:none} /* 본문 사진(에디터가

안에 넣는 bare img) — 사진 간 상하 여백 */ .article-body img{display:block;width:100%;margin-top:28px;margin-bottom:0;padding-top:0;border-radius:8px;cursor:zoom-in} .article-body figcaption{font-size:12.5px;color:var(--ink-3);margin-top:11px;padding-left:14px;border-left:2px solid var(--clay)} .article-body .pullquote{font-family:var(--serif-ko);font-weight:500;font-size:clamp(23px,2.8vw,34px);line-height:1.42;color:var(--ink);text-align:center;padding:36px 0;margin:44px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);letter-spacing:-.01em} /* ============ ARCHIVE DETAIL (사진 에세이형) ============ */ .ar-article{--arw:880px;padding-top:96px} .ar-cover{max-width:1100px;margin:0 auto} .ar-cover img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:10px;display:block} .ar-head{max-width:var(--arw);margin:clamp(34px,4.5vw,56px) auto 0;text-align:center;padding-bottom:8px} .ar-head .ar-cat{display:inline-block;font-size:18px;font-weight:600;letter-spacing:.04em;color:var(--clay);margin-bottom:34px;border-top:1px solid #000;border-bottom:1px solid #000;padding:3px 0} .ar-head h1{font-family:var(--sans);font-size:clamp(32px,5vw,52px);line-height:1.1;letter-spacing:-.01em} .ar-head .ar-badge{display:inline-block;margin-top:18px;font-size:13px;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);border-radius:100px;padding:6px 16px} .ar-body{max-width:720px;margin:clamp(30px,4vw,44px) auto 0} .ar-body .lead{font-family:var(--serif-ko);font-size:21px;line-height:1.6;color:var(--ink);margin-bottom:18px;letter-spacing:-.01em} .ar-body p{font-size:16.5px;line-height:1.85;color:var(--ink-2)} .ar-body img{display:block;width:100%;margin-top:28px;margin-bottom:28px;border-radius:8px;cursor:zoom-in} .ar-note{max-width:640px;margin:6px auto;padding:6px 0} .ar-note p{font-size:16.5px;line-height:1.85;color:var(--ink-2);text-align:center} .ar-gallery{max-width:var(--arw);margin:clamp(30px,4vw,46px) auto 0;display:flex;flex-direction:column;gap:14px} .ar-gallery img{width:100%;border-radius:8px;display:block;cursor:zoom-in;transition:opacity .3s} .ar-gallery img:hover{opacity:.95} .ar-copyright{max-width:var(--arw);margin:22px auto 0;text-align:center;font-size:12px;color:var(--ink-3);letter-spacing:.02em} .ar-spec{max-width:var(--arw);margin:clamp(34px,4vw,48px) auto 0} .ar-spec dl{border-top:1px solid var(--ink)} .ar-spec dl>div{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:15px 4px;border-bottom:1px solid var(--line)} .ar-spec dt{color:var(--ink-3);font-size:14px;font-weight:600;letter-spacing:.02em} .ar-spec dd{color:var(--ink);font-size:15px;font-weight:500} .ar-next{display:block;max-width:var(--arw);margin:clamp(48px,6vw,80px) auto;text-decoration:none;color:inherit} .ar-next .lbl{display:block;text-align:right;font-family:var(--display);font-size:14px;color:var(--ink-3);margin-bottom:14px} .ar-next-card{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:18px;transition:border-color .3s,box-shadow .3s} .ar-next-card:hover{border-color:var(--line-2);box-shadow:0 18px 40px -28px rgba(20,15,5,.4)} .ar-next-card .media{aspect-ratio:4/3;overflow:hidden;border-radius:6px} .ar-next-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .ar-next-card:hover .media img{transform:scale(1.05)} .ar-next-card .ar-cat{display:block;font-size:12px;color:var(--clay);font-weight:600;margin-bottom:8px} .ar-next-card h3{font-family:var(--serif-ko);font-weight:600;font-size:22px;margin-bottom:10px} .ar-next-card p{font-size:14px;color:var(--ink-2);line-height:1.65} @media(max-width:680px){.ar-spec dl>div{grid-template-columns:96px 1fr;gap:14px}.ar-next-card{grid-template-columns:1fr}} .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:48px;padding-top:30px;border-top:1px solid var(--line)} .tags a{font-size:13px;color:var(--ink-2);border:1px solid var(--line-2);border-radius:100px;padding:7px 15px;transition:.3s} .tags a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* lightbox */ .lightbox{position:fixed;inset:0;z-index:300;background:rgba(12,9,5,.94);display:none;align-items:center;justify-content:center;padding:40px} .lightbox.open{display:flex} .lightbox img{max-width:92vw;max-height:90vh;border-radius:var(--radius)} .lightbox .x{position:absolute;top:24px;right:30px;color:#fff;font-size:30px;width:44px;height:44px} /* reveal animation: 기본값은 보임(opacity:1). JS가 뷰포트 밖 요소에만 .pre-hide를 추가해 숨기고 IO로 페이드인. → 첫 로드 시 화면 안 요소는 항상 즉시 보임 → 페이지 전환 깜빡임 없음 */ .reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.pre-hide{opacity:0;transform:translateY(8px)} .reveal.pre-hide.in{opacity:1;transform:none} /* 목록 페이지: 기존 override — 이미 기본 보임이므로 실질적으로 무해하지만 명시 유지 */ body.page-class .reveal, body.page-travel-list .reveal, body.page-mag-list .reveal{opacity:1;transform:none;transition:none;animation:none} /* 클래스 목록은 JS 주입+at_order 정렬 전까지 비어 영역이 붕괴됐다 채워지며 깜빡임 → 카드 채워지기 전 높이 예약(콘텐츠 점프 방지) */ body.page-class .class-list:not(:has(.class-card)){min-height:60vh} /* 모바일: 히어로(.hero)와 섹션 제목(.sec-head h2)의 진입 애니메이션 제거 */ @media(max-width:768px){ .hero-anim{animation:none!important} /* 히어로 커버 슬라이드쇼 자동전환·크로스페이드 제거 — 첫 슬라이드 정적 고정 */ .hero-bg img{transition:none!important} .scroll-hint::after{animation:none!important} .sec-head.reveal{opacity:1;transform:none;transition:none;animation:none} } /* ---------- Responsive ---------- */ @media (max-width:1000px){ .grid-mag{grid-template-columns:repeat(2,1fr)} .td-body{grid-template-columns:1fr} .booking{position:static;margin-top:20px} .feature,.mag-hero,.quote-band .wrap{grid-template-columns:1fr;gap:30px} .feature.rev{direction:ltr} .grid-archive{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .nav-menu,.nav-cta .kakao,.nav-cta .nav-login{display:none} .burger{display:flex} .grid-travel,.grid-mag{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr;gap:36px} .class-row{grid-template-columns:84px 1fr;gap:16px;padding:16px 0} .class-row .go{display:none} .class-row .thumb{width:84px} .news-row{grid-template-columns:1fr;gap:6px} .news-row .date{order:-1} /* 메인페이지 새소식 행 간격·글자 축소 */ .page-home .news-row{padding:8px 0;gap:3px} .page-home .news-row .date{font-size:12px;order:1} .page-home .news-row .ncat{font-size:13px;order:-1} .article-body figure.wide{width:100%;margin-left:0;transform:none} .td-meta{gap:20px} } /* 여행상세 예약카드: 브라우저를 줄여도(태블릿/좁은 데스크톱) 우측에 고정(sticky) 유지. 기존 ≤1000px에서 본문 아래로 떨어지던 것을 ≥769px까지 2열(본문+우측 예약카드)로 유지. ≤768px(폰)은 기존 모바일 전용 처리(아래 미디어쿼리)에 맡김 — 건드리지 않음. */ @media(min-width:769px){ .page-travel .td-body{grid-template-columns:minmax(0,1fr) 360px} /* PC: 예약카드 -320px 위로 + 스크롤해도 화면에 고정(sticky) + 히어로 이미지 위로(z-index) */ .page-travel #book .booking{margin-top:-320px;position:sticky;top:96px;z-index:10} /* #book을 본문 높이만큼 늘려야 sticky가 스크롤 내내 작동(align-items:start로 기본은 내용높이) */ .page-travel #book{align-self:stretch} } /* ========================================================= HOME v2 — faithful to around-trip.com ========================================================= */ /* program tabs */ .tabs{display:inline-flex;gap:2px;background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:4px} .tabs button{height:38px;padding:0 22px;border-radius:100px;font-size:14px;font-weight:600;color:var(--ink-2);transition:.3s} .tabs button.on{background:var(--ink);color:var(--paper)} /* 3-up grid */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,2vw,46px) clamp(22px,1.8vw,38px)} /* program card guide line (extends .tcard) */ .tcard .gname{font-size:14px;color:#212121;font-weight:400;letter-spacing:.02em;margin-top:14px;display:flex;align-items:center;gap:7px} .tcard .gname::before{content:"";width:14px;height:1px;background:var(--clay)} .tcard .gname + .cardmeta{margin-top:7px} .tcard .theme{color:#616161;font-size:17px;margin-top:5px;line-height:1.5} .tcard[data-cat="group"] .theme{font-size:15px;color:#939393;font-weight:300} .tcard .date{display:inline-block;margin-top:11px;font-family:var(--sans);font-size:16px;color:var(--ink)} /* 썸네일 없는 카드(기업·단체·지자체) — 사진 대신 모노톤 블록 */ .tcard--noimg .media{display:flex;align-items:center;justify-content:center;background:var(--ink)} .tcard--noimg .noimg-label{font-family:var(--display);color:#fff;font-size:clamp(22px,2.3vw,30px);line-height:1.08;text-align:center;letter-spacing:.03em} /* 썸네일 없는 행사 리스트 카드(지자체·기업 행사) — 국내/해외와 동일하되 사진 자리는 border 박스로 */ .tcard--outline{border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 22px 24px;display:flex;flex-direction:column;transition:border-color .35s var(--ease),background .35s var(--ease)} .tcard--outline:hover{border-color:var(--ink);background:var(--paper-2)} .tcard--outline .oc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} .tcard--outline .oc-date{font-family:var(--serif);font-size:14px;color:var(--ink)} .tcard--outline .oc-vis{font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 11px;border-radius:100px;white-space:nowrap} .tcard--outline .oc-vis.pub{background:#e8f1ec;color:#2f6f4f} .tcard--outline .oc-vis.pri{background:var(--paper-3);color:var(--ink-3)} .tcard--outline h3{font-family:var(--serif-ko);font-weight:500;font-size:clamp(18px,1.8vw,22px);line-height:1.25;letter-spacing:-.01em;margin:0} .tcard--outline:hover h3{color:var(--clay)} .tcard--outline .oc-client{font-size:12.5px;color:var(--ink-3);font-weight:600;letter-spacing:.02em;margin-top:11px;display:flex;align-items:center;gap:7px} .tcard--outline .oc-client::before{content:"";width:14px;height:1px;background:var(--clay)} .tcard--outline .theme{color:var(--ink-2);font-size:16px;margin-top:9px;line-height:1.5} .tcard[data-cat="group"]{cursor:pointer} /* ===== 행사 비밀번호 모달 ===== */ .pw-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px} .pw-modal[hidden]{display:none} .pw-back{position:absolute;inset:0;background:rgba(14,14,14,.5);backdrop-filter:blur(2px)} .pw-box{position:relative;z-index:1;width:100%;max-width:380px;background:var(--paper);border-radius:16px;padding:34px 30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:pwPop .25s var(--ease)} @keyframes pwPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}} .pw-x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:24px;line-height:1;color:var(--ink-3);cursor:pointer} .pw-x:hover{color:var(--ink)} .pw-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-bottom:10px} .pw-box h3{font-family:var(--serif-ko);font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.01em} .pw-desc{color:var(--ink-2);font-size:13.5px;margin-top:8px;line-height:1.5} .pw-input{width:100%;height:48px;margin-top:18px;padding:0 16px;border:1px solid var(--line-2);border-radius:10px;font-family:inherit;font-size:15px;background:var(--paper-2);outline:none;transition:border-color .2s,background .2s} .pw-input:focus{border-color:var(--ink);background:var(--paper)} .pw-err{color:#c0392b;font-size:12.5px;margin-top:9px} .pw-err[hidden]{display:none} .pw-actions{display:flex;gap:10px;margin-top:20px} .pw-actions .btn{flex:1;height:48px;padding:0 18px;font-size:14px} .btn-ghost{border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper)} .btn-ghost:hover{border-color:var(--ink);color:var(--ink)} /* future / pending chips */ .future{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px;padding-top:30px;border-top:1px solid var(--line)} .future span{border:1px dashed var(--line-2);color:var(--ink-2);border-radius:100px;padding:9px 16px;font-size:16px} .future span i{font-style:normal;color:var(--clay);font-weight:400;font-size:clamp(19px,1.9vw,22px);margin-left:7px} .tcard-pending{font-size:clamp(19px,1.9vw,22px);font-weight:400} /* guidebooks */ .grid-books{display:grid;grid-template-columns:repeat(4,1fr);gap:6%} .book{display:block;perspective:1300px} .book .cover{position:relative;aspect-ratio:3/4.2;transform-style:preserve-3d} .book .cover .pages{position:absolute;inset:0;border-radius:0 var(--radius) var(--radius) 0;background:linear-gradient(90deg,#dcd7cd 0,#fbfaf7 16%);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 38px -28px rgba(20,15,5,.5)} .book .cover .pages span{font-family:var(--display);font-size:10px;letter-spacing:.24em;color:var(--ink-3)} .book .cover .pages img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0 var(--radius) var(--radius) 0} .book .cover .front{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;transform-origin:left center;transition:transform .8s var(--ease),box-shadow .5s var(--ease);box-shadow:0 22px 44px -26px rgba(20,15,5,.55);z-index:2;backface-visibility:hidden} .book .cover .front img{width:100%;height:100%;object-fit:cover} .book .cover .front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,0));z-index:1} .book:hover .cover .front{transform:rotateY(-42deg);box-shadow:20px 28px 54px -22px rgba(20,15,5,.5)} .book h4,.book small{display:none} /* reviews */ .grid-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)} .rcard{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:15px} .rcard .stars{color:var(--clay);font-size:13px;letter-spacing:3px} .rcard p{font-size:14.5px;color:#2c2820;line-height:1.75;flex:1} .rcard .who{font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px} .rcard .who b{color:var(--ink);font-weight:600} /* architect guide cards */ .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)} /* 건축가이드 페이지: JS가 가이드를 채우기 전(빈 그리드) 짧아진 페이지 때문에 아래 어두운 .quote-band가 잠깐 위로 비치는 깜빡임 방지 — 빈 동안만 높이 확보(채워지면 :empty 해제로 자동 제거) */ /* 가이드 카드(.gcard)가 채워지기 전(빈 상태·placeholder 포함)엔 높이 예약 → 아래 어두운 .quote-band가 위로 올라와 검정 깜빡임 나는 것 방지. (:empty는 main.js가 placeholder 주입하면 깨져서 :not(:has) 사용) */ .page-architect .guide-grid:not(:has(.gcard)){min-height:80vh} .gcard .media{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--paper-3)} .gcard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .gcard .g-front{z-index:1;transition:opacity .6s var(--ease)} .gcard .g-back{opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.1s var(--ease)} .gcard:hover .g-front{opacity:0} .gcard:hover .g-back{opacity:1;transform:scale(1)} .gcard .g-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background:linear-gradient(180deg,transparent 42%,rgba(8,7,5,.78));color:#fff} .gcard .g-name{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:-.01em} .gcard .g-role{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:4px} .gcard .g-bio{font-size:13px;color:rgba(255,255,255,.92);line-height:1.6;display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;will-change:grid-template-rows,opacity;transition:grid-template-rows .55s var(--ease),opacity .45s var(--ease),margin-top .45s var(--ease)} .gcard .g-bio>span{display:block;overflow:hidden;min-height:0} .gcard:hover .g-bio{grid-template-rows:1fr;opacity:1;margin-top:13px} /* 가이드 카드 — 마우스 오버 시 이력(CV)이 펼쳐지는 애니메이션 */ .gcard .g-cv{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .55s var(--ease),opacity .45s var(--ease),margin-top .45s var(--ease)} .gcard .g-cv>ul{overflow:hidden;min-height:0;margin:0;padding:0;list-style:none;font-size:12px;color:rgba(255,255,255,.92);line-height:1.5} .gcard .g-cv li{position:relative;padding-left:13px} .gcard .g-cv li::before{content:'–';position:absolute;left:0;opacity:.6} .gcard:hover .g-cv{grid-template-rows:1fr;opacity:1;margin-top:13px} @media(max-width:1000px){.grid-3,.grid-reviews,.guide-grid{grid-template-columns:repeat(2,1fr)}.grid-books{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){.grid-3,.grid-reviews,.guide-grid,.grid-books{grid-template-columns:1fr}} /* ========================================================= AROUNDTRIP TONE OVERRIDES (TmonMonsori display, monochrome) ========================================================= */ .hero h1 em{font-style:normal} .prose .lead{font-weight:500} /* ===== ARCHIVE — 일반 카드형 (mosaic 대체) ===== */ .grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,2.8vw,48px) clamp(22px,2.4vw,40px)} .ccard{display:block} .ccard .media{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);background:var(--paper-3)} .ccard .media img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease)} .ccard:hover .media img{transform:scale(1.05)} .ccard .region{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#000;font-weight:400;margin-top:8px;padding-bottom:7px;border-bottom:1px solid var(--line)} .ccard .region .ar{margin-left:auto;transition:transform .3s var(--ease)} .ccard:hover .region .ar{transform:translate(3px,-3px)} .ccard h3{font-family:var(--sans);font-weight:600;font-size:22px;line-height:1.3;margin-top:12px;letter-spacing:-.01em} .ccard .ctags{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px} .ccard .ctags span{border:1px solid var(--line-2);border-radius:100px;padding:5px 12px;font-size:12px;color:var(--ink-2)} @media(max-width:1000px){.grid-cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){.grid-cards{grid-template-columns:1fr}} /* ===== 히어로 위(스크롤 전) 네비는 흰색 — 어두운 배경이미지 대비 ===== */ .site-header.over-hero:not(.solid) .brand, .site-header.over-hero:not(.solid) .nav-menu a, .site-header.over-hero:not(.solid) .nav-cta .kakao, .site-header.over-hero:not(.solid) .nav-cta .nav-login{color:#fff} .site-header.over-hero:not(.solid) .brand small{color:rgba(255,255,255,.72)} .site-header.over-hero:not(.solid) .nav-menu a::after{background:#fff} .site-header.over-hero:not(.solid) .burger span{background:#fff} .site-header.over-hero:not(.solid) .nav-cta .pill{background:none;color:#fff} /* PC: 히어로가 헤더 아래로 내려가므로 헤더 객체를 검정(기본색)으로 되돌림 */ @media(min-width:769px){ .site-header.over-hero:not(.solid) .brand, .site-header.over-hero:not(.solid) .nav-menu a, .site-header.over-hero:not(.solid) .nav-cta .kakao, .site-header.over-hero:not(.solid) .nav-cta .kakao{color:var(--ink)} .site-header.over-hero:not(.solid) .brand small{color:var(--ink-3)} .site-header.over-hero:not(.solid) .nav-menu a::after{background:var(--clay)} .site-header.over-hero:not(.solid) .burger span{background:var(--ink)} /* 로그인=검정 pill(흰 글자) 유지, 회원가입=배경없는 검정 글자 (PC 히어로는 헤더 아래라 흰 영역 위) */ .site-header.over-hero:not(.solid) .nav-cta .nav-login{color:#fff} .site-header.over-hero:not(.solid) .nav-cta .pill{background:none;color:#000} } /* ===== 히어로 슬라이드: dot 인디케이터 + 문구 페이드 ===== */ @keyframes heroFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* .hero-inner 텍스트 진입 애니메이션(heroFade) 제거 — 요청에 따라 비활성화 */ .hero-anim{animation:none} .hero-dots{display:flex;gap:11px;margin-top:30px;align-items:center} .hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);border:0;padding:0;cursor:pointer;transition:background .3s,transform .3s} .hero-dots button:hover{background:rgba(255,255,255,.7)} .hero-dots button.on{background:#fff;transform:scale(1.3)} /* ===== 여행상세: 히어로 서브타이틀 + 탭 + 포함내역 + 참고사항 ===== */ .td-hero .td-sub{color:rgba(255,255,255,.9);font-size:clamp(15px,1.8vw,19px);margin-top:14px;max-width:40ch} .td-tabs{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:37px} .td-tabs button{appearance:none;background:none;border:0;padding:15px 2px;margin-right:30px;font-size:15px;font-weight:500;color:#676767;position:relative;cursor:pointer;font-family:inherit;transition:color .3s;white-space:nowrap} .td-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .td-tabs button.on{color:var(--ink)} .td-tabs button.on::after{transform:scaleX(1)} .td-panel{display:none} .td-panel.on{display:block;animation:heroFade .5s var(--ease)} /* 여행상세 '지난 리뷰' 탭 */ .td-reviews{display:flex;flex-direction:column;gap:14px} .td-panel[data-panel="reviews"] .rv-grid{grid-template-columns:1fr} .tdr-card{display:grid;grid-template-columns:130px 1fr;gap:18px;border:1px solid var(--line);border-radius:10px;padding:14px;align-items:center;transition:border-color .2s} .tdr-card:hover{border-color:var(--ink)} .tdr-thumb{aspect-ratio:4/3;border-radius:6px;overflow:hidden} .tdr-thumb img{width:100%;height:100%;object-fit:cover;display:block} .tdr-ex{font-size:14px;color:var(--ink-2);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tdr-meta{display:flex;gap:12px;align-items:center;margin-top:10px;font-size:12.5px} .tdr-prog{font-weight:700;color:var(--ink)} .tdr-author{color:var(--ink-3)} @media(max-width:520px){.tdr-card{grid-template-columns:1fr}.tdr-thumb{display:none}} /* 포함 / 불포함 */ .incl{display:grid;grid-template-columns:5fr 3fr;gap:34px;margin-top:6px} .incl h4{font-family:var(--sans);font-weight:700;font-size:18px;margin-bottom:16px} .incl ul li{position:relative;padding-left:22px;margin-bottom:11px;color:var(--ink-2);font-size:14.5px;line-height:1.6} .incl ul li::before{content:"✓";position:absolute;left:0;color:var(--ink);font-weight:700} .incl .excl ul li::before{content:"✕";color:var(--ink-3);font-weight:600} @media(max-width:600px){.incl{grid-template-columns:1fr;gap:24px}} /* 참고사항 */ .notes li{margin-bottom:5px;color:var(--ink-2);line-height:1.7;font-size:15px} /* 예약카드 행사제목 */ .booking .bk-title{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.3;margin-bottom:0;padding-bottom:16px;border-bottom:1px solid var(--line)} /* ===== 여행상세: 건축가 프로필 ===== */ .td-recommend{margin-top:0;margin-bottom:25px} .td-recommend-ttl{font-size:20px;font-weight:700;color:#3fb1a5;margin-bottom:9px} .td-recommend-list{display:flex;flex-direction:column;gap:6px} .td-recommend-item{font-size:16px;line-height:1.7;color:#222;display:flex;align-items:baseline;gap:8px} .td-recommend-dot{color:#2b6b5a;flex-shrink:0} .architect-profile{border:1px solid #adadad;border-radius:8px;padding:clamp(24px,3vw,38px);margin-top:15px} .ap-top{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap} /* 관리자 등록폼: 건축가 입력 필드(사진/역할/이름/소속/이력) 그룹 박스 — 공개 페이지엔 미적용 */ .fgroup{border:1px solid var(--line-2);border-radius:8px;padding:15px 16px;display:grid;gap:13px} .ap-photo{width:118px;height:118px;border-radius:50%;object-fit:cover;flex-shrink:0} .ap-info{flex:1;min-width:240px} .ap-role{font-size:18px;letter-spacing:.1em;color:var(--clay);font-weight:600} .ap-name{font-family:var(--sans);font-weight:800;font-size:28px;line-height:1.2;margin-top:6px} .ap-name em{display:none} .ap-cv{margin-top:15px} .ap-cv li{position:relative;padding-left:14px;color:#000000;font-size:15px;line-height:1.5;margin-bottom:3px} .ap-cv li::before{content:"·";position:absolute;left:3px;color:var(--ink-3)} .ap-introttl{font-family:var(--sans);font-weight:700;font-size:19px;margin:34px 0 16px;display:flex;align-items:center;gap:9px} .ap-mark{display:inline-flex;align-items:center;background:#43bfb2;color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:100px;font-family:var(--sans)} .ap-mark-img{height:28px;width:auto;display:inline-block;vertical-align:middle;flex-shrink:0} .ap-bio p{color:var(--ink-2);margin-bottom:0;line-height:1.85;font-size:15px} .ap-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px} .ap-gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);cursor:zoom-in;transition:opacity .3s} .ap-gallery img:hover{opacity:.85} @media(max-width:600px){.ap-gallery{grid-template-columns:1fr 1fr}} /* 포스터 상세 이미지 — 여행 상세 포스터를 통째로 넣는 영역 */ .td-overview{font-size:17px;line-height:1.8;color:var(--ink);margin-bottom:28px;white-space:pre-line} .td-map{margin:32px 0} .td-map img{width:100%;height:auto;display:block} /* PC: 지도 이미지 상하 여백 */ @media(min-width:769px){.td-map img{padding:20px 0}} /* 건축캠프 구성 섹션 */ .camp-section{margin:52px 0 40px} .camp-ttl{font-size:2rem;font-weight:800;text-align:center;margin-bottom:20px;letter-spacing:-.02em;color:var(--ink)} .camp-desc{font-size:17px;line-height:1.75;color:var(--ink-2);margin-bottom:23px;white-space:pre-line} .camp-items{display:flex;align-items:stretch;margin-bottom:32px} .camp-item{flex:1;background:#dedadb;padding:20px 20px;text-align:center;border-radius:0;position:relative;z-index:0} .camp-items>.camp-item:nth-child(3){background:#f2f0f1} .camp-item-ttl{font-size:22px;font-weight:700;color:#58484b;line-height:1.35} .camp-item-note{font-size:15px;color:#58484b;margin-top:2px} .camp-sep{display:flex;align-items:center;justify-content:center;padding:0 0 4px 0;font-size:28px;color:#fff;background:#584849;width:23px;height:23px;flex-shrink:0;align-self:center;position:relative;z-index:2;margin:0 -12px;border-radius:4px} .camp-booklets{display:grid;grid-template-columns:1fr 2fr;gap:16px} .camp-booklets img{width:100%;height:auto;border-radius:0;border:1px solid #a9a9a9;display:block} .td-trip-overview{border:1px solid #ccc;margin-top:28px} .td-ov-row{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid #ddd} .td-ov-row:last-child{border-bottom:none} .td-ov-lbl{padding:16px 14px 16px 37px;font-weight:700;font-size:17px;line-height:1.5;color:var(--ink-1);background:#ffffff;border-right:0;display:flex;align-items:center} .td-ov-con{padding:34px 22px 34px 18px;font-size:17px;line-height:1.7;color:#000000} .td-ov-sched{font-size:20px;font-weight:600;color:var(--ink-1)} .td-ov-note{font-size:14px;color:#2f2f2f;margin-top:5px;white-space:pre-line} .td-ov-point{display:flex;gap:8px;align-items:flex-start;line-height:1.8} .td-ov-check{color:#3a7a3a;font-weight:700;flex-shrink:0} .td-ov-cities{white-space:pre-line} .td-apply{margin-top:28px} .td-apply-header{padding:28px 0 26px} .td-apply-ttl{font-size:32px;font-weight:800;line-height:1.1;color:var(--ink-1)} .td-apply-sub{font-size:32px;color:#000000;margin-top:5px;line-height:1.5} .td-apply-sub2{font-size:20px;color:#000000;border-top:1px solid #000;border-bottom:1px solid #000;width:fit-content;margin-top:15px} .td-apply-hr{border:none;border-top:1px solid #ddd;margin:0} .td-apply-row{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid #ddd} .td-apply-row:last-child{border-bottom:none} .td-apply-lbl{padding:10px 0 10px 10px;font-weight:700;font-size:19px;line-height:1.5;color:#07ad8d;background:#fff;display:flex;align-items:center} .td-apply-con{padding:10px 0 10px 10px;font-size:19px;line-height:1.7;color:#000} .td-apply-con s{color:#e03030;text-decoration-color:#e03030} .td-pay{margin-top:56px} .td-discount{margin-top:45px;border:2px dashed #aaa;padding:20px 24px} .td-discount-hd{font-size:17px;font-weight:700;color:#111;margin-bottom:14px} .td-discount-hd-note{font-size:14px;font-weight:400;color:#888;margin-left:10px} .td-discount-list{display:flex;flex-direction:column;gap:8px} .td-discount-item{font-size:17px;line-height:1.6;color:#111} .td-pay-sep{width:32px;height:2px;background:#111;margin:0 auto 18px} .td-pay-ttl{font-family:var(--display);font-size:42px;font-weight:900;text-align:center;margin-bottom:36px;letter-spacing:-.02em} .td-pay-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:36px} .td-pay-step{border:1px solid #8f8f8f;border-radius:10px;padding:14px 10px;text-align:center} .td-pay-step-num{width:36px;height:36px;border-radius:50%;background:#111;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px} .td-pay-step-lbl{font-size:16px;line-height:1.5;color:#111} .td-pay-table{width:100%;border-collapse:collapse;margin-bottom:28px} .td-pay-table th{background:#f2f2f2;padding:14px 10px;font-size:18px;font-weight:600;text-align:center;border-top:2px solid #111;border-bottom:1px solid #ccc} .td-pay-table td{padding:20px 10px;text-align:center;border-bottom:1px solid #ddd;font-size:17px;color:#444} .td-pay-table td.amt{font-size:23px;font-weight:800;color:#111} .td-pay-notes{font-size:17px;line-height:2;color:#000000;white-space:pre-line;padding-left:55px} .td-flight{margin-top:36px;border:2px dashed #aaa;padding:32px 28px 24px;position:relative} .td-flight-hd-wrap{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#fff;padding:0 16px;white-space:nowrap} .td-flight-hd{font-size:20px;font-weight:700;color:#111} .td-flight-opt{margin-top:24px} .td-flight-opt:first-of-type{margin-top:0} .td-flight-opt-ttl{font-size:18px;font-weight:800;color:#111;margin-bottom:8px} .td-flight-opt-sub{font-size:15px;font-weight:400;color:#333;margin-left:6px} .td-flight-opt-body{font-size:15px;line-height:1.9;color:#333;white-space:pre-line} .td-incl-section{margin-top:36px} .td-incl-wrap{display:grid;grid-template-columns:5fr 3fr;gap:5px} .td-incl-col{} .td-incl-hd{padding:5px 18px;font-size:17px;font-weight:700;text-align:center} .td-incl-hd-in{background:#2e2e2e;color:#fff} .td-incl-hd-ex{background:#e8e8e8;color:#1a1a1a} .td-incl-body{padding:16px 18px 16px 0;display:flex;flex-direction:column;gap:2px} .td-incl-item{font-size:17px;line-height:1.6;color:#1a1a1a} .td-incl-lbl{font-weight:700} .td-poster{margin-top:42px} .td-poster img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;transition:opacity .3s} .td-poster img:hover{opacity:.94} .td-poster+.td-poster{margin-top:18px} /* ===== 강연 상세 (lecture-detail) ===== */ .lec-tags{font-size:13px;color:var(--ink-3);letter-spacing:.02em;margin-bottom:22px} /* 건축클래스 본문 폰트 통일(본고딕) — 하위 요소가 상속 (붙여넣기 h6 등 포함) */ .lec-prose,.lec-prose *:not(h2),.lec-session,.lec-session *:not(h2){font-family:'Noto Sans KR','Noto Sans',sans-serif} .lec-session{padding-top:42px;margin-top:42px;border-top:1px solid var(--line)} .lec-eyebrow{display:none} .lec-session h2{font-family:var(--serif-ko);font-weight:600;font-size:35px;line-height:1.25;letter-spacing:0.05em;margin-top:40px;margin-bottom:16px} .lec-session>p{color:var(--ink-2);line-height:1.8;margin-bottom:22px} /* 본문 속 소제목(붙여넣기 h4~h6)이 브라우저 기본값으로 작아지는 것 방지 — 본문 톤에 맞춤 */ .lec-session h4,.lec-session h5,.lec-session h6,.lec-prose h4,.lec-prose h5,.lec-prose h6{font-size:16px;font-weight:700;line-height:1.6;margin:18px 0 6px} .lec-num{counter-reset:lec;display:grid;gap:12px;margin:6px 0 8px} .lec-num li{position:relative;padding-left:40px;color:var(--ink-2);line-height:1.65;font-size:15px} .lec-num li b{color:var(--ink);font-weight:700} .lec-num li::before{counter-increment:lec;content:counter(lec,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--serif);font-size:14px;color:var(--clay);font-weight:600;border:1px solid var(--line-2);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center} .lec-figs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0} .lec-figs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);cursor:zoom-in;transition:opacity .3s} .lec-figs img:hover{opacity:.9} .lec-info{display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:16px;background:var(--paper-2);border-radius:8px;padding:20px 24px;margin-top:20px} .lec-info .m b{display:block;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:5px} .lec-info .m span{font-size:16px;color:var(--ink);font-weight:500} .lec-tabs{margin-top:42px;padding-top:42px;border-top:1px solid var(--line)} /* 회차 탭 — 세그먼티드 컨트롤(클릭 가능한 탭 묶음임을 분명히) */ .lec-tab-bar{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:0;background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:4px} .lec-tab-btn{display:inline-flex;align-items:center;gap:7px;height:35px;padding:4px;border:0;border-radius:9px;font-size:16px;font-weight:600;cursor:pointer;background:transparent;color:#757575;font-family:inherit;transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)} .lec-tab-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35;flex:none} .lec-tab-btn:not(.active):hover{background:rgba(67,191,178,.12);color:#2f8f86} .lec-tab-btn.active{background:#43bfb2;color:#fff;box-shadow:0 3px 10px -3px rgba(67,191,178,.65)} .lec-tab-btn.active::before{content:"✓";background:none;width:auto;height:auto;border-radius:0;opacity:1;font-size:18px;font-weight:700;line-height:1;color:#fff} .lec-tab-date{font-size:12px;font-weight:500;opacity:.8} .lec-tabs .lec-session{margin-top:24px;padding-top:0;border-top:none} @media(max-width:600px){.lec-info{grid-template-columns:repeat(2,1fr)}} .morelec-wrap{margin:30px auto} .lec-detail{padding-top:38px;margin-top:38px;border-top:1px solid var(--line)} .lec-detail h3{font-family:var(--sans);font-weight:700;font-size:20px;margin-bottom:18px} @media(max-width:600px){.lec-figs{grid-template-columns:1fr}} /* 강연 상세: 이미지 없는 플레인 히어로 (검정 텍스트) */ .td-hero.td-hero--plain{height:auto;min-height:0;background:none;overflow:visible;border-radius:0;align-items:flex-start;margin:92px 0 0} .td-hero.td-hero--plain .wrap-wide{max-width:var(--maxw);margin:40px auto 0;color:var(--ink);padding-bottom:clamp(20px,3vw,34px);border-bottom:0;text-align:left} .td-hero.td-hero--plain .place{display:inline-block;color:var(--ink);border:1px solid #717171;border-radius:100px;padding:3px 11px;font-weight:600} .td-hero.td-hero--plain .place+.place{margin-left:8px} .td-hero.td-hero--plain .place::before{display:none} .td-hero.td-hero--plain .td-sub{color:var(--ink-2)} /* 강연 본문: pullquote를 캡션형으로 (lead와 순서 교체됨) */ .lec-prose .pullquote{font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.6} /* CLASS 상세페이지에서만 섹션 패딩 축소 (TRAVEL 미적용) */ .page-lecture .section{padding-block:5px} /* CLASS 상세페이지 우측 신청카드: 위로 당기고 스크롤과 무관하게 고정 */ .page-lecture #book{margin-top:-110px} .page-lecture #book .reveal.in{margin-top:0;padding:17px} .page-lecture .td-hero h1{max-width:none;font-size:2.8em} .page-lecture .td-hero .td-sub{font-size:1.5em} .page-lecture .booking .meta-line{padding:11px 0} .page-lecture .booking .meta-line span:first-child{white-space:nowrap} .page-lecture .booking .meta-line span:last-child{white-space:pre-line;text-align:right} .page-lecture .booking .cap-remain{color:#43bfb2} .page-lecture .architect-profile{padding:30px;background:#f2f2f2} .page-lecture .ap-photo{width:200px;height:200px} .page-lecture .booking .btn{height:50px} .page-lecture #book .booking{position:sticky;top:96px;padding:17px!important} /* 예약카드 reveal 진입/transition 제거 — 클릭·이동 시 transform이 0.9s에 걸쳐 애니메이션돼 잠깐 작아졌다 돌아오는 현상 방지 */ .page-lecture #book .booking.reveal{opacity:1;transform:none;transition:none;animation:none} /* 예약카드 참가비 강조 라인 */ .booking .meta-line.fee{align-items:baseline} .booking .meta-line.fee span:last-child{color:var(--ink)} .booking .meta-line.fee b{font-family:var(--sans);font-size:20px;margin-right:2px} /* ===== INTERVIEW 페이지: 인터뷰 아티클 리스트 ===== */ .ilist{margin-top:8px;border-top:1px solid var(--line)} .irow{display:grid;grid-template-columns:380px 1fr;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(30px,4vw,52px) 0;border-bottom:1px solid var(--line)} .irow .media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--paper-3)} .irow .media img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease)} .irow:hover .media img{transform:scale(1.05)} .irow .media .num{position:absolute;top:14px;left:14px;font-family:var(--display);font-size:13px;letter-spacing:.06em;background:rgba(251,250,246,.94);color:var(--ink);padding:5px 11px;border-radius:100px} .irow .icat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600} .irow h3{font-family:var(--serif-ko);font-weight:500;font-size:clamp(22px,2.6vw,32px);line-height:1.32;letter-spacing:-.01em;margin:13px 0 14px} .irow .who{font-size:14px;color:var(--ink);font-weight:600} .irow .who span{color:var(--ink-3);font-weight:500} .irow .iex{color:var(--ink-2);font-size:14.5px;line-height:1.7;margin-top:13px;max-width:54ch} .irow .more{margin-top:20px} .irow:nth-child(even){direction:rtl} .irow:nth-child(even)>*{direction:ltr} .irow:hover h3{color:var(--clay)} @media(max-width:760px){.irow{grid-template-columns:1fr;gap:18px;padding:28px 0}.irow:nth-child(even){direction:ltr}} /* 제목 부분 강조 (검정 배경 · 흰 글자) */ .hl{background:#000;color:#fff;padding:0 .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone} /* ===== REVIEW: 가로형 후기 카드 (썸네일 + 발췌, 별점 없음) ===== */ .rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,28px)} .rv-card{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;border:1px solid #a0a0a0;border-radius:8px;padding:8px;transition:border-color .3s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)} .rv-card:hover{border-color:var(--line-2);box-shadow:0 18px 40px -28px rgba(20,15,5,.4);transform:translateY(-2px)} .rv-card .thumb{width:150px;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--paper-3)} .rv-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .rv-card:hover .thumb img{transform:scale(1.05)} .rv-card .rv-ex{font-size:13.5px;color:var(--ink-2);line-height:1.65;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .rv-card .rv-prog{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--ink);margin-top:13px} .rv-card .rv-author{font-size:12.5px;color:var(--ink-3);margin-top:3px} @media(max-width:1000px){.rv-grid{grid-template-columns:1fr}} @media(max-width:520px){.rv-card{grid-template-columns:100px 1fr;gap:16px;padding:16px}.rv-card .thumb{width:100px}} /* ===== REVIEW DETAIL: 중앙 칼럼 글 + 사진 스택 ===== */ .rv-article{max-width:820px;margin:120px auto 0;padding:40px 50px 50px 50px} .rv-head{text-align:center;margin-bottom:clamp(30px,5vw,46px)} .rv-head .cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);font-weight:600} .rv-head h1{font-family:var(--sans);font-size:clamp(28px,4vw,40px);line-height:1.2;margin:16px 0 13px} .rv-head .author{font-size:13px;color:var(--ink-3)} @media(min-width:769px){ .rv-head .cat{font-size:18px} .rv-head h1{font-size:clamp(28px,4vw,35px);margin:25px 0 13px} .rv-head .author{font-size:16px;color:#000} } .rv-body p{font-size:16px;line-height:1.85;color:#2c2820;margin-bottom:22px} .rv-photos{display:flex;flex-direction:column;gap:16px;margin-top:clamp(30px,4vw,48px)} .rv-photos img{width:100%;border-radius:var(--radius);cursor:zoom-in} /* ===== FLOATING PROMO MINI-CARD ===== */ .promo-float{position:absolute;top:50%;right:clamp(20px,4vw,72px);transform:translateY(calc(-50% + 20px));width:264px;z-index:5;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 24px 60px -12px rgba(0,0,0,.34),0 8px 22px -8px rgba(0,0,0,.22);transition:top .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s} .promo-float:hover{top:calc(50% - 6px);box-shadow:0 32px 72px -10px rgba(0,0,0,.4),0 10px 26px -8px rgba(0,0,0,.26)} .promo-media{position:relative;aspect-ratio:5/4;overflow:hidden} .promo-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .promo-float:hover .promo-media img{transform:scale(1.05)} .promo-media .tag.soon{position:absolute;top:12px;left:12px;z-index:2;background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:5px 11px;border-radius:100px;letter-spacing:.02em} .promo-badge{position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:700;padding:5px 12px;border-radius:100px;letter-spacing:.06em} .promo-body{padding:15px 17px 18px} .promo-guide{display:block;font-size:12px;color:var(--ink-3,#8a857c);margin-bottom:8px} .promo-body h4{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-.01em;margin:0 0 6px} .promo-theme{font-size:13px;color:var(--ink-2,#6b6760);line-height:1.45;margin:0 0 11px} .promo-date{display:inline-block;font-size:12.5px;font-weight:600;color:var(--ink)} .promo-anim .promo-media img,.promo-anim .promo-body{animation:promoFadeOnly .6s var(--ease) both} @keyframes promoFadeOnly{from{opacity:0}to{opacity:1}} @media (max-width:760px){.promo-float{display:none}} /* ===== 여행 신청 폼 (travel-apply) ===== */ /* 좌: 폼 / 우: 여행정보 사이드바 */ .apply-layout{display:grid;grid-template-columns:1fr 360px;gap:clamp(36px,5vw,80px);align-items:start} .apply-side{position:sticky;top:96px} /* PC: 행사요약(.apply-trip)을 page-hero h1 높이까지 끌어올림 */ @media(min-width:861px){.apply-side{margin-top:-74px}} /* 신청 대상 여행 요약 (우측 카드) */ .apply-trip{border:1px solid var(--line);border-radius:10px;overflow:hidden} .apply-trip .t-img{aspect-ratio:4/3;overflow:hidden} .apply-trip .t-img img{width:100%;height:100%;object-fit:cover;display:block} .apply-trip .t-info{padding:18px 20px 20px} .apply-trip .t-cat{font-size:12px;font-weight:600;color:var(--clay)} .apply-trip h2{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.3;margin:6px 0 16px} .apply-trip .t-meta{display:flex;flex-direction:column} .apply-trip .t-meta li{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:13px 0;border-top:1px solid var(--line)} .apply-trip .t-meta b{color:var(--ink-3);font-weight:400} .apply-trip .t-meta span{color:var(--ink)} .apply-trip .t-meta .fee strong{font-family:var(--sans);font-size:19px;font-weight:600;margin-right:2px} /* 결제방법 안내 (참가비 하단) */ .apply-trip .pay-method{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .apply-trip .pay-method h3{font-family:var(--sans);font-weight:700;font-size:15px;margin-bottom:13px} .pm-opts{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:13px} .pm-opt{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600} .pm-opt::before{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;font-size:10px;font-weight:700} .pm-opt.on{color:var(--ink)} .pm-opt.on::before{content:"✓";background:#16a34a;color:#fff} .pm-opt.off{color:var(--ink-3)} .pm-opt.off::before{content:"✕";border:1px solid var(--line-2);color:var(--ink-3)} .pm-acct{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px} .pm-note{font-size:12px;color:var(--ink-3);line-height:1.65} /* 스텝 */ .apply-step{border-top:1px solid var(--line);padding-top:30px;margin-top:30px} .apply-step:first-of-type{border-top:0;padding-top:0;margin-top:0} .step-head{display:flex;align-items:baseline;gap:12px;margin-bottom:22px} .step-head .step-no{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:.08em;color:var(--clay)} .step-head h3{font-family:var(--sans);font-weight:700;font-size:20px} /* 필드 */ .fld{margin-bottom:20px} .fld-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .fld label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px} .req{color:var(--clay);font-style:normal;margin-left:2px} .apply-form input[type=text],.apply-form input[type=email],.apply-form input[type=tel],.apply-form input[type=date],.apply-form select,.apply-form textarea{ width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:6px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;outline:none;transition:border-color .2s} .apply-form textarea{resize:vertical;line-height:1.7} .apply-form input:focus,.apply-form select:focus,.apply-form textarea:focus{border-color:var(--ink)} .apply-form .invalid{border-color:#d64545!important} /* 라디오 옵션 */ .opt-row{display:flex;gap:10px;flex-wrap:wrap} .opt-row.invalid{outline:1px solid #d64545;outline-offset:4px;border-radius:8px} .opt{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:100px;padding:5px 18px;cursor:pointer;font-size:14px;transition:border-color .2s,background .2s} .opt input{accent-color:var(--ink);margin:0 5px 0 0} .opt:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff} /* 동의 */ .apply-agree{margin-top:30px;padding:18px 20px;background:var(--paper-2);border-radius:8px} .agree-chk{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer} .agree-chk input{margin-top:2px;accent-color:var(--ink);width:17px;height:17px;flex-shrink:0} .agree-chk.invalid,.agree-chk input.invalid{outline:none} .apply-agree input.invalid+span{color:#d64545} .agree-note{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:10px;padding-left:27px} /* 취소·환불 규정 드롭다운 */ .refund-toggle{margin-top:12px;margin-left:27px;border-top:1px solid var(--line-2);padding-top:10px} .refund-toggle summary{list-style:none;cursor:pointer;font-size:13px;font-weight:400;color:var(--ink-2);display:flex;align-items:center;gap:6px;user-select:none} .refund-toggle summary::-webkit-details-marker{display:none} .refund-toggle .chev{transition:transform .25s;font-size:11px;color:var(--ink-3)} .refund-toggle[open] .chev{transform:rotate(180deg)} .refund-list{margin-top:12px;border-top:1px solid var(--line)} .refund-list li{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)} .refund-list b{font-weight:500;color:var(--ink-2)} .refund-list span{font-weight:700;color:var(--ink);white-space:nowrap} .refund-note{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:10px} /* 제출 */ .apply-submit{width:100%;margin-top:26px;font-size:16px;height:54px} /* STEP 3 할인옵션 */ .disc-list{display:flex;flex-direction:column;gap:10px} .disc-opt{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;padding:13px 16px;cursor:pointer;font-size:14px;transition:border-color .2s,background .2s} .disc-opt input{accent-color:var(--ink);width:17px;height:17px;margin:0 10px 0 0;flex-shrink:0} .disc-opt .d-name{flex:1} .disc-opt .d-amt{color:var(--clay);font-weight:600;white-space:nowrap;margin-left:12px} .disc-opt:has(input:checked){border-color:var(--ink);background:var(--paper-2)} .price-sum{margin-top:22px;border:1px solid var(--line);border-radius:8px;padding:18px 20px;background:var(--paper-2)} .price-sum .ps-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:7px 0;color:var(--ink-2)} .price-sum .ps-disc span:last-child{color:var(--clay);font-weight:600} .price-sum .ps-total{border-top:1px solid var(--line-2);margin-top:6px;padding-top:14px;font-weight:700;color:var(--ink)} .price-sum .ps-total span:last-child{font-family:var(--display);font-size:22px} .price-sum .ps-note{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:12px} /* CLASS 결제 단계 (class-apply) */ .pay-stage .pay-lead{color:var(--ink-2);line-height:1.7;font-size:14px;margin-bottom:6px} .pay-mh{font-family:var(--sans);font-weight:700;font-size:16px;margin:26px 0 14px} .pay-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px} .pay-opt{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line-2);border-radius:10px;padding:16px 18px;cursor:pointer;transition:border-color .2s,background .2s;position:relative} .pay-opt input{position:absolute;opacity:0;pointer-events:none} .pay-opt .po-main{font-weight:700;font-size:15px;color:var(--ink)} .pay-opt .po-sub{font-size:12.5px;color:var(--ink-3)} .pay-opt:has(input:checked){border-color:var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--ink)} .pay-detail{margin-top:16px;border:1px solid var(--line);border-radius:8px;padding:16px 18px;background:var(--paper-2)} .pay-detail p{font-size:14px;color:var(--ink);line-height:1.6} .pay-detail .pay-hint{font-size:12.5px;color:var(--ink-3);margin-top:8px} .pay-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .pay-actions .btn{min-width:150px} @media(max-width:520px){.pay-opts{grid-template-columns:1fr}} /* 완료 */ /* 접수완료 — 미니카드(좌) + 안내(우), apply-layout 전체폭 차지 */ .apply-done{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:100px;align-items:center;padding:24px 0 36px;margin-top:110px} .apply-done[hidden]{display:none} /* display:grid가 [hidden] UA규칙을 덮어쓰는 문제 방지 — 결제완료 전엔 숨김 */ .done-card{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,15,5,.5);width:100%;max-width:340px;justify-self:center} .done-card img{width:100%;height:100%;object-fit:cover;display:block} .done-card .dc-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 24px 40px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));color:#fff} .done-card .dc-cap span{font-size:12px;font-weight:600;letter-spacing:.04em;opacity:.92} .done-card .dc-cap h3{font-family:var(--serif-ko);font-weight:600;font-size:26px;line-height:1.1;margin:6px 0 5px;color:#fff} .done-card .dc-cap p{font-size:13.5px;opacity:.92;margin:0} .done-msg{max-width:540px} .done-msg .done-mark{width:56px;height:56px;border-radius:50%;background:#16a34a;color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;margin-bottom:20px} .done-msg h2{font-family:var(--sans);font-weight:600;font-size:clamp(26px,3.4vw,34px);line-height:1.15;margin-bottom:14px} .done-msg>p{color:var(--ink-2);line-height:1.75;font-size:15px;margin-bottom:22px} .done-acct{border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;background:var(--paper-2);margin-bottom:24px} .done-acct h4{font-family:var(--sans);font-weight:700;font-size:16px;margin-bottom:8px} .done-acct>p{font-size:13.5px;color:var(--ink-2);line-height:1.7;margin-bottom:16px} .acct-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)} .acct-rows li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14px} .acct-rows li b{color:var(--ink-3);font-weight:600} .acct-rows li span{font-family:var(--sans);font-weight:700;color:var(--ink);word-break:break-all;text-align:right} .done-hint{font-size:12.5px;color:var(--ink-3);line-height:1.65;margin-top:14px} .done-cta{display:flex;flex-wrap:wrap;gap:12px} .done-cta .btn{min-width:158px} @media(max-width:860px){.apply-done{grid-template-columns:1fr;gap:28px;margin-top:0;padding:5px 0 36px}.done-card{max-width:280px;order:-1}.done-msg{padding:0 10px}.done-msg h2{font-size:24px}.done-msg>p{font-size:14px;line-height:1.6}.done-msg .done-mark{width:30px;height:30px;margin-bottom:12px}.done-acct{margin-bottom:35px}} @media(max-width:860px){.apply-layout{grid-template-columns:1fr}.apply-side{position:static;margin-top:32px;max-width:420px}} @media(max-width:600px){.fld-grid{grid-template-columns:1fr}} /* ===== 회원가입 / 로그인 (auth) ===== */ .authform input[type=text],.authform input[type=password],.authform input[type=email],.authform input[type=tel],.authform input[type=number],.authform select,.authform textarea, .mp-form input,.mp-form select,.mp-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:6px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;outline:none;transition:border-color .2s} .authform textarea{resize:vertical;line-height:1.7;min-height:140px} /* ===== 리치 텍스트 에디터 (관리자 본문 입력 — 이미지/볼드/밑줄/글자크기) ===== */ .rt-wrap{border:1px solid var(--line-2);border-radius:7px;overflow:hidden;background:#fff} .rt-toolbar{display:flex;align-items:center;gap:4px;padding:7px 8px;border-bottom:1px solid var(--line);background:var(--paper-2);flex-wrap:wrap} .rt-btn{height:30px;min-width:30px;padding:0 9px;border:1px solid var(--line-2);border-radius:6px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit} .rt-btn:hover{border-color:var(--ink)} .rt-sep{width:1px;height:18px;background:var(--line);margin:0 3px} .rt-editor{min-height:200px;padding:12px 14px;font-size:15px;line-height:1.7;color:var(--ink);outline:none} .rt-editor:empty:before{content:attr(data-ph);color:var(--ink-3)} .rt-editor img{max-width:100%;border-radius:8px;display:block;margin:10px 0} .authform input:focus,.authform textarea:focus,.mp-form input:focus,.mp-form select:focus{border-color:var(--ink)} .authform .invalid,.mp-form .invalid{border-color:#d64545} .mp-form input[readonly]{background:var(--paper-2);color:var(--ink-3);cursor:not-allowed} .auth-section{padding-block:60px} .auth-wrap{max-width:460px;margin:0 auto} .auth-wrap--narrow{max-width:420px;padding-top:80px} .auth-head{text-align:center;margin-bottom:30px} .auth-head .eyebrow{justify-content:center} .auth-head h1{font-family:var(--display);font-size:clamp(28px,4vw,40px);margin:10px 0 8px;letter-spacing:-.01em} .auth-head p{color:var(--ink-2);font-size:14px} .auth-card{border:0;border-radius:12px;padding:clamp(24px,4vw,36px)} /* PC: auth 카드 패딩 축소 */ @media(min-width:769px){.auth-card{padding:15px 10px 10px 10px}} /* 회원가입 약관 동의 상단 여백 */ #signupForm .agree-chk{margin-top:40px} .auth-card .fld{margin-bottom:18px} .pw-field{position:relative} .pw-field input{padding-right:56px} .pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:12px;color:var(--ink-3);padding:6px 8px} .pw-toggle:hover{color:var(--ink)} .pw-strength{height:4px;border-radius:2px;background:transparent;margin-top:8px;overflow:hidden} .pw-strength i{display:block;height:100%;width:0;background:#d64545;transition:width .25s,background .25s} .pw-hint{font-size:12px;color:var(--ink-3);margin-top:7px;line-height:1.5} .pw-match{font-size:12px;margin-top:7px} .auth-agree{margin:6px 0 4px} .auth-agree a{text-decoration:underline} .auth-submit{width:100%;height:50px;font-size:15px;margin-top:8px} .auth-alt{text-align:center;font-size:13.5px;color:var(--ink-2);margin-top:16px} .auth-alt a{font-weight:700;color:var(--ink);text-decoration:underline} .login-row{display:flex;justify-content:space-between;align-items:center;margin:40px 0 8px;flex-wrap:wrap;gap:8px} .keep-chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer} .keep-chk input{accent-color:var(--ink);width:16px;height:16px} .find-link{font-size:13px;color:var(--ink-3)} .find-link:hover{color:var(--ink)} .auth-done{text-align:center;border-radius:12px;padding:48px 24px;margin-top:100px} .auth-done .done-mark{width:35px;height:35px;border-radius:50%;background:var(--ink);color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px} .auth-done h2{font-family:var(--serif-ko);font-weight:600;font-size:24px;margin-bottom:10px} .auth-done p{color:var(--ink-2);margin-bottom:30px;line-height:1.7} .auth-done .btn{height:50px} .auth-secure{text-align:center;font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:18px} /* ===== 마이페이지 (my-page) ===== */ .mp-layout{display:grid;grid-template-columns:220px 1fr;gap:clamp(30px,4vw,56px);align-items:start} .mp-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:96px} .mp-tab{text-align:left;background:none;border:0;font-family:inherit;font-size:15px;font-weight:600;color:#000000;padding:13px 16px;border-radius:8px;cursor:pointer;transition:background .2s,color .2s} .mp-tab:hover{color:var(--ink);background:var(--paper-2)} .mp-tab.on{background:var(--ink);color:#fff} .mp-logout{display:block;margin-top:14px;padding:13px 16px;font-size:13.5px;color:var(--ink-3);border-top:1px solid var(--line)} .mp-logout:hover{color:var(--ink)} .mp-title{font-family:var(--sans);font-weight:600;font-size:26px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--ink)} /* 완료된 여행 소제목 (건축여행 목록 하단) */ .mp-subtitle{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--ink-2);margin:34px 0 16px;padding-top:24px;border-top:1px solid var(--line)} .mp-panel{display:none} .mp-panel.on{display:block} .mp-trip{display:grid;grid-template-columns:200px 1fr auto;gap:22px;align-items:center;border:1px solid #959595;border-radius:10px;padding:16px;margin-bottom:14px} .mp-trip .m-img{aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--paper-3)} .mp-trip .m-img img{width:100%;height:100%;object-fit:cover;display:block} .m-badge{display:inline-block;font-size:12px;font-weight:400;padding:2px 10px 0 10px;border-radius:100px;margin-bottom:8px} .m-badge.pay-wait{background:#e11d48;color:#fff} /* 입금대기 = 붉은색 */ .m-badge.pay-done{background:#ff0000;color:#fff} /* 결제완료/참가확정 = 빨강 */ .m-badge.ok{background:#ffd200;color:#000} .m-badge.wait{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line-2)} .m-badge.done{background:var(--ink);color:#fff} .m-badge.cancel{background:#fbeaea;color:#b42318;border:1px solid #f3c9c9} .mp-empty{color:var(--ink-3);font-size:14px;padding:20px 2px} .m-cancel-date{color:var(--ink-3);font-size:13px;white-space:nowrap} .mp-trip h3{font-family:var(--sans);font-weight:700;font-size:22px;margin-bottom:8px} .m-meta{display:flex;flex-direction:column;gap:4px} .m-meta li{font-size:14px;color:var(--ink-2)} .m-meta b{color:var(--ink-3);font-weight:600;margin-right:8px} .m-act{display:flex;flex-direction:column;gap:8px;white-space:nowrap;min-width:130px} /* my-page 결제정보 테이블 */ .m-pay-info{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .m-pay-tbl{width:100%;border-collapse:collapse;font-size:12px} .m-pay-tbl td{padding:3px 8px 3px 0;color:var(--ink-2);vertical-align:middle} .m-pay-tbl .m-pay-label{font-weight:700;color:var(--ink-3);white-space:nowrap;width:36px;padding-right:10px} .m-pay-tbl .m-pay-date{color:var(--ink-3);font-size:11.5px} .m-pay-stat-done{color:#166534;font-weight:700} .m-pay-stat-wait{color:#2563eb;font-weight:700} .m-act .btn{width:100%;justify-content:center;box-sizing:border-box} .btn-sm{height:36px;padding:0 16px;font-size:12.5px} .mp-pwbox{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)} .mp-pwbox h3{font-family:var(--sans);font-weight:700;font-size:18px;margin-bottom:18px} .mp-form .fld{margin-bottom:18px} @media(max-width:760px){.mp-layout{grid-template-columns:1fr;gap:clamp(10px,4vw,0px)}.page-mypage .page-hero.wrap{padding:80px 15px 0 15px} .page-mypage .wrap:not(.page-hero){padding:0px 15px 0 15px}.mp-nav{position:static;flex-direction:row;flex-wrap:nowrap;gap:3px;margin-bottom:24px}.mp-tab{flex:1;min-width:0;text-align:center}.mp-logout{border-top:0;margin-top:0}.mp-trip{grid-template-columns:1fr}.m-act{flex-direction:row;flex-wrap:wrap}} /* 마이페이지 여행 제목 링크 */ .mp-trip h3 a.m-link{color:inherit;text-decoration:none;transition:color .2s} .mp-trip h3 a.m-link:hover{color:var(--clay);text-decoration:underline;text-underline-offset:3px} /* ===== 참가자 여행 상세 (trip-manage / .page-manage) ===== */ /* 헤더: 배경이미지 없음·검정 텍스트·.td-body 폭에 맞춤 */ .page-manage .td-body{margin-top:0} .tm-head{padding-top:38px;margin-bottom:36px} .tm-back{display:inline-block;color:var(--ink-3);font-size:13px;font-weight:600;margin-bottom:16px;transition:color .2s} .tm-back:hover{color:var(--ink)} .tm-head .place{color:var(--ink);align-items:center} .tm-head .place::before{background:var(--ink)} .tm-head h1{font-family:'Pretendard',var(--sans);font-weight:700;font-size:clamp(30px,4.6vw,42px);line-height:1.06;margin:18px 0 0;letter-spacing:0;color:var(--ink)} .tm-head .td-sub{color:var(--ink-2);font-size:clamp(15px,1.8vw,18px);margin-top:12px;max-width:none} /* booking 카드 패딩 (이 페이지만) */ .page-manage .booking{padding:20px} /* 프로그램 대표이미지 (booking 카드 상단 — travel-apply .t-img 참고) */ .booking .bk-img{aspect-ratio:4/3;border-radius:6px;overflow:hidden;margin:-2px 0 16px} .booking .bk-img img{width:100%;height:100%;object-fit:cover;display:block} .tm-h{font-family:var(--sans);font-weight:700;font-size:17px;margin:34px 0 14px} .td-panel>.tm-h:first-child{margin-top:0} .tm-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:18px;line-height:1.6} .tm-note{font-size:12.5px;color:var(--ink-3);line-height:1.7;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .tm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .tm-status{display:flex;align-items:center;gap:12px;margin-bottom:8px} .tm-status .m-badge{margin-bottom:0} .tm-status-sub{font-size:13px;color:var(--ink-3)} /* rows */ .tm-rows{border-top:1px solid var(--line)} .tm-rows .row{display:flex;justify-content:space-between;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14px} .tm-rows .row span:first-child{color:var(--ink-3)} .tm-rows .row span:last-child{color:var(--ink);text-align:right} .tm-rows .row.total{border-bottom:none;border-top:2px solid var(--ink);margin-top:2px;padding-top:15px} .tm-rows .row.total span:first-child{color:var(--ink);font-weight:700} .tm-rows .row.total b{font-family:var(--display);font-size:20px} .tm-rows .ok-text{color:#1a7d3c;font-weight:600} /* flight */ .tm-flight{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:10px;padding:20px 22px;background:var(--paper-2)} .tm-flight .leg{display:flex;flex-direction:column;gap:4px;min-width:96px} .tm-flight .leg .t{font-family:var(--display);font-size:24px;line-height:1} .tm-flight .leg .ap{font-size:15px;color:#000000;font-weight:400} .tm-flight .arrow{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px} .tm-flight .arrow span{font-size:12px;color:#000000;white-space:nowrap} .tm-flight .arrow i{display:block;width:100%;height:1px;background:var(--line-2);position:relative} .tm-flight .arrow i::after{content:"→";position:absolute;right:-2px;top:-9px;color:var(--ink-3);font-size:13px} .tm-fl-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin:14px 2px 0;list-style:none} .tm-fl-meta li{font-size:13px;color:var(--ink-2)} .tm-fl-meta b{color:var(--ink-3);font-weight:600;margin-right:8px} /* checklist */ .tm-check{display:flex;flex-direction:column} .tm-check label{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink);cursor:pointer} .tm-check input{width:18px;height:18px;accent-color:var(--ink);flex:none} .tm-check input:checked+*,.tm-check label:has(input:checked){color:var(--ink-3)} /* notices */ .tm-notices article{padding:20px 0;border-bottom:1px solid var(--line)} .tm-notices article:first-child{padding-top:4px} .tm-notices .nt-date{font-size:12px;color:var(--ink-3);letter-spacing:.04em} .tm-notices h4{font-family:var(--sans);font-weight:700;font-size:16px;margin:7px 0 8px} .tm-notices p{font-size:14px;color:var(--ink-2);line-height:1.75} /* traveler form */ .tm-form input[type=date],.tm-form input[type=file]{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:6px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;outline:none;transition:border-color .2s} .tm-form input[type=date]:focus{border-color:var(--ink)} .tm-form .fld{margin-bottom:18px} .tm-form .tm-h{margin-top:30px} .tm-form .tm-h:first-of-type{margin-top:6px} .tm-file{display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--line-2);border-radius:6px;padding:18px;font-size:13.5px;color:var(--ink-3);cursor:pointer;transition:border-color .2s,color .2s} .tm-file:hover{border-color:var(--ink);color:var(--ink)} .tm-radio{display:flex;flex-direction:column;gap:10px} .tm-radio label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer;font-weight:400} .tm-radio input{width:17px;height:17px;accent-color:var(--ink);flex:none} @media(max-width:540px){.tm-flight{flex-wrap:wrap;gap:10px}.tm-flight .arrow{order:3;width:100%}} /* ===== 도시 블록 본문 레이아웃 ===== */ .city-section{margin:0 0 52px} .city-sec-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:18px;border-bottom:1.8px dashed #272727} .city-sec-num{font-family:'TmonMonsori';font-size:36px;font-weight:700;color:#000000;line-height:1;border:1px solid #000000;padding:14px 10px 9px 12px} .city-sec-names{display:flex;flex-direction:column;gap:0} .city-sec-name{font-family:var(--sans);font-size:36px;font-weight:700;line-height:1} .city-sec-en{font-family:var(--sans);font-size:16px;font-weight:300;color:#8f8f8f;margin-top:0px} .city-sec-sub{font-size:22px;font-weight:600;margin:6px 0 8px} .city-sec-body{font-size:17px;line-height:1.8;color:var(--ink-2);margin:0 0 16px;white-space:pre-line} .city-imgs{display:grid;gap:5px;margin:20px 0 0} .city-imgs figure{margin:0;position:relative} .city-imgs figure img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:0} /* 이미지 번호 배지 */ .city-img-num{position:absolute;top:0;right:0;width:22px;height:22px;background:rgba(255,255,255,.9);border-radius:0;font-size:13px;font-weight:400;color:var(--ink);display:flex;align-items:center;justify-content:center;pointer-events:none;line-height:1} /* 건물명 목록 */ .city-bld-list{list-style:none;margin:12px 0 0;padding:14px 20px;border:1px solid #838383;border-radius:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 32px} .city-bld-list li{font-size:15px;display:flex;gap:12px;align-items:baseline;line-height:1.4} .city-bld-list .bld-num{font-weight:500;color:var(--ink);flex-shrink:0} .city-bld-list .bld-name{color:var(--ink);font-weight:500} .city-bld-list .bld-arch{color:var(--ink-3);font-weight:400} /* A: 균등 그리드 (n=4,8 → 2열, 나머지 → 3열) */ .city-imgs.city-lay-A{grid-template-columns:repeat(3,1fr)} .city-imgs.city-lay-A[data-count="1"]{grid-template-columns:1fr} .city-imgs.city-lay-A[data-count="2"]{grid-template-columns:1fr 1fr} .city-imgs.city-lay-A[data-count="4"]{grid-template-columns:1fr 1fr} .city-imgs.city-lay-A[data-count="8"]{grid-template-columns:1fr 1fr} .city-imgs.city-lay-A[data-count="7"] figure:last-child{grid-column:1/-1} /* n=5: 위 3장(1/3) 아래 2장(1/2) — 6열 서브그리드 */ .city-imgs.city-lay-A[data-count="5"]{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-A[data-count="5"] figure:nth-child(-n+3){grid-column:span 2} .city-imgs.city-lay-A[data-count="5"] figure:nth-child(n+4){grid-column:span 3} /* B: 상단 강조 (6열, 첫 이미지 전폭, 하단 가변) */ .city-imgs.city-lay-B{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-B[data-count="1"]{grid-template-columns:1fr} .city-imgs.city-lay-B figure:first-child{grid-column:1/-1} .city-imgs.city-lay-B figure:nth-child(n+2){grid-column:span 2} /* n=2: 하단 1장 → 전폭 */ .city-imgs.city-lay-B[data-count="2"] figure:nth-child(2){grid-column:1/-1} /* n=3: 하단 2장 → 각 1/2 */ .city-imgs.city-lay-B[data-count="3"] figure:nth-child(n+2){grid-column:span 3} /* n=5: 하단 3+1 → 4번째 전폭 */ .city-imgs.city-lay-B[data-count="5"] figure:nth-child(5){grid-column:1/-1} /* n=6: 하단 3+2 → 마지막 2장 각 1/2 */ .city-imgs.city-lay-B[data-count="6"] figure:nth-child(n+5){grid-column:span 3} /* n=8: 하단 3+3+1 → 마지막 1장 전폭 */ .city-imgs.city-lay-B[data-count="8"] figure:first-child{aspect-ratio:15/8} .city-imgs.city-lay-B[data-count="8"] figure:nth-child(2),.city-imgs.city-lay-B[data-count="8"] figure:nth-child(3){grid-column:span 3} .city-imgs.city-lay-B[data-count="8"] figure:nth-child(n+7){grid-column:span 3} /* n=9: 하단 3+3+2 → 마지막 2장 각 1/2 */ .city-imgs.city-lay-B[data-count="9"] figure:nth-child(n+8){grid-column:span 3} /* C: 2열 정렬 (홀수 마지막 이미지 전폭) */ .city-imgs.city-lay-C{grid-template-columns:1fr 1fr} .city-imgs.city-lay-C[data-count="1"]{grid-template-columns:1fr} .city-imgs.city-lay-C[data-count="3"] figure:last-child{grid-column:1/-1} .city-imgs.city-lay-C[data-count="5"] figure:last-child{grid-column:1/-1} .city-imgs.city-lay-C[data-count="7"] figure:last-child{grid-column:1/-1} .city-imgs.city-lay-C[data-count="9"] figure:last-child{grid-column:1/-1} /* D: 좌대형+우소형 (6열, top 4:2≈67:33, 하단 가변) */ .city-imgs.city-lay-D{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-D[data-count="1"]{grid-template-columns:1fr} .city-imgs.city-lay-D figure:first-child{grid-column:span 4} .city-imgs.city-lay-D figure:nth-child(2){grid-column:span 2} .city-imgs.city-lay-D figure:nth-child(n+3){grid-column:span 2} /* n=3: 하단 1장 → 전폭 */ .city-imgs.city-lay-D[data-count="3"] figure:nth-child(3){grid-column:1/-1} /* n=4: 하단 2장 → 각 1/2 */ .city-imgs.city-lay-D[data-count="4"] figure:nth-child(n+3){grid-column:span 3} /* n=6: 하단 3+1 → 4번째 전폭 */ .city-imgs.city-lay-D[data-count="6"] figure:nth-child(6){grid-column:1/-1} /* n=7: 하단 3+2 → 마지막 2장 각 1/2 */ .city-imgs.city-lay-D[data-count="7"] figure:nth-child(n+6){grid-column:span 3} /* n=9: 하단 3+3+1 → 마지막 1장 전폭 */ .city-imgs.city-lay-D[data-count="9"] figure:nth-child(9){grid-column:1/-1} /* D: 2번 사진을 1번과 동일 높이로 (세로로 긴 사진) */ .city-imgs.city-lay-D figure:nth-child(2){align-self:stretch} .city-imgs.city-lay-D figure:nth-child(2) img{height:100%;aspect-ratio:auto} /* A 균등 그리드: 2·4·8장은 정사각형 이미지 */ .city-imgs.city-lay-A[data-count="2"] figure img, .city-imgs.city-lay-A[data-count="4"] figure img, .city-imgs.city-lay-A[data-count="8"] figure img{aspect-ratio:1/1} /* E: 하단 강조 (상단 3열 그리드 + 마지막 전폭) */ .city-imgs.city-lay-E{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-E figure{grid-column:span 2} .city-imgs.city-lay-E figure:last-child{grid-column:1/-1} /* F: 4열 그리드 */ .city-imgs.city-lay-F{grid-template-columns:repeat(4,1fr)} /* G: 상단 2분할 + 하단 3열 그리드 */ .city-imgs.city-lay-G{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-G figure:nth-child(-n+2){grid-column:span 3} .city-imgs.city-lay-G figure:nth-child(n+3){grid-column:span 2} .city-imgs.city-lay-G[data-count="6"] figure:nth-child(6){grid-column:1/-1} /* 세로 강조 모자이크 — 1번 2×2 대형 + 6번 세로 2행(2줄에 걸친 이미지로 높이 다양성) */ .city-imgs.city-lay-H{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-H figure{grid-column:span 2} .city-imgs.city-lay-H figure:first-child{grid-column:span 4;grid-row:span 2} .city-imgs.city-lay-H figure:nth-child(6){grid-row:span 2} .city-imgs.city-lay-H figure:first-child img, .city-imgs.city-lay-H figure:nth-child(6) img{height:100%;aspect-ratio:auto} /* I: 좌측 강조 (3장 전용 — 좌 대형 세로2행 + 우 2장 세로) */ .city-imgs.city-lay-I{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-I figure{grid-column:span 2} .city-imgs.city-lay-I figure:first-child{grid-column:span 4;grid-row:span 2} .city-imgs.city-lay-I figure:first-child img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-I figure:nth-child(n+2){align-self:stretch;position:relative;overflow:hidden} .city-imgs.city-lay-I figure:nth-child(n+2) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto} /* J: 중앙 세로강조 (3열, 2번 사진만 세로 2배) */ .city-imgs.city-lay-J{grid-template-columns:repeat(3,1fr)} .city-imgs.city-lay-J figure:nth-child(2){grid-row:span 2} .city-imgs.city-lay-J figure:nth-child(2) img{height:100%;aspect-ratio:auto} /* J·7장: 7번을 5번 열까지(span2) 넓혀 마지막 줄 채움 */ .city-imgs.city-lay-J[data-count="7"] figure:nth-child(7){grid-column:span 2} /* 7장 높이 맞춤: 옆 큰 이미지와 동일 높이로 */ .city-imgs.city-lay-D[data-count="5"] figure:nth-child(2), .city-imgs.city-lay-D[data-count="7"] figure:nth-child(2){align-self:stretch;position:relative;overflow:hidden} .city-imgs.city-lay-D[data-count="5"] figure:nth-child(2) img, .city-imgs.city-lay-D[data-count="7"] figure:nth-child(2) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto} .city-imgs.city-lay-J[data-count="7"] figure:nth-child(6){align-self:stretch;position:relative;overflow:hidden} .city-imgs.city-lay-J[data-count="7"] figure:nth-child(6) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto} .city-imgs.city-lay-G[data-count="7"] figure:nth-child(6){align-self:stretch;position:relative;overflow:hidden} .city-imgs.city-lay-G[data-count="7"] figure:nth-child(6) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto} /* ── 2026-06-25 배열별 마지막줄 여백 제거 보정 ── */ /* G·7장: 7번을 5번까지 넓힘 */ .city-imgs.city-lay-G[data-count="7"] figure:nth-child(7){grid-column:span 4} /* E·6장: 5번을 3번 열까지 가로만 넓힘(세로는 4번과 동일) */ .city-imgs.city-lay-E[data-count="6"] figure:nth-child(5){grid-column:span 4;align-self:stretch;position:relative;overflow:hidden} .city-imgs.city-lay-E[data-count="6"] figure:nth-child(5) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto} /* E·8장: 6번 세로2행 + 7번을 5번까지 넓힘 */ .city-imgs.city-lay-E[data-count="8"] figure:nth-child(6){grid-row:span 2} .city-imgs.city-lay-E[data-count="8"] figure:nth-child(6) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-E[data-count="8"] figure:nth-child(7){grid-column:span 4} /* E·9장: 8번을 6번까지 넓힘 + 7번을 8번 높이만큼 세로로 길게 */ .city-imgs.city-lay-E[data-count="9"] figure:nth-child(8){grid-column:span 4} .city-imgs.city-lay-E[data-count="9"] figure:nth-child(7){align-self:stretch} .city-imgs.city-lay-E[data-count="9"] figure:nth-child(7) img{height:100%;aspect-ratio:auto} /* G·9장: 8번 세로2행 + 9번을 7번까지 넓힘 */ .city-imgs.city-lay-G[data-count="9"] figure:nth-child(8){grid-row:span 2} .city-imgs.city-lay-G[data-count="9"] figure:nth-child(8) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-G[data-count="9"] figure:nth-child(9){grid-column:span 4} /* H·9장: 9번을 6번까지(전폭) 넓힘 */ .city-imgs.city-lay-H[data-count="9"] figure:nth-child(9){grid-column:1/-1} /* D·10장: 6번을 9번 위치까지 세로 2배 → 9·10번이 마지막 줄 채움 */ .city-imgs.city-lay-D[data-count="10"] figure:nth-child(6){grid-row:span 2} .city-imgs.city-lay-D[data-count="10"] figure:nth-child(6) img{height:100%;aspect-ratio:auto} /* F·10장: 8번 세로2행 + 10번을 7번까지 넓힘 */ .city-imgs.city-lay-F[data-count="10"] figure:nth-child(8){grid-row:span 2} .city-imgs.city-lay-F[data-count="10"] figure:nth-child(8) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-F[data-count="10"] figure:nth-child(10){grid-column:span 2} /* G·10장: 10번을 8번까지 넓힘 */ .city-imgs.city-lay-G[data-count="10"] figure:nth-child(10){grid-column:span 4} /* H·10장: 8번 좌측으로 늘려 4칸 + 7·9번 아랫줄로 */ .city-imgs.city-lay-H[data-count="10"] figure:nth-child(8){grid-column:1/5;grid-row:4} .city-imgs.city-lay-H[data-count="10"] figure:nth-child(7){grid-column:1/3;grid-row:5} .city-imgs.city-lay-H[data-count="10"] figure:nth-child(9){grid-column:3/5;grid-row:5} .city-imgs.city-lay-H[data-count="10"] figure:nth-child(10){grid-column:5/7;grid-row:5} /* H·10장: 6번 높이를 5번+8번 2줄 높이에 맞춤 (절대위치로 행 확장 방지) */ .city-imgs.city-lay-H[data-count="10"] figure:nth-child(6){position:relative;overflow:hidden} .city-imgs.city-lay-H[data-count="10"] figure:nth-child(6) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto} /* F·11장: 11번을 8번까지 넓힘 */ .city-imgs.city-lay-F[data-count="11"] figure:nth-child(11){grid-column:span 2} /* H·12장: 11번 세로2행 + 12번을 10번까지 넓힘 */ .city-imgs.city-lay-H[data-count="12"] figure:nth-child(11){grid-row:span 2} .city-imgs.city-lay-H[data-count="12"] figure:nth-child(12){grid-column:span 4} /* 세로2행 칸(6·11번)을 절대위치로 → 옆 2줄 높이에 정확히 맞춤(긴 사진이 행 못 키우게) */ .city-imgs.city-lay-H[data-count="12"] figure:nth-child(6), .city-imgs.city-lay-H[data-count="12"] figure:nth-child(11){position:relative;overflow:hidden} .city-imgs.city-lay-H[data-count="12"] figure:nth-child(6) img, .city-imgs.city-lay-H[data-count="12"] figure:nth-child(11) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto} /* B·12장: 12번을 10번까지 넓힘 */ .city-imgs.city-lay-B[data-count="12"] figure:nth-child(12){grid-column:span 4} /* E·12장: 11번을 9번까지 넓힘 */ .city-imgs.city-lay-E[data-count="12"] figure:nth-child(11){grid-column:span 4} /* M: 세로강조 기반 12장 — 10번 우측확장, 11·12번 나란히 */ .city-imgs.city-lay-M{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-M figure{grid-column:span 2} .city-imgs.city-lay-M figure:first-child{grid-column:span 4;grid-row:span 2} .city-imgs.city-lay-M figure:nth-child(6){grid-row:span 2} .city-imgs.city-lay-M figure:first-child img, .city-imgs.city-lay-M figure:nth-child(6) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-M[data-count="12"] figure:nth-child(10){grid-column:3/7;grid-row:5} .city-imgs.city-lay-M[data-count="12"] figure:nth-child(10) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-M[data-count="12"] figure:nth-child(11){grid-column:5/7;grid-row:6} .city-imgs.city-lay-M[data-count="12"] figure:nth-child(12){grid-column:1/5;grid-row:6} /* N: 중앙세로강조 기반 12장 — 12번 전체폭 1.5배 */ .city-imgs.city-lay-N{grid-template-columns:repeat(3,1fr)} .city-imgs.city-lay-N figure:nth-child(2){grid-row:span 2} .city-imgs.city-lay-N figure:nth-child(2) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-N[data-count="12"] figure:nth-child(12){grid-column:1/-1} .city-imgs.city-lay-N[data-count="12"] figure:nth-child(12) img{aspect-ratio:8/3;width:100%;object-fit:cover} /* P: 6장 혼합 [1 1 2][1 1 3][4 5 6] */ .city-imgs.city-lay-P{grid-template-columns:repeat(3,1fr)} .city-imgs.city-lay-P figure:nth-child(1){grid-column:span 2;grid-row:span 2} .city-imgs.city-lay-P figure:nth-child(1) img{height:100%;aspect-ratio:auto} /* O: 9장 혼합 [1 1 2][3 4 2][5 6 7][8 9 7] */ .city-imgs.city-lay-O{grid-template-columns:repeat(3,1fr)} .city-imgs.city-lay-O figure:nth-child(1){grid-column:span 2} .city-imgs.city-lay-O figure:nth-child(2){grid-row:span 2} .city-imgs.city-lay-O figure:nth-child(2) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-O figure:nth-child(7){grid-row:span 2} .city-imgs.city-lay-O figure:nth-child(7) img{height:100%;aspect-ratio:auto} /* K: 중앙세로강조 + 6번 전체폭 1.5배 (6장 전용) */ .city-imgs.city-lay-K{grid-template-columns:repeat(3,1fr)} .city-imgs.city-lay-K figure:nth-child(2){grid-row:span 2} .city-imgs.city-lay-K figure:nth-child(2) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-K[data-count="6"] figure:nth-child(6){grid-column:1/-1} .city-imgs.city-lay-K[data-count="6"] figure:nth-child(6) img{aspect-ratio:8/3;width:100%;object-fit:cover} /* Q: 우측세로+하단와이드 (6장 전용) — K와 동일하되 2번이 우측 열 */ .city-imgs.city-lay-Q{grid-template-columns:repeat(3,1fr)} .city-imgs.city-lay-Q figure:nth-child(2){grid-column:3;grid-row:1/3} .city-imgs.city-lay-Q figure:nth-child(2) img{height:100%;aspect-ratio:auto} .city-imgs.city-lay-Q[data-count="6"] figure:nth-child(6){grid-column:1/-1} .city-imgs.city-lay-Q[data-count="6"] figure:nth-child(6) img{aspect-ratio:8/3;width:100%;object-fit:cover} /* L: 상단2분할 + 6번 전체폭 1.5배 (6장 전용) */ .city-imgs.city-lay-L{grid-template-columns:repeat(6,1fr)} .city-imgs.city-lay-L figure:nth-child(-n+2){grid-column:span 3} .city-imgs.city-lay-L figure:nth-child(n+3){grid-column:span 2} .city-imgs.city-lay-L[data-count="6"] figure:nth-child(6){grid-column:1/-1} .city-imgs.city-lay-L[data-count="6"] figure:nth-child(6) img{aspect-ratio:8/3;width:100%;object-fit:cover} /* ═══════════════════ 모바일 최적화 (≤768px) — 2026-06-16 ═══════════════════ */ @media(max-width:768px){ body{font-size:15px} /* 본문 기본 15px (어라운드 전체) */ .wrap{padding-inline:12px} /* 컨테이너 좌우 여백 12px */ /* 여행/강연 상세 히어로 — 좌우 15px만 남기고 가득 채움 */ .td-hero{margin-left:15px;margin-right:15px;margin-top:62px} /* 상세 상단 30px 위로(92→62) */ .td-overview{font-size:15px} .td-tabs button{margin:0;padding:15px 2px 6px 2px;font-size:16px} .page-travel .td-tabs button{flex:1;text-align:center} .page-travel .td-tabs button[data-panel="reviews"]{flex:0 0 100%;text-align:left;border-top:1px solid var(--line);margin-top:2px} .td-tabs{padding-bottom:10px} .td-body{gap:0} .td-tabs{margin-bottom:25px;margin-top:15px} .tm-head h1{margin:8px 0 0} /* (.td-t = 탭바 하단여백) */ .td-recommend{margin-bottom:23px} .td-recommend-ttl{font-size:16px} .td-recommend-item{font-size:13.5px;line-height:1.4} /* 햄버거 메뉴: 회원가입 이동 + 상단정렬 + 본고딕 18px + 로고/버거 가시화 */ .nav-cta .nav-signup{display:none} /* 회원가입 → 햄버거 메뉴로 이동 */ .mobile-menu{justify-content:flex-start;padding:74px 15px 40px;gap:0} .mobile-menu a{font-family:'Noto Sans KR','Noto Sans',sans-serif;font-size:15px;font-weight:500;padding:15px 2px} .mobile-menu a span{font-family:'Noto Sans KR','Noto Sans',sans-serif;font-size:11px} /* 메뉴 열렸을 때 헤더 로고·버거가 종이배경 위에서 잘 보이도록(히어로 위 흰색 오버라이드 무력화) */ body.menu-open .site-header{background:var(--paper)!important;border-color:transparent!important} body.menu-open .site-header .brand{color:var(--ink)!important} body.menu-open .site-header .brand small{color:var(--ink-3)!important} body.menu-open .burger span{background:var(--ink)!important} /* 메뉴 하단 인증 영역(회원가입/로그인) */ .mm-auth{margin-top:40px;display:flex;flex-direction:row;gap:10px} .mm-auth .mm-signup{flex:1;background:var(--ink);color:var(--paper);height:40px;border-radius:100px;display:flex;align-items:center;justify-content:center;font-family:'Noto Sans KR','Noto Sans',sans-serif;font-size:14px;font-weight:500} .mm-auth .mm-login{flex:1;background:#fff;border:1px solid var(--ink);color:var(--ink);height:40px;border-radius:100px;display:flex;align-items:center;justify-content:center;font-family:'Noto Sans KR','Noto Sans',sans-serif;font-size:14px;font-weight:600;padding:0} /* 메인 헤더/히어로/섹션 모바일 조정 */ .nav{padding-inline:12px;height:50px;padding-top:15px} /* 헤더 좌우 12px · 높이 50px · 상단 15px */ .nav .brand,.nav .nav-cta{transform:none} /* 로고·햄버거 수직 중앙 정렬 */ .brand{font-size:17px;position:relative;top:4px} /* 로고 4px 아래로 */ .brand b{font-size:19px;font-weight:500} .brand small{font-size:10px} .hide-m{display:none} /* 모바일 숨김 유틸 (예: 지자체) */ .hero h1{font-size:32px} .hero-dots button{width:6px;height:6px} .hero .eyebrow{font-size:15px} .hero-desc{font-size:16px} .hero-more{font-size:14px;font-weight:400;color:#ffffff} .page-home .section{padding-block:30px} .page-home .sec-head{margin-bottom:18px} .page-home .sec-head h2{font-size:20px;font-weight:500;line-height:1.4} #travelGrid.grid-3{grid-template-columns:repeat(2,1fr)} /* 메인 건축여행 2열 */ .grid-3{gap:15px 8px} /* 카드 간격 */ /* 여행 카드 글자 크기 */ .tcard h3{font-size:16.5px} .tcard .theme{font-size:13px} .tcard .date{font-size:11.5px;margin-bottom:5px} .tcard .gname{margin-top:6px;font-size:12px} .tcard .gname::before{width:10px} .tcard[data-cat="group"] h3{font-size:clamp(15px,1.9vw,20px)} .tcard[data-cat="group"]{padding:5px 12px 2px 12px} .tcard[data-cat="group"] .theme{font-size:12px;color:#555555} .tcard[data-cat="group"] .date{font-size:13.5px} .tcard[data-cat="group"] .tcard-pending{font-size:clamp(13px,1.9vw,16px)} .tcard .place{top:6px;right:6px;padding:2px 8px 1px 8px;font-weight:500;font-size:9.5px} /* 모바일 헤더 solid 상태 보더 제거 (border:0 은 border-color를 currentColor로 리셋→해제 시 번쩍임. 색만 투명 유지) */ .site-header.solid{border-bottom-color:transparent} /* 탭(세그먼트): 좌우 15px 남기고 가득 차게 */ .tabs{display:flex;margin:0} .tabs button{flex:1;padding:0 6px;text-align:center;height:32px;font-weight:400} /* 건축가 프로필 */ .architect-profile{padding:20px 15px 0 15px;margin-top:0} .ap-top{gap:15px} /* 건축가 프로필 사진: 위로 쌓고 가운데 정렬, 크기 180px */ .page-travel .ap-top{flex-direction:column} .page-travel .ap-photo{width:180px;height:180px;align-self:center} .ap-bio p{font-size:14px} .ap-gallery{grid-template-columns:repeat(3,1fr)} /* 갤러리 1줄 3개 */ .ap-name{font-size:22px;font-family:var(--sans)} .ap-name em{display:none} .ap-role{font-size:13px} .ap-cv li{font-size:13px;line-height:1.4} .ap-introttl{font-size:16px} .ap-bio{font-size:14px} .ap-cv{font-size:14px} /* 도시 섹션(본문 도시별 블록) */ .city-sec-num{font-size:22px} .city-sec-head{border-bottom:1.2px dashed #272727} .city-sec-name{font-size:24px} .city-sec-en{font-size:14px} .city-sec-body{font-size:14px} .prose .city-sec-sub{font-size:16px} /* .prose p(14px) 덮어쓰기 위해 specificity 상향 */ .city-imgs{gap:3px} /* 이미지 위 숫자: 글자 1px·흰배경 2px 축소 */ .city-img-num{width:20px;height:20px;font-size:12px} .city-bld-list{padding:10px;gap:10px 8px} .city-bld-list li{font-size:12px;line-height:1.1;gap:10px} .city-bld-list .bld-name{font-weight:400} /* 섹션 제목 + 건축클래스 카드 */ .sec-head h2{margin-top:12px} .cc-title{font-size:20px} .cc-over{padding:18px 15px 30px} .cc-sub{font-size:18px} .cc-meta{font-size:14px} .cc-body{padding:10px 2px 0} /* 가이드북 2열 + 여행후기 카드 */ .grid-books{grid-template-columns:repeat(2,1fr);gap:35px} .rv-card{gap:12px;padding:8px} .rv-card .rv-prog{font-size:14px;margin-top:4px} .rv-card .rv-author{margin-top:0} .rv-card .rv-ex{font-size:13px;line-height:1.5;-webkit-line-clamp:3} /* 인터뷰(quote-band) */ .quote-band blockquote{font-family:var(--sans);font-size:18px;line-height:1.65} .quote-band cite{font-size:13px} .quote-band .btn{font-size:13px;height:35px;padding:0 15px} /* 햄버거 3선 두께 통일(1.5px+gap5=6.5 비정수→가운데 어긋남, 2px로 정수화) */ .burger span{height:2px} /* 인증 폼 제출 버튼 (로그인·회원가입 공통 15px) */ .auth-submit{font-size:15px;height:44px} /* 로그인·회원가입 입력 라벨 */ .page-auth .fld label{font-size:15px;margin-bottom:5px} /* 로그인·회원가입 제목 자간 */ .page-auth .auth-head h1{letter-spacing:.08em} /* 로그인·회원가입 입력칸 테두리 */ .page-auth .authform input{border:1px solid #bbbbb7} /* 로그인·회원가입 하단 대체링크 여백 */ .page-auth .auth-alt{margin-top:50px} /* 건축여행 탭 래퍼(.reveal>.tabs) 하단 여백 — 인라인 34px 덮어쓰기 + 진입 애니메이션 제거 */ .reveal:has(.tabs){margin-bottom:20px!important;opacity:1;transform:none;transition:none;animation:none} /* 상세페이지 일정표 */ .page-travel .itinerary{border-top:0} .page-travel .day{gap:0;grid-template-columns:60px 1fr;padding:17px 0} .page-travel .day h4{font-size:17px} .page-travel .day ul li{margin-bottom:0} /* 여행정보(info) 외 탭에선 예약카드 숨김 */ body.page-travel[data-td-tab]:not([data-td-tab="info"]) #book .booking{display:none} /* 포함/미포함 내역 */ .incl ul li{font-size:14px;margin-bottom:6px} .incl h4{margin-bottom:7px} /* 참고사항 */ .notes li{font-size:14px} /* 매거진 미니카드(.mcard) 1줄 2개 */ .grid-mag{grid-template-columns:repeat(2,1fr);gap:15px 8px} .mcard .cat{font-size:12px;letter-spacing:.1em;font-weight:400;margin-top:6px} .mcard h3{font-size:15px;margin-top:6px} /* 여행리뷰 상세 상단 여백 */ .rv-article{padding:80px 10px 50px 10px} .rv-head h1{font-size:24px} .rv-body p{font-size:14px;line-height:1.65} .mcard .excerpt{font-size:13px} /* 이어서 읽기 — 모바일은 2개만 */ .related-mag .mcard:nth-child(n+3){display:none} /* 매거진 상세 헤더/본문 */ .article-head{padding-top:90px} .article-head .cat{font-size:13px;padding:4px 10px;letter-spacing:.12em} .article-head h1{font-size:23px;line-height:1.55;margin:30px 0 30px} .article-head .sub{width:100%;font-size:14px} .article-head .byline{font-size:12px} .article-body p{font-size:14.5px;line-height:1.85} .article-body img{margin-top:10px;margin-bottom:0} .ar-head .ar-cat{font-size:14px} .ar-head .ar-badge{font-size:11.5px} .ar-body p{font-size:14.5px} .mcard .by{font-size:10px} /* 아카이브 카드 region */ .ccard .region{font-size:12px;margin-top:4px;padding-bottom:4px;font-weight:400;letter-spacing:.1em} .ccard h3{font-size:16px} .ccard .ctags span{font-size:10px;padding:2px 10px} .ccard .ctags{margin-top:15px} /* 필터 칩: 1줄 3개, 가로 가득 */ .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .chips .chip{padding:0 6px;min-width:0} /* 건축아카이브 */ .chip{height:30px} .grid-cards{gap:8px} /* 그리드 gap 축소 */ .feature,.mag-hero,.quote-band .wrap{gap:10px} .mag-hero h2{font-size:clamp(22px,2.8vw,35px);line-height:1.55} /* 인터뷰: 이미지 아래 빈 공간(80%→90%)+행간격 축소 → 이미지~텍스트 여백 절반(89→약44px) */ .quote-band .media img{height:90%} .quote-band .wrap{row-gap:5px} /* 아카이브 2열 */ .grid-cards{grid-template-columns:repeat(2,1fr)} /* 새로운 소식 첫 행 본고딕 */ .news-row:first-child,.news-row:first-child *{font-family:'Noto Sans KR','Noto Sans',sans-serif} /* 푸터 제목 여백 */ .foot-col h5{margin-bottom:0} /* 건축캠프 구성 */ .camp-ttl{font-size:24px;margin-bottom:10px} .camp-desc{font-size:14px;margin-bottom:14px} .camp-item-ttl{font-size:16px} .camp-item-note{font-size:13px} .camp-item{padding:15px 5px} .camp-sep{font-size:18px;width:18px;height:18px;padding:0 0 2px 0} .camp-items>.camp-item:first-child{padding-right:14px} /* 3개 중 첫 박스 우측 패딩 */ /* 여행 상세 히어로/섹션 */ .td-hero h1{font-size:30px;padding:25px 0 0;letter-spacing:0.03em} .td-hero .place{font-size:14.5px;letter-spacing:.07em} .td-hero .td-sub{font-size:15.5px;margin-top:10px} .td-hero .wrap-wide{padding-bottom:100px} .td-hero .place::before{width:18px} .architect-profile{margin-bottom:10px} .city-sec-en{height:20px} .city-bld-list .bld-arch{font-size:11.5px} /* 건축클래스 상세 모바일 */ .td-hero.td-hero--plain .wrap-wide{margin:0px auto 0;padding-bottom:10px} .page-lecture .td-hero h1{font-size:22px} .page-lecture .td-hero .td-sub{font-size:18px} .td-hero.td-hero--plain .place{font-weight:500;padding:3px 10px 2px 10px} .lec-prose .pullquote{font-size:14px} .prose .pullquote{padding:15px 0;margin:10px 0 30px 0} .lec-detail{margin-top:30px;padding-top:25px} .prose p{font-size:14.5px;line-height:1.7;margin-bottom:20px} .page-lecture .architect-profile{padding:15px} .ap-name{font-size:20px} .ap-role{font-weight:400} .ap-introttl{font-size:15px;margin:25px 0 16px} .ap-mark{font-size:14px;padding:1px 9px} .ap-bio p{font-size:13px;line-height:1.7} .lec-tabs{margin-top:30px;padding-top:25px} /* 회차 탭: 가로 1줄 · 개수만큼 동일 너비 · 날짜를 Lecture 아래로 */ .lec-tab-bar{display:flex;width:100%;flex-wrap:nowrap;box-sizing:border-box;border-radius:5px} .lec-tab-btn{flex:1;min-width:0;height:auto;padding:3px 8px;flex-wrap:wrap;justify-content:center;row-gap:1px;border-radius:4px;font-size:18px} .lec-tab-date{flex-basis:100%;width:100%;text-align:center} .lec-session h2{font-size:24px;margin-top:30px;margin-bottom:5px} .lec-session p{font-size:14.5px} .lec-session h4,.lec-session h5,.lec-session h6,.lec-prose h4,.lec-prose h5,.lec-prose h6{font-size:14px} /* 예약 카드(#book)를 모바일에서 맨 위(히어로 위)로 — JS가 #book을 .td-hero 앞으로 이동 */ .page-lecture .td-body{margin-top:0} .page-lecture #book{order:-1;margin-top:80px;padding-left:12px;padding-right:12px} .page-lecture .booking{box-shadow:none;border:0} .page-lecture .class-list{grid-template-columns:repeat(2,1fr);gap:10px} .morelec-wrap{margin:15px auto} .morelec-wrap .sec-head{margin-bottom:15px} .morelec-wrap .sec-head h2{margin-top:10px} .page-lecture .cc-over{padding:18px 9px 12px} .page-lecture .cc-title{font-size:14px} .page-lecture .cc-sub{font-size:12px} .page-lecture .cc-tag{font-size:10px;font-weight:300;padding:1px 7px} .page-lecture .cc-meta{font-size:12px} .page-lecture .td-hero.td-hero--plain{margin-top:30px} .page-lecture #book .booking{position:static;padding:0 12px!important} .page-lecture .booking .meta-line{padding:9px 0} .page-lecture .booking .bk-evt-title{display:block;font-size:18px;font-weight:700;line-height:1.3;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)} .page-lecture .booking .bk-evt-title:empty{display:none} /* 텍스트가 좌우로 너무 넓게 퍼져 보여 12px 패딩 — 단, 이미지(#lec-thumb)는 그대로 풀폭 유지 */ .page-lecture #book .reveal.in{padding:0 12px} .page-lecture #book .reveal.in>img{margin-left:-12px;margin-right:-12px;width:calc(100% + 24px)!important;max-width:none} .page-lecture .booking .btn{height:45px} .booking .btn-fill{margin-top:10px !important} .section{padding-block:60px} /* 여행개요(td-ov) */ .td-ov-lbl{padding:16px 10px 10px 10px;font-size:17px;font-weight:800} .td-ov-con{padding:0 10px 20px 10px;font-size:14px} /* ※ 14px/20px 중복지정 → 14px 적용 */ .td-ov-sched{font-size:18px} .td-ov-note{font-size:13px} /* 신청안내(td-apply) */ .td-apply-ttl{font-size:28px} .td-apply-sub{font-size:18px} .td-apply-sub2{font-size:14px} .td-apply-lbl,.td-apply-con{font-size:14px} .td-apply-lbl{padding:0} /* 라벨 컬럼을 '참가비(학생)' 폭(74px)으로 고정 → 모든 con이 동일 위치에서 좌측정렬 시작 */ .td-apply-row{grid-template-columns:74px 1fr;gap:20px} .td-apply-con{text-align:left} /* 포함/불포함 내역 — 여행정보에선 숨김(포함/미포함 탭 별도 존재) */ .td-incl-section{display:none} .td-incl-wrap{grid-template-columns:1fr} .td-incl-hd{font-size:13px;font-weight:500} .td-incl-item{font-size:13px} /* 항공정보 */ .td-flight{margin-top:40px;padding:5px 15px 20px;border:2px dashed #818181} .td-flight-hd{font-size:17px;text-align:center} /* 제목 끝 (괄호)는 아래 줄로 */ .td-flight-hd-par{display:block;margin-top:2px} /* 제목이 2줄이면 박스 상단 여백 확보(뱃지 2번째 줄이 본문과 겹치지 않게) */ .td-flight--2line{padding-top:26px} .td-flight-opt-ttl{font-size:15px} .td-flight-opt-sub{font-size:13px} .td-flight-opt-body{font-size:13px;line-height:1.7} .td-ov-cities{line-height:1.8} /* 할인혜택 */ .td-discount{padding:15px} .td-discount-item{font-size:13px} .td-discount-list{gap:6px} /* 입금안내 */ .td-pay-ttl{font-size:24px} .td-pay-steps{gap:5px} .td-pay-step{padding:10px 5px} .td-pay-step-num{width:32px;height:32px} .td-pay-step-lbl{font-size:12px} .td-pay-notes{font-size:13px;padding-left:15px} .td-pay-table{margin-bottom:18px} .td-pay-table th{font-size:14px} .td-pay-table td{font-size:14px;padding:20px 0} .td-pay-table td.amt{font-size:18px} /* 예약 카드(booking) — 모바일에선 히어로 이미지 바로 다음에 표시 */ .page-travel #book{order:-1;margin-top:5px} /* 히어로↔booking 간격 20→10px(절반) */ .page-travel #book .booking{margin-top:0;position:static;padding:5px 18px 18px 18px} .booking .bk-title{display:none} .booking .meta-line.fee b{font-size:18px} .booking .meta-line{font-size:15px;padding:8px 0} .booking .btn-fill{margin-top:12px!important;height:50px;display:inline-flex;align-items:center;justify-content:center;font-size:16px} /* 다른 여정 (상세페이지 하단) */ .page-travel .grid-3{gap:14px} .page-travel .tcard h3{font-size:20px} /* 푸터 링크 */ .foot-col a{font-size:14px;padding:2px 0} /* 푸터 브랜드명 축소 */ .foot-brand .b{font-size:16px} /* Contact 칼럼: 문의하기 버튼을 제목(Contact) 우측으로 */ body:not(.page-mypage) .site-footer .foot-top .foot-col:last-child{position:relative} body:not(.page-mypage) .site-footer .foot-top .foot-col:last-child .foot-inquiry{position:absolute;top:0;right:0;margin-top:0} .camp-items{margin-bottom:22px} /* booklets와 간격 32→22 (10px 줄임) */ .camp-booklets{gap:8px} /* 여행개요: 라벨/내용 상하 배치 */ .td-ov-row{grid-template-columns:1fr} /* 페이지 히어로 */ .page-hero{padding-top:70px} .page-hero .lede{margin-top:5px} /* td-meta 값 */ .td-meta .m span{font-size:14px;font-weight:600} /* 건축클래스 상단배너(.feature) — 모바일 */ .page-class .feature h2{font-size:clamp(24px,3.6vw,40px)} .page-class .feature .td-meta{margin-top:20px!important} .page-class .td-meta .m b{font-size:13px} .page-class .td-meta .m span{font-size:15px} .page-class .feature .td-meta .m:nth-child(3){display:none} /* 정원 숨김 */ /* 건축클래스 featured (class.html 전용 .feature) — h2는 clamp(28,3.6vw,40) 그대로 적용 */ .feature .btn{font-size:14px;height:40px} /* travel.html 단체여행 CTA */ .travel-cta{padding-block:30px} .travel-cta h2{font-size:22px!important} /* 인라인 font-size 덮어쓰기 */ .travel-cta p{font-size:14px} .travel-cta .btn{font-size:14px;height:40px;padding:0 17px} /* 푸터 상단 여백 */ .site-footer{padding-top:30px;border-top:0} /* 매거진·아카이브 상세는 푸터 상단 여백 50px */ .page-magazine .site-footer,.page-archive .site-footer{padding-top:50px} /* eyebrow 앞 선 길이 */ .eyebrow::before{width:15px} /* 전체보기 링크 */ .link-more{gap:4px;font-weight:400;letter-spacing:.01em} /* 카드 상태 태그 */ .tcard .tag{font-size:9.5px;font-weight:300;padding:2px 8px 1px 8px;top:6px;left:6px} /* 건축가이드 프로필 1줄 2개 */ .guide-grid{grid-template-columns:repeat(2,1fr);gap:8px} /* 메인 건축가이드 소개: 1줄(2개)만 노출 */ .page-home #architect .guide-grid>*:nth-child(n+3){display:none} .gcard .g-overlay{padding:10px} .gcard .g-name{font-size:16px} .gcard .g-role{margin-top:0} /* 이력 자동 bullet(–) 제거 */ .gcard .g-cv li::before{display:none} .gcard .g-cv li{padding-left:0} /* 메인 건축클래스 미니카드 2개만 노출 */ .page-home .class-list .class-card:nth-child(n+3){display:none} /* 로그인/회원가입 페이지: 좁은 폼 위 여백 제거 + 푸터 숨김 */ .auth-wrap--narrow{padding-top:0} .page-auth-entry .site-footer{display:none} .auth-done{border:0} /* MY PAGE */ .page-mypage .page-hero h1{font-size:22px;font-family:'Noto Sans KR','Noto Sans',sans-serif} .page-mypage .btn-sm{height:40px;font-size:15px} .page-mypage .btn-line{border:1px solid #adadad} .tm-head{margin-bottom:0;padding-top:20px} .tm-rows .row{font-size:15px;padding:10px 2px} .page-mypage .page-hero .lede{font-size:14px} .mp-tab{font-size:14px;font-weight:500;padding:10px 16px;border-radius:3px;white-space:nowrap} .mp-title{font-size:20px;margin-bottom:10px;padding-bottom:10px} .page-mypage .foot-col a{font-size:13px} .page-mypage .foot-col a.foot-mail{font-size:14px} /* Contact 제목 우측 문의하기 버튼 */ .page-mypage .foot-contact .foot-col-hd{display:flex;align-items:center;justify-content:space-between;gap:12px} .page-mypage .foot-contact .foot-col-hd h5{margin-bottom:0} .page-mypage .foot-contact .foot-inquiry{margin-top:0;padding:6px 16px;font-size:13px} /* 건축가이드 소개 sec-head: link-more를 제목줄에 맞춤 */ .page-home .guide-head{position:relative} .page-home .guide-head .link-more{position:absolute;right:0;top:60px} }