@charset "utf-8";
/* =========================================================================
The IRO — 메인 페이지(원페이지) 전용 스타일
· 이 파일은 /index.jsp 에서만 로 불러온다(headHtml.jsp 다음).
· 사이트 공통(헤더·푸터·디자인 토큰 --iro-*)은 /css/custom.css 에 있다.
· 선택자는 모두 .iro_main 하위로 스코프를 한정해 다른 페이지를 오염시키지 않는다.
· 톤: 블랙앤화이트 + 포인트 1색(--iro-point) / 모든 박스는 각지게(radius 0).
========================================================================= */
/* ------------------------------ 공통 골격 ------------------------------ */
.iro_main {
font-family: var(--iro-sans);
color: var(--iro-ink);
background: var(--iro-paper);
letter-spacing: -.01em;
overflow-x: hidden;
}
.iro_main *, .iro_main *::before, .iro_main *::after { box-sizing: border-box; border-radius: 0; }
.iro_main img { max-width: 100%; }
/* 좌우를 넓게 쓴다. 화면이 커질수록 여백도 함께 늘어 답답해지지 않는다. */
.iro_inner {
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0 clamp(20px, 4.5vw, 80px);
}
.iro_sec { padding: 170px 0; }
.iro_sec.is_gray { background: var(--iro-paper-2); }
.iro_sec.is_dark { background: var(--iro-ink); color: #fff; }
/* 섹션 제목 — 히어로와 같은 문법: 큰 영문(Playfair) 아래 얇은 한글.
원래는 작은 대문자 라벨이었는데, 히어로의 대형 타이포와 위계를 맞춰 제목으로 올렸다. */
.iro_eyebrow {
margin: 0 0 20px;
font-family: var(--iro-serif);
font-size: clamp(36px, 4.4vw, 66px);
font-weight: 400;
line-height: 1.04;
letter-spacing: -.03em;
color: var(--iro-ink);
text-transform: none;
}
.iro_sec.is_dark .iro_eyebrow { color: #fff; opacity: 1; }
/* 한글 부제 — 크게 키운 만큼 획은 얇게(히어로와 같은 원칙) */
.iro_tit {
margin: 0;
font-size: clamp(19px, 1.9vw, 28px);
font-weight: 200;
line-height: 1.55;
letter-spacing: -.04em;
color: var(--iro-ink-2);
}
.iro_tit strong { font-weight: 400; color: var(--iro-ink); }
/* 제목 자체가 영문인 섹션(Before & After)은 부제가 아니라 대형 제목으로 쓴다 */
.iro_tit.is_en {
font-family: var(--iro-serif);
font-size: clamp(36px, 4.4vw, 66px);
font-weight: 400;
line-height: 1.04;
letter-spacing: -.03em;
color: var(--iro-ink);
}
.iro_sec.is_dark .iro_tit { color: #a8a8ad; }
.iro_lead {
margin: 24px 0 0;
max-width: 760px;
font-size: clamp(15px, 1.25vw, 17px);
font-weight: 300;
line-height: 1.95;
color: var(--iro-ink-2);
}
.iro_sec.is_dark .iro_lead { color: #a8a8ad; }
.iro_head { margin-bottom: 92px; }
/* 이미지 자리표시자 — 실제 사진을 받으면 ![]()
로 교체한다 */
.iro_ph {
position: relative;
display: block;
width: 100%;
background: var(--iro-paper-3);
overflow: hidden;
}
.iro_ph::after {
content: attr(data-label);
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
font-family: var(--iro-serif);
font-size: 11px;
font-weight: 500;
letter-spacing: .2em;
color: #9d9da3;
white-space: nowrap;
}
.iro_ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 각진 버튼 */
.iro_btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 55px;
padding: 0 34px;
border: 1px solid var(--iro-ink);
background: var(--iro-ink);
font-family: var(--iro-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
color: #fff;
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease;
cursor: pointer;
}
/* 다홍 면 위에는 흰 글자 (예전 베이지 면에서는 검정을 얹었다) */
.iro_btn:hover { background: var(--iro-point); border-color: var(--iro-point); color: #fff; }
.iro_btn.is_line { background: transparent; color: var(--iro-ink); }
.iro_btn.is_line:hover { background: var(--iro-ink); border-color: var(--iro-ink); color: #fff; }
.iro_btn.is_point { background: var(--iro-point); border-color: var(--iro-point); color: #fff; }
.iro_btn.is_point:hover { background: var(--iro-point-dk); border-color: var(--iro-point-dk); }
/* 스크롤 등장 효과 */
.js-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .8s ease, transform .8s ease;
}
.js-reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js-reveal { opacity: 1; transform: none; transition: none; }
}
/* ------------------------------ 01 히어로 ------------------------------ */
/* 모델을 경계로 화면을 둘로 나눈다 — 왼쪽(카피)은 밝은 종이 톤, 오른쪽(모델)은 어두운 면.
밝은 쪽은 헤더(흰 배경)와 이어지고, 어두운 쪽은 모델의 피부·흰 드레스를 떠오르게 한다. */
.iro_hero {
position: relative;
display: flex;
align-items: center;
/* 고정 헤더가 위를 덮으므로 화면 전체 높이를 쓰고, 헤더 높이만큼 안쪽 여백을 준다 */
min-height: 100vh;
padding-top: var(--iro-head-h);
background: var(--iro-paper); /* 밝은 바탕 — 어두운 쪽은 ::before 로 덮는다 */
overflow: hidden; /* 배경이 확대될 때 밖으로 넘치는 부분을 자른다 */
}
/* 배경 — 흰 꽃 사진(main_hero_bg.png)은 "어색하다" 는 피드백으로 걷어냈다(2026-09).
대신 흰 종이에서 연회색으로 아주 천천히 기우는 면 하나만 깐다(위 순백 → 아래 #f3f3f5).
사진이 없으니 드리프트 애니메이션도 함께 뺐다 — 움직일 대상이 없다. */
.iro_hero .hero_bg {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #ffffff 0%, #fafafb 55%, #f3f3f5 100%);
}
/* 오른쪽 회색 면 — 모델이 서는 쪽만 덮는다.
※ ::before 는 첫 자식처럼 그려져 .hero_panel(모델) 보다 아래에 깔린다.
그래서 모델 위에는 이 면이 얹히지 않고 배경만 어두워진다.
전환은 모델의 몸 안쪽(대략 화면 62%) 에서 시작해 82% 에서 거의 다 차오른다.
— 더 왼쪽에서 시작하면 카피 뒤까지 회색이 번져 밝은 면이 좁아 보인다.
면 색은 중립 회색(#5c5c64). 연회색(#ccc 대) → 차콜 → 로즈그레이(핑크 기운) 를 거쳐
"핑크빛 빼고 회색으로" 피드백으로 정한 값이다 — 흰 드레스와 피부가 또렷하고 면은 무겁지 않다.
※ 그라디언트 정지점의 rgba 색은 전부 같은 값이어야 한다(색이 다르면 중간 톤이 띠처럼 튄다). */
.iro_hero::before {
content: "";
position: absolute;
inset: 0;
/* 정지점을 촘촘하게 두어 밝은 면 → 회색 면이 한 호흡으로 이어지게 한다.
(정지점이 성기면 중간에 띠처럼 경계가 보인다 — "그라데이션 경계가 보인다" 피드백)
한 색(회색 #5c5c64)으로 통일하고 알파만 올린다 — 색상까지 바꾸면 중간 톤이 따로 튄다. */
background: linear-gradient(96deg,
rgba(92,92,100,0) 0%,
rgba(92,92,100,0) 48%,
rgba(92,92,100,.06) 55%,
rgba(92,92,100,.18) 61%,
rgba(92,92,100,.36) 67%,
rgba(92,92,100,.58) 73%,
rgba(92,92,100,.78) 79%,
rgba(92,92,100,.92) 86%,
rgba(92,92,100,1) 94%,
rgba(92,92,100,1) 100%);
pointer-events: none;
z-index: 1;
}
/* 면 안쪽 명암(위 밝게·아래 어둡게)은 뺐다 — 가로 마스크의 끝이 경계선처럼 드러났다. */
/* 왼쪽 밝은 면 — 흰색과 연회색만으로 조합한다(다홍 번짐은 피드백으로 뺐다).
위·왼쪽은 순백에 가깝게 두고, 아래쪽 가장자리로 갈수록 연회색이 아주 옅게 깔리게 해
종이 한 장이 빛을 받는 듯한 깊이만 남긴다. 회색 면 쪽으로는 번지지 않도록 60% 안에서 끊는다. */
.iro_hero::after {
content: "";
position: absolute;
inset: 0;
background:
/* 회색 면의 명암 — 오른쪽 아래는 핑크 기운, 위로 갈수록 어두운 회색(피드백).
::before 의 회색(#5c5c64) 위에 얹히므로 핑크는 탁한 로즈로, 위쪽은 차콜로 가라앉는다.
두 라디얼 모두 오른쪽 가장자리에 붙여 왼쪽 밝은 면으로는 넘어오지 않게 한다. */
radial-gradient(ellipse 48% 62% at 96% 104%,
rgba(242,110,100,.58) 0%,
rgba(242,110,100,.30) 40%,
rgba(242,110,100,0) 78%),
radial-gradient(ellipse 56% 64% at 98% -6%,
rgba(14,14,20,.50) 0%,
rgba(14,14,20,.26) 40%,
rgba(14,14,20,0) 78%),
/* 모델 바로 왼쪽(화면 58% 지점)에 핑크를 아주 옅게 번지게 한다 — 흰 면과 회색 면이 만나는
자리에 포인트색의 기운만 살짝 얹어 모델 뒤로 빛이 도는 느낌을 준다(피드백).
카피(≤56vw) 쪽으로는 번지지 않게 가로 폭을 좁게 잡는다. */
radial-gradient(ellipse 20% 58% at 58% 56%,
rgba(242,86,75,.16) 0%,
rgba(242,86,75,.07) 45%,
rgba(242,86,75,0) 75%),
radial-gradient(ellipse 70% 60% at 8% 100%,
rgba(17,17,17,.06) 0%,
rgba(17,17,17,.025) 40%,
rgba(17,17,17,0) 70%),
radial-gradient(ellipse 50% 50% at 0% 0%,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,0) 60%);
pointer-events: none;
z-index: 1;
}
/* 모델이 서는 영역 — 히어로 전체를 덮는다.
※ 예전에는 오른쪽 50% 만 차지했는데, 그러면 모델이 화면 오른쪽 끝으로 밀려
오른쪽에 빈 검은 면이 남았다. 지금은 패널을 전체로 두고 이미지 위치로만 잡는다.
딥레드 배경(main_hero_bg_02.png)은 뺐다. 다시 넣으려면 아래 background 주석을 풀면 된다.
지금은 배경 없이 왼쪽 꽃 배경이 그대로 이어진다. */
.iro_hero .hero_panel {
position: absolute;
inset: 0;
/* 카피(.hero_copy, z-index:2) 보다 위에 세워 모델이 영문 카피의 끝을 살짝 가리게 한다.
— 사진이 글자 앞에 서면서 두 요소가 한 장면처럼 맞물린다.
※ pointer-events:none 필수 — 패널이 히어로 전체를 덮으므로 이게 없으면
그 아래 CTA·링크의 클릭을 사진이 가로챈다. (카피는 DOM 에 온전히 남아 낭독은 정상) */
z-index: 3;
pointer-events: none;
/* background: url('/img/main_hero_bg_02.png') center center / cover no-repeat; */
overflow: hidden;
}
/* 모델 사진은 원본이 허리 아래에서 끊긴 컷이라, 세로 가운데에 띄우면
잘린 단면이 그대로 드러난다. 바닥(bottom:0)에 붙이고 높이를 섹션 전체로 채워
끊긴 부분이 화면 밖으로 나가게 한다.
가로는 오른쪽(73%)에 세운다 — 더 왼쪽으로 오면 카피와 겹쳐 글이 읽히지 않는다.
※ 이 값을 바꾸면 아래 ::before/::after 의 그라디언트 정지점도 함께 옮겨야
밝은 면과 베이지 면의 경계가 모델 위치와 맞는다.
(.iro_main img 의 max-width:100% 가 걸리지 않도록 max-width 를 풀어준다). */
.iro_hero .hero_panel img {
position: absolute;
left: 73%;
bottom: 0;
transform: translateX(-50%);
height: 100%;
width: auto;
max-width: none;
object-fit: contain;
object-position: center bottom;
}
/* 카피 블록은 아래 섹션(.iro_inner)과 똑같은 컨테이너 규격으로 둔다 —
max-width 1800px + clamp(20px, 4.5vw, 80px). 헤더(#header .inner)도 같은 값이라
로고 · 카피 · 섹션 제목의 왼쪽 선이 화면폭과 무관하게 한 줄로 맞는다.
※ 폭 제한은 이 컨테이너가 아니라 안쪽 요소에 준다. 컨테이너에 max-width 를 걸고
좌측 패딩을 화면폭 기준으로 계산하면, 넓은 화면에서 패딩이 max-width 를 넘어서며
글자가 한 줄에 한두 자씩 떨어지는 현상이 생긴다. */
.iro_hero .hero_copy {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
max-width: 1800px;
margin: 0 auto;
/* 실적 바가 들어오면서 카피가 길어져 위아래 100 → 64 로 줄였다(첫 화면에 실적 바까지 보이게) */
padding: 64px clamp(20px, 4.5vw, 80px);
}
/* 카피 폭은 화면 절반(우측 딥레드 패널이 시작하는 지점)을 넘지 않게 묶어둔다.
화면이 좁아질수록 자동으로 함께 줄어 패널과 글이 겹치지 않는다. */
.iro_hero .hero_copy > * { max-width: min(760px, calc(56vw - 70px)); }
/* 상단 라벨 — "타투 커버" 가 주력이라는 걸 첫 화면에서 바로 읽히게 한다(메인은 타투 위주 요청).
앞에 두었던 짧은 다홍 선은 뺐다(피드백) — 글자만 남긴다. */
.iro_hero .hero_label {
display: block;
margin: 0 0 22px;
font-family: var(--iro-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--iro-point-ink);
}
/* 카피가 놓이는 왼쪽이 밝은 면이므로 글자는 검정으로 세운다.
이 한 줄만 폭 제한(hero_copy > * 의 max-width)을 풀어 모델 쪽으로 조금 넘어가게 둔다.
— 카피와 사진이 맞물려 한 장면처럼 보인다. hero_copy 가 z-index:2 라 글자가 위에 얹힌다.
겹치는 지점이 모델의 밝은 어깨·등이라 검은 글자의 가독성은 유지된다. */
.iro_hero .hero_en {
margin: 0 0 24px;
max-width: none;
font-family: var(--iro-serif);
/* 2026-09-28 카피가 "Hide less, Remember more." 로 길어져 6.5vw → 4.5vw 로 낮췄다(모델에 가려지지 않게) */
font-size: clamp(34px, 4.5vw, 84px);
font-weight: 400; /* Playfair Display 는 300 이 없어 400 이 가장 얇다 */
line-height: 1.04;
letter-spacing: -.035em;
color: var(--iro-ink);
}
/* 뒷말도 정체로 둔다(이탤릭은 기울어 보인다는 요청) */
.iro_hero .hero_en em {
font-style: normal;
font-weight: 400;
}
.iro_hero .hero_kr {
margin: 0;
font-size: clamp(21px, 2.9vw, 41px);
font-weight: 200; /* 크게 키운 만큼 획을 얇게 — 커질수록 가벼워야 우아하다 */
line-height: 1.44;
letter-spacing: -.045em;
color: var(--iro-ink);
}
/* 강조는 굵기 대신 브랜드 색으로. 굵게 하면 무거워지고 뷰티 톤이 깨진다.
밝은 바탕에서는 옅은 --iro-point 가 흐려 보이므로 진한 --iro-point-ink 를 쓴다. */
.iro_hero .hero_kr em {
font-style: normal;
font-weight: 400;
color: var(--iro-point-ink);
}
/* 보조 카피(2026-09-28 추가) — 한글 타이틀과 설명문 사이에서 한 호흡 쉬는 문장 */
.iro_hero .hero_sub {
margin: 20px 0 0;
font-size: clamp(16px, 1.35vw, 20px);
font-weight: 300;
line-height: 1.7;
letter-spacing: -.03em;
color: var(--iro-ink);
}
.iro_hero .hero_desc {
margin: 22px 0 0;
max-width: 500px;
font-size: 16px;
font-weight: 300;
line-height: 1.95;
color: var(--iro-ink-2);
}
/* 히어로 CTA — 박스 두 개는 무거워서, 면 하나 + 밑줄 텍스트 하나로 강약을 준다 */
.iro_hero .hero_actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 44px;
margin-top: 36px;
}
/* 주 CTA — 차콜 그레이 솔리드 면(피드백: 검정 대신 그레이 느낌).
오른쪽 모델 뒤 회색 면(#5c5c64)보다 한 단계 어두운 차콜로 두어 버튼만 또렷하게 서고, 회색 톤은 한 가족으로 읽힌다.
끝의 짧은 선은 보조 링크(.hero_link)의 화살표와 같은 언어 — 두 액션이 한 세트로 읽힌다.
hover 에서 면을 비워 선만 남기고, 헤더 전화 버튼은 반대로 면이 채워진다. */
.iro_hero .hero_cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
height: 62px;
padding: 0 40px;
background: #33333a;
border: 1px solid #33333a;
box-shadow: 0 12px 32px rgba(60,60,68,.18);
font-family: var(--iro-sans);
font-size: 15px;
font-weight: 400;
letter-spacing: .06em;
color: #fff;
text-decoration: none;
transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
/* 화살표는 CSS 선으로 그린다(글꼴 화살표는 크기가 들쭉날쭉하다) */
.iro_hero .hero_cta::after {
content: "";
width: 26px; height: 1px;
background: currentColor;
transition: transform .3s ease;
}
.iro_hero .hero_cta:hover {
background: transparent;
border-color: #33333a;
color: #222228;
box-shadow: none;
}
.iro_hero .hero_cta:hover::after { transform: translateX(6px); }
/* 보조 — 테두리 없이 밑줄만. 화살표는 CSS 로 그린다(글꼴 화살표는 크기가 들쭉날쭉하다) */
.iro_hero .hero_link {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
padding-bottom: 9px;
font-family: var(--iro-sans);
font-size: 16px;
font-weight: 400;
letter-spacing: .04em;
color: var(--iro-ink);
text-decoration: none;
}
.iro_hero .hero_link::before {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: rgba(17,17,17,.35);
transition: background .25s ease;
}
.iro_hero .hero_link::after {
content: "";
width: 26px; height: 1px;
background: currentColor;
transition: transform .3s ease;
}
.iro_hero .hero_link:hover { color: var(--iro-point-ink); }
.iro_hero .hero_link:hover::before { background: var(--iro-point-ink); }
.iro_hero .hero_link:hover::after { transform: translateX(6px); }
/* 좌측 하단 스크롤 표시 */
.iro_hero_wrap .hero_scroll {
position: absolute;
z-index: 2;
/* 카피 · 섹션과 같은 왼쪽 선에 세운다(컨테이너 좌측 여백 + 패딩).
※ 100vw 가 아니라 100%(부모 .iro_hero_wrap 의 폭) 로 계산한다 —
100vw 는 세로 스크롤바 폭까지 포함해서, 스크롤바가 있는 화면에서
카피보다 스크롤바 절반(약 8px) 만큼 오른쪽으로 밀린다. */
left: calc(max((100% - 1800px) / 2, 0px) + clamp(20px, 4.5vw, 80px));
bottom: 40px;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--iro-serif);
font-size: 11px;
font-weight: 500;
letter-spacing: .22em;
color: var(--iro-ink-3);
}
.iro_hero_wrap .hero_scroll::after {
content: "";
width: 54px; height: 1px;
background: var(--iro-ink-3);
transform-origin: left center;
animation: iroScrollLine 2.2s ease-in-out infinite;
}
@keyframes iroScrollLine {
0%, 100% { transform: scaleX(.3); opacity: .5; }
50% { transform: scaleX(1); opacity: 1; }
}
.iro_hero_wrap { position: relative; }
/* 실적 바가 왼쪽 아래 자리를 차지해 SCROLL 표시와 겹치므로 숨긴다(2026-09-28). 마크업은 남겨 둔다. */
.iro_hero_wrap .hero_scroll { display: none; }
/* 실적 바(2026-09-28 요청) — 고객수 · 네이버 리뷰 · 만족도.
화이트 톤(재요청: 다홍 → 검정 → "화이트톤으로 세련된 느낌")
반투명 흰 면 + 흐림(유리 느낌) + 헤어라인 테두리. 숫자는 세리프 검정, 라벨은 작은 회색,
별점만 포인트 다홍으로 두어 한 곳에만 색이 선다. 위아래 가는 다홍 선이 면을 정돈한다.
폭은 카피 블록 규칙(.hero_copy > * 의 max-width)을 그대로 따른다. */
.iro_hero .hero_stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
margin: 30px 0 0;
background: rgba(255,255,255,.72);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(17,17,17,.08);
border-top: 1px solid var(--iro-point);
box-shadow: 0 18px 40px rgba(40,40,50,.08);
color: var(--iro-ink);
}
.iro_hero .hero_stats > div {
padding: 22px clamp(12px, 1.4vw, 26px) 20px;
text-align: center;
}
.iro_hero .hero_stats > div + div { border-left: 1px solid rgba(17,17,17,.08); }
.iro_hero .hero_stats dt {
margin: 0 0 8px;
font-size: 12px;
font-weight: 400;
letter-spacing: .02em;
color: var(--iro-ink-3);
}
.iro_hero .hero_stats dd {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 0 6px;
margin: 0;
}
.iro_hero .hero_stats strong {
font-family: var(--iro-serif);
font-size: clamp(24px, 2vw, 32px);
font-weight: 400;
line-height: 1.15;
letter-spacing: -.01em;
color: var(--iro-ink);
}
.iro_hero .hero_stats strong small { font-size: .6em; margin-left: 1px; color: var(--iro-point-ink); }
.iro_hero .hero_stats strong.is_star { font-family: inherit; font-size: clamp(15px, 1.2vw, 19px); letter-spacing: .14em; line-height: 1.95; color: var(--iro-point); }
.iro_hero .hero_stats dd span { font-size: 12px; font-weight: 300; color: var(--iro-ink-2); }
@media (max-width: 1024px) {
/* 좁은 화면에서는 좌우로 나누지 않고, 딥레드 패널을 히어로 아래쪽 띠로 돌린다.
padding-bottom 으로 패널 높이만큼 자리를 비워 카피와 겹치지 않게 한다. */
/* 좁은 화면의 히어로는 위에서부터 [카피] → [사진 띠] → [CTA] 순으로 쌓는다.
padding-bottom 으로 사진 띠(330) + CTA 자리(150) 만큼을 미리 비워 둔다. */
.iro_hero { min-height: 0; padding-bottom: 480px; }
.iro_hero .hero_panel {
top: auto; left: 0; right: 0; bottom: 150px; /* CTA 자리만큼 띄워 그 위에 앉힌다 */
width: 100%; height: 330px;
z-index: 1; /* 넓은 화면과 달리 카피와 겹치지 않으므로 위로 올릴 이유가 없다 */
}
/* 좁은 화면은 띠 안에서 가로 가운데로 세운다(세로는 넓은 화면과 같이 바닥 붙임).
넓은 화면에서는 사진의 잘린 단면이 화면 밖으로 나가지만, 좁은 화면에서는
띠 높이가 고정이라 단면이 띠 끝에 그대로 드러난다. 아래쪽을 서서히 투명하게
지워 배경 베이지로 녹아들게 한다(-webkit- 은 사파리·구형 크롬용). */
.iro_hero .hero_panel img {
left: 50%;
height: 100%;
-webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}
/* position:static 으로 두어야 아래 .hero_actions 의 absolute 기준이
.hero_copy 가 아니라 .iro_hero 가 된다(= 히어로 맨 아래로 갈 수 있다). */
.iro_hero .hero_copy { position: static; padding: 64px clamp(20px, 4.5vw, 80px) 44px; }
/* 첫 화면에서 카피가 한눈에 들어오도록 사이 간격을 좁힌다 */
.iro_hero .hero_en { margin-bottom: 20px; }
.iro_hero .hero_kr { line-height: 1.36; }
.iro_hero .hero_desc { margin-top: 20px; line-height: 1.75; }
/* CTA — 사진 띠 아래, 히어로 맨 바닥에 가로로 꽉 채워 놓는다 */
.iro_hero .hero_actions {
position: absolute;
left: clamp(20px, 4.5vw, 80px);
right: clamp(20px, 4.5vw, 80px);
bottom: 36px;
z-index: 2;
margin-top: 0;
gap: 14px;
}
.iro_hero .hero_copy > * { max-width: none; }
.iro_hero_wrap .hero_scroll { display: none; }
/* 좁은 화면은 좌우가 아니라 위아래로 나뉜다 — 카피가 놓이는 위쪽은 밝게 두고,
모델이 서는 아래쪽 띠만 어둡게 덮는다(넓은 화면의 좌/우 관계를 그대로 세운 것). */
.iro_hero::before {
background: linear-gradient(180deg,
rgba(92,92,100,0) 0%,
rgba(92,92,100,0) 50%,
rgba(92,92,100,.10) 58%,
rgba(92,92,100,.32) 66%,
rgba(92,92,100,.62) 75%,
rgba(92,92,100,.88) 86%,
rgba(92,92,100,1) 100%);
}
/* 좁은 화면은 위(카피)→아래(회색 띠)로 흐르므로 연회색 깊이도 카피 아래쪽에서만 옅게 깔린다 */
.iro_hero::after {
background:
/* 좁은 화면의 회색 띠 — 바닥은 핑크 기운, 위로 갈수록 어두운 회색(넓은 화면과 같은 규칙) */
radial-gradient(ellipse 70% 22% at 50% 104%,
rgba(242,110,100,.55) 0%,
rgba(242,110,100,.25) 45%,
rgba(242,110,100,0) 80%),
linear-gradient(180deg,
rgba(14,14,20,0) 60%,
rgba(14,14,20,.35) 74%,
rgba(14,14,20,0) 90%),
/* 좁은 화면은 모델이 아래 띠에 서므로 핑크 기운도 띠 바로 위에 가로로 옅게 깐다 */
radial-gradient(ellipse 60% 14% at 50% 60%,
rgba(242,86,75,.12) 0%,
rgba(242,86,75,0) 75%),
radial-gradient(ellipse 90% 30% at 50% 48%,
rgba(17,17,17,.04) 0%,
rgba(17,17,17,0) 70%);
}
/* 실적 바 — 좁은 화면에서는 CTA 가 히어로 맨 아래(absolute)로 가므로 실적 바도 그 밑, 히어로 바닥에 붙인다.
바 높이(--stats-h)만큼 히어로 아래 여백 · 사진 띠 · CTA 위치를 함께 올린다. */
.iro_hero { --stats-h: 104px; padding-bottom: calc(480px + var(--stats-h)); }
.iro_hero .hero_panel { bottom: calc(150px + var(--stats-h)); }
.iro_hero .hero_actions { bottom: calc(36px + var(--stats-h)); }
.iro_hero .hero_stats {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
height: var(--stats-h);
margin: 0;
/* 화면 끝까지 닿는 띠라 좌우 · 아래 테두리는 빼고 위 다홍 선만 남긴다. 아래 회색 사진 띠 위라 흰 면을 더 불투명하게 */
border-left: 0; border-right: 0; border-bottom: 0;
background: rgba(255,255,255,.94);
box-shadow: none;
}
.iro_hero .hero_stats > div { display: flex; flex-direction: column; justify-content: center; padding: 0 6px; }
.iro_hero .hero_stats dt { font-size: 12px; letter-spacing: -.03em; }
.iro_hero .hero_stats dd { flex-direction: column; align-items: center; }
.iro_hero .hero_stats strong { font-size: 24px; }
.iro_hero .hero_stats strong.is_star { font-size: 14px; letter-spacing: .05em; line-height: 1.9; }
.iro_hero .hero_stats dd span { font-size: 11px; }
}
/* ------------------------------ 02 ESSAY ------------------------------ */
/* 섹션 배경 — 단색 흰색(피드백). 다홍 그라디언트 이미지(solution_bg_02.png)·회색 번짐을 거쳐
결국 흰 면으로 정리했다. 유리 카드는 흰 배경 위에서 연회색 면으로 보인다(아래 .essay_card). */
.iro_sec.iro_essay { background: var(--iro-paper); }
.iro_essay .essay_quote {
max-width: 940px;
margin: 30px 0 0;
font-size: clamp(19px, 1.9vw, 27px);
font-weight: 200;
line-height: 1.7;
letter-spacing: -.04em;
color: var(--iro-ink);
}
/* ── 편집형 3열(피드백 레퍼런스 반영) ──
카드 상자 없이 흰 면 위에 세 열을 세운다. 열마다 [상단 헤어라인 → 큰 다홍 번호 → 작은 케이스 라벨
→ 제목 → 본문 → 맺음 한 줄] 순. 상자·배경·그림자를 모두 걷어내고 선 하나와 타이포로만 위계를 준다.
번호는 마크업의 data-no 에서 받아 ::before 로 그린다. */
.iro_essay .essay_cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 3vw, 48px);
}
.iro_essay .essay_card {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
padding: clamp(36px, 3.2vw, 52px) 0 0;
border: 0;
border-top: 1px solid var(--iro-line);
background: none;
box-shadow: none;
transition: border-color .3s ease;
}
/* hover — 위 선이 다홍으로 물든다(상자가 없으니 반응은 선 하나로만) */
.iro_essay .essay_card:hover { border-top-color: var(--iro-point); }
/* 큰 번호 — 세리프 다홍. 열의 앵커 역할 */
.iro_essay .essay_card::before {
content: attr(data-no);
display: block;
margin: 0 0 6px;
font-family: var(--iro-serif);
font-variant-numeric: lining-nums;
font-size: clamp(48px, 4.6vw, 72px);
font-weight: 400;
line-height: .9;
letter-spacing: -.02em;
color: var(--iro-point);
}
/* 케이스 라벨 — 번호 바로 아래, 아주 작고 옅은 회색 대문자 */
.iro_essay .essay_no {
display: block;
margin: 0 0 30px;
font-family: var(--iro-serif);
font-variant-numeric: lining-nums;
font-size: 10px;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--iro-ink-3);
}
.iro_essay .essay_card h3 {
margin: 0 0 22px;
padding: 0;
font-size: clamp(20px, 1.7vw, 25px);
font-weight: 400;
line-height: 1.5;
letter-spacing: -.04em;
word-break: keep-all;
}
/* 본문은 한 톤 낮춰 읽는 속도를 늦추고, 한글 단어가 중간에서 끊기지 않게 한다 */
.iro_essay .essay_card p {
margin: 0;
max-width: 26em;
font-size: clamp(14px, 1.05vw, 15px);
font-weight: 300;
line-height: 1.9;
letter-spacing: -.02em;
color: var(--iro-ink-2);
word-break: keep-all;
text-wrap: pretty; /* 마지막 줄에 한두 글자만 남는 것을 줄인다 */
}
/* 맺음 한 줄 — 굵게, 본문 바로 아래에 붙인다 */
.iro_essay .essay_card p.essay_line {
margin-top: 18px;
max-width: none;
font-size: clamp(14px, 1.05vw, 15px);
font-weight: 500;
line-height: 1.8;
color: var(--iro-ink);
}
/* 2026-09-28 요청: 카드 텍스트 가운데 정렬(번호 · 라벨 · 제목 · 본문 모두) */
.iro_essay .essay_card { align-items: center; text-align: center; }
.iro_essay .essay_card p { margin-left: auto; margin-right: auto; }
/* ----------------------------- 03 SOLUTION ----------------------------- */
/* 제거 시술 · 커버 · 커버 스티커 3열 비교(2026-09 "칸 3개" 요청). 각진 면 세 개를 붙여 세운다. */
/* 섹션 배경 — 연회색 면. 예전 아이보리 텍스처(solution_bg.jpg)는 웜톤이라 걷어냈다. */
.iro_solution {
background: var(--iro-paper-2) linear-gradient(180deg, #f7f7f9 0%, #efeff2 100%);
}
/* 좌: 제거 시술(흰 면) / 중: 더이로 커버(검정 면 — 우리 것을 가운데 세워 강조) / 우: 커버 스티커(흰 면) */
.iro_solution .cmp {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch;
border: 0;
background: none;
}
/* 흰 면 두 장이 붙으면 경계가 사라지므로 사이에 헤어라인을 넣는다(검정 면 옆은 면 색으로 이미 갈린다) */
.iro_solution .cmp_col + .cmp_col:not(.is_ours) { border-left: 1px solid var(--iro-line); }
.iro_solution .cmp_col.is_ours + .cmp_col { border-left: 0; }
/* 면의 색은 컬럼 변수(--c-*) 한 곳에서만 정한다.
기본은 흰 면(--c-* = 밝은 값), .is_ours 는 검정 면(어두운 값)으로 덮어쓴다.
자식(제목·부제·목록·맺음)은 전부 이 변수를 읽으므로, hover 로 흑/백을 맞바꿀 때
변수만 바꾸면 전체가 함께 뒤집힌다(아래 "마우스 인터랙션" 참조). */
.iro_solution .cmp_col {
--c-bg: var(--iro-paper);
--c-fg: var(--iro-ink);
--c-sub: var(--iro-ink-3);
--c-li: var(--iro-ink-2);
--c-note: var(--iro-ink-3);
--c-line: var(--iro-line);
display: flex;
flex-direction: column;
justify-content: flex-start; /* 세 칸의 제목 줄이 한 선에 맞도록 위에서부터 쌓는다(가운데 정렬은 칸마다 높이가 달라 어긋난다) */
/* 3열이 되어 칸 폭이 좁아졌으므로 좌우 안쪽 여백을 2열 때보다 줄인다 */
padding: clamp(44px, 4.4vw, 80px) clamp(24px, 3vw, 56px);
background: var(--c-bg);
color: var(--c-fg);
}
.iro_solution .cmp_col.is_ours {
--c-bg: var(--iro-ink);
--c-fg: #fff;
--c-sub: #9a9a9e;
--c-li: #c9c9ce;
--c-note: #9a9a9e;
--c-line: #3a3a3a;
}
.iro_solution .cmp_col h3 {
margin: 0 0 12px;
font-family: var(--iro-serif);
font-size: clamp(26px, 2.4vw, 38px);
font-weight: 400;
letter-spacing: -.02em;
}
/* 검정 면(우리 것) 제목 옆 짧은 다홍 선 — 세 칸 중 어느 것이 더이로인지 한눈에 표시한다 */
.iro_solution .cmp_col.is_ours h3::after {
content: "";
display: inline-block;
width: 28px; height: 2px;
margin: 0 0 .18em 16px;
vertical-align: baseline;
background: var(--iro-point);
}
.iro_solution .cmp_col .cmp_sub {
margin: 0 0 40px;
font-size: 13px;
font-weight: 400;
letter-spacing: .04em;
color: var(--c-sub);
}
/* 항목마다 가로선을 그으면 공책처럼 보인다.
선은 왼쪽 세로 한 줄만 남기고, 항목은 여백으로 나눈다. */
.iro_solution .cmp_list {
margin: 0;
padding: 4px 0 4px 26px;
list-style: none;
border-top: 0;
border-left: 1px solid var(--c-line);
}
.iro_solution .cmp_list li {
position: relative;
padding: 0;
border-bottom: 0;
font-size: clamp(15px, 1.1vw, 17px);
font-weight: 300;
line-height: 1.65;
letter-spacing: -.025em;
color: var(--c-li);
word-break: keep-all;
}
.iro_solution .cmp_list li + li { margin-top: 20px; }
.iro_solution .cmp_note {
margin: 38px 0 0;
padding-top: 26px;
border-top: 1px solid var(--c-line); /* 마무리 문장만 선으로 구분한다 */
font-size: 15px;
font-weight: 300;
line-height: 1.8;
color: var(--c-note);
}
.iro_solution .sol_foot {
margin: 40px 0 0;
font-size: 16px;
font-weight: 300;
color: var(--iro-ink-2);
}
/* ---------------------------- 04 CATALOGUE ---------------------------- */
.iro_catalogue .cat_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(30px, 3.2vw, 56px);
}
/* ── 시술안내 슬라이드 ────────────────────────────────────────
그리드 한 줄(3열 기준 3장)을 한 칸으로 보고 위아래로 1줄씩 민다.
높이는 JS 가 "연속 2줄 중 가장 높은 조합" 으로 고정한다. */
.iro_catalogue .cat_slider { position: relative; }
.iro_catalogue .cat_viewport { overflow: hidden; cursor: grab; }
.iro_catalogue .cat_slider.is_drag .cat_viewport { cursor: grabbing; }
.iro_catalogue .cat_slider.is_drag .cat_grid,
.iro_catalogue .cat_slider.is_drag .cat_grid * { user-select: none; }
.iro_catalogue .cat_grid img { -webkit-user-drag: none; user-select: none; }
.iro_catalogue .cat_grid {
transition: transform .6s cubic-bezier(.22,.61,.36,1);
will-change: transform;
align-content: start;
}
.iro_catalogue .cat_nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
margin-top: clamp(28px, 3vw, 44px);
}
/* ── 슬라이드 컨트롤(시술안내 · 후기 공통) ─────────────────────────
원형 버튼 + 글꼴 삼각형(◀▶ 회전)은 사이트의 각진 톤과 어긋나고 크기도 들쭉날쭉했다.
사각 상자 안에 CSS 선으로 꺾쇠(.arw)를 그린다 — 위(prev) / 아래(next).
hover 하면 면이 검정으로 차오르고 꺾쇠가 진행 방향으로 살짝 움직인다.
도트는 작은 사각 점, 현재 칸은 가로로 길게 늘어난 막대로 표시한다. */
.iro_catalogue .cat_arrow,
.iro_reviews .rev_arrow {
position: relative;
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--iro-ink);
background: var(--iro-paper);
border: 1px solid var(--iro-ink);
border-radius: 0;
cursor: pointer;
overflow: hidden;
transition: color .3s ease, border-color .3s ease;
}
/* 검정 면이 아래에서 위로 차오른다 */
.iro_catalogue .cat_arrow::before,
.iro_reviews .rev_arrow::before {
content: "";
position: absolute;
inset: 0;
background: var(--iro-ink);
transform: scaleY(0);
transform-origin: center bottom;
transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.iro_catalogue .cat_prev::before,
.iro_reviews .rev_prev::before { transform-origin: center top; } /* 이전(위)은 위에서 내려온다 */
.iro_catalogue .cat_arrow:hover::before,
.iro_reviews .rev_arrow:hover::before { transform: scaleY(1); }
.iro_catalogue .cat_arrow:hover,
.iro_reviews .rev_arrow:hover { color: #fff; }
/* 꺾쇠 — 두 변만 그린 사각형을 45° 돌린다. prev 는 위, next 는 아래를 가리킨다 */
.iro_catalogue .cat_arrow .arw,
.iro_reviews .rev_arrow .arw {
position: relative;
z-index: 1;
display: block;
width: 10px;
height: 10px;
border-left: 1px solid currentColor;
border-top: 1px solid currentColor;
transition: transform .3s ease;
}
.iro_catalogue .cat_prev .arw,
.iro_reviews .rev_prev .arw { transform: translateY(2px) rotate(45deg); }
.iro_catalogue .cat_next .arw,
.iro_reviews .rev_next .arw { transform: translateY(-2px) rotate(225deg); }
.iro_catalogue .cat_prev:hover .arw,
.iro_reviews .rev_prev:hover .arw { transform: translateY(-1px) rotate(45deg); }
.iro_catalogue .cat_next:hover .arw,
.iro_reviews .rev_next:hover .arw { transform: translateY(1px) rotate(225deg); }
/* 더 갈 곳이 없는 쪽은 선을 옅게 — 흐리게 지우는(opacity) 대신 헤어라인 톤으로 남긴다 */
.iro_catalogue .cat_arrow:disabled,
.iro_reviews .rev_arrow:disabled {
color: #c3c3c8;
border-color: var(--iro-line);
cursor: default;
}
.iro_catalogue .cat_arrow:disabled::before,
.iro_reviews .rev_arrow:disabled::before { display: none; }
.iro_catalogue .cat_prev:disabled:hover .arw,
.iro_reviews .rev_prev:disabled:hover .arw { transform: translateY(2px) rotate(45deg); }
.iro_catalogue .cat_next:disabled:hover .arw,
.iro_reviews .rev_next:disabled:hover .arw { transform: translateY(-2px) rotate(225deg); }
/* 페이지 표시 — 도트 대신 숫자로 "현재 장 / 전체 장" (2026-09 요청).
mainpage.js 가 0104 를 채운다.
가운데 구분은 글꼴 슬래시 대신 기울인 짧은 선으로 그려 크기를 일정하게 맞춘다. */
.iro_catalogue .cat_dots,
.iro_reviews .rev_dots {
display: flex;
align-items: baseline;
gap: 12px;
min-width: 96px;
justify-content: center;
font-family: var(--iro-serif);
/* Playfair 기본 숫자는 올드스타일(o1 처럼 높이가 들쭉날쭉)이라 라이닝 숫자로 고정한다 */
font-variant-numeric: lining-nums tabular-nums;
letter-spacing: .04em;
color: var(--iro-ink-3);
}
.iro_catalogue .cat_dots .cur,
.iro_reviews .rev_dots .cur {
font-size: 26px;
font-weight: 400;
line-height: 1;
color: var(--iro-ink);
}
.iro_catalogue .cat_dots .sep,
.iro_reviews .rev_dots .sep {
display: inline-block;
width: 1px;
height: 18px;
background: var(--iro-ink-3);
transform: rotate(24deg) translateY(1px);
opacity: .7;
}
.iro_catalogue .cat_dots .tot,
.iro_reviews .rev_dots .tot {
font-size: 14px;
line-height: 1;
}
/* 장 단위 표기 — 숫자 뒤 작은 한글 */
.iro_catalogue .cat_dots .unit,
.iro_reviews .rev_dots .unit {
margin-left: -6px;
font-family: var(--iro-sans);
font-size: 12px;
font-weight: 300;
line-height: 1;
}
/* 넘길 줄이 없으면 컨트롤 자체를 감춘다(mainpage.js 가 붙인다) */
.iro_catalogue .cat_slider.is_single .cat_nav { display: none; }
.iro_catalogue .cat_slider.is_single .cat_viewport { cursor: auto; }
/* 상자 대신 사진을 크게 세우고 그 아래 글을 놓는다 */
.iro_catalogue .cat_card {
border: 0;
background: none;
transition: none;
}
.iro_catalogue .cat_card:hover { transform: none; }
/* 썸네일 자리에 Before/After 슬라이더가 들어간다. 세로 사진이 많아 정사각으로 잡는다. */
.iro_catalogue .cat_thumb {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.iro_catalogue .cat_thumb .ba {
width: 100%; height: 100%;
aspect-ratio: auto;
}
.iro_catalogue .cat_thumb .iro_ph,
.iro_catalogue .cat_thumb img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 28%;
}
/* hover 확대는 넣지 않는다 — 슬라이더로 좌우를 비교하는 중에 사진이 움직이면 어긋나 보인다 */
/* 카드가 작으므로 핸들·라벨을 한 단계 줄인다 */
.iro_catalogue .ba_knob {
width: 40px; height: 40px;
margin: -20px 0 0 -20px;
}
.iro_catalogue .ba_knob::before,
.iro_catalogue .ba_knob::after { width: 7px; height: 7px; margin-top: -3.5px; }
.iro_catalogue .ba_knob::before { left: 10px; }
.iro_catalogue .ba_knob::after { right: 10px; }
.iro_catalogue .ba_tag {
bottom: 14px;
padding: 5px 10px;
font-size: 10px;
letter-spacing: .12em;
}
.iro_catalogue .ba_tag.is_before { left: 14px; }
.iro_catalogue .ba_tag.is_after { right: 14px; }
.iro_catalogue .cat_body { padding: 32px 0 0; }
.iro_catalogue .cat_en {
display: block;
margin-bottom: 14px;
font-family: var(--iro-serif);
font-size: 13px;
font-weight: 400;
letter-spacing: .18em;
color: var(--iro-point-ink);
}
.iro_catalogue .cat_body h3 {
margin: 0 0 20px;
font-size: clamp(20px, 1.7vw, 25px);
font-weight: 400;
letter-spacing: -.04em;
}
/* 1열(태블릿 이하) 전용 줄바꿈 — 2026-10-15 부터 설명은 모든 폭에서 문장 단위로 끊으므로(index.jsp)
br_tab 은 현재 쓰이지 않는다. 다른 단락에서 폭별 줄바꿈이 필요할 때를 위해 규칙만 남겨 둔다. */
.iro_catalogue .cat_body .br_tab { display: none; }
.iro_catalogue .cat_body p {
margin: 0 0 26px;
font-size: 15px;
font-weight: 300;
line-height: 1.85;
color: var(--iro-ink-2);
}
.iro_catalogue .cat_meta {
padding-top: 20px;
border-top: 1px solid var(--iro-line);
font-family: var(--iro-serif);
font-size: 12px;
font-weight: 400;
letter-spacing: .06em;
color: var(--iro-ink-3);
}
/* ---------------------------- 05 LOOKBOOK ---------------------------- */
.iro_lookbook .look_cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 96px);
align-items: start;
}
/* Before/After 비교 — 핸들을 좌우로 끌면 위에 겹친 After 가 잘려 보인다 */
.iro_main .ba {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--iro-paper-3);
cursor: ew-resize;
user-select: none;
touch-action: none;
}
.iro_main .ba_layer { position: absolute; inset: 0; }
/* 크롭 기준점은 사진마다 다르다. 전/후의 어깨선이 경계에서 이어지도록
카드에서 --bp(before) / --ap(after) 로 각각 지정한다(index.jsp 인라인). */
.iro_main .ba_layer img,
.iro_main .ba_layer .iro_ph { width: 100%; height: 100%; object-fit: cover; }
.iro_main .ba_before img,
.iro_main .ba_before .iro_ph img { object-position: var(--bp, center 26%); }
.iro_main .ba_after img,
.iro_main .ba_after .iro_ph img { object-position: var(--ap, center 26%); }
/* After 는 왼쪽부터 --pos 만큼만 보이도록 잘라낸다 */
.iro_main .ba_after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.iro_main .ba_handle {
position: absolute;
top: 0; bottom: 0;
left: var(--pos, 50%);
width: 2px;
margin-left: -1px;
background: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.12);
pointer-events: none;
}
/* 손잡이 — 흰 사각 면 위에 좌우 꺾쇠 두 개(‹ ›)를 CSS 선으로 그린다.
글꼴 삼각형(◀▶)은 굵고 크기가 들쭉날쭉해 각진 톤과 어긋났다. */
.iro_main .ba_knob {
position: absolute;
top: 50%; left: 50%;
width: 48px; height: 48px;
margin: -24px 0 0 -24px;
background: #fff;
box-shadow: 0 2px 14px rgba(0,0,0,.22);
color: var(--iro-ink);
}
.iro_main .ba_knob::before,
.iro_main .ba_knob::after {
content: "";
position: absolute;
top: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid currentColor;
border-left: 1px solid currentColor;
}
.iro_main .ba_knob::before { left: 13px; transform: rotate(-45deg); } /* ‹ */
.iro_main .ba_knob::after { right: 13px; transform: rotate(135deg); } /* › */
.iro_main .ba_tag {
position: absolute;
bottom: 20px;
padding: 7px 13px;
background: rgba(17,17,17,.72);
font-family: var(--iro-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
color: #fff;
pointer-events: none;
}
.iro_main .ba_tag.is_before { left: 20px; }
.iro_main .ba_tag.is_after { right: 20px; }
.iro_lookbook .look_thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 14px;
}
.iro_lookbook .look_thumb {
position: relative;
aspect-ratio: 134 / 84;
border: 1px solid var(--iro-line);
background: var(--iro-paper-3) center 26% / cover no-repeat; /* 케이스 대표 사진 */
cursor: pointer;
transition: border-color .2s ease;
}
.iro_lookbook .look_thumb.on,
.iro_lookbook .look_thumb:hover { border-color: var(--iro-ink); }
.iro_lookbook .look_thumb.on::before {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--iro-point);
}
.iro_lookbook .look_info h3 {
margin: 0 0 20px;
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 300;
letter-spacing: -.035em;
}
.iro_lookbook .look_info > p {
margin: 0 0 40px;
font-size: 15px;
font-weight: 300;
line-height: 1.9;
color: var(--iro-ink-2);
}
.iro_lookbook .look_spec { margin: 0 0 40px; border-top: 1px solid var(--iro-line); }
.iro_lookbook .look_spec > div {
display: flex;
align-items: baseline;
gap: 20px;
padding: 16px 0;
border-bottom: 1px solid var(--iro-line);
}
.iro_lookbook .look_spec dt {
flex: 0 0 110px;
font-family: var(--iro-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
color: var(--iro-ink-3);
}
.iro_lookbook .look_spec dd { margin: 0; font-size: 15px; font-weight: 400; }
.iro_lookbook .look_note {
margin: 26px 0 0;
font-size: 13px;
font-weight: 300;
line-height: 1.85;
color: var(--iro-ink-3);
}
/* ----------------------------- 06 REVIEWS ----------------------------- */
/* 섹션 배경 — Solution 과 같은 연회색 면(웜톤 텍스처 제외) */
.iro_reviews {
background: var(--iro-paper-2) linear-gradient(180deg, #f7f7f9 0%, #efeff2 100%);
}
/* 좌: 제목 / 우: 후기 목록 */
.iro_reviews .rev_layout {
display: grid;
grid-template-columns: minmax(280px, 0.85fr) 1.9fr;
gap: clamp(48px, 6vw, 120px);
align-items: start;
}
/* 제목은 다른 섹션과 같은 위치(섹션 상단)에 둔다.
예전에는 sticky 로 카드를 따라오게 했는데, 그러면 헤더 아래 60px 지점에 걸려
다른 섹션 제목보다 아래에 떠 보인다는 지적이 있어 고정 배치로 되돌렸다. */
.iro_reviews .iro_head {
position: static;
margin-bottom: 0;
}
/* 왼쪽 아래 큰 꽃(flower.png)은 걷어냈다(2026-09 "배경 꽃이 어색하다").
대신 제목 아래 왼쪽 빈 자리에 큰 인용부호를 옅게 세워 후기 섹션임을 암시한다. */
.iro_reviews { position: relative; overflow: hidden; }
.iro_reviews::after {
content: "\201C";
position: absolute;
left: clamp(8px, 2vw, 40px);
bottom: -.28em;
font-family: var(--iro-serif);
font-size: clamp(220px, 26vw, 460px);
font-weight: 400;
line-height: 1;
color: rgba(17,17,17,.04);
pointer-events: none;
z-index: 0;
}
/* 배경 장식 위로 내용이 오도록 한 단계 올린다 */
.iro_reviews .iro_inner { position: relative; z-index: 1; }
.iro_reviews .rev_cards {
display: grid;
grid-template-columns: 1fr; /* 오른쪽에서 세로로 쌓인다 */
gap: clamp(28px, 3vw, 48px);
}
/* ── 후기 슬라이드 ────────────────────────────────────────────
카드는 가로로 긴 형태(사진 좌 · 글 우)라 위아래로 1장씩 민다.
화면에는 항상 3장이 보이고, 넘길 때마다 한 칸씩 올라간다. */
.iro_reviews .rev_slider { position: relative; }
/* 높이는 JS 가 "연속 3장 중 가장 높은 조합" 으로 한 번 정해 고정한다.
장마다 높이를 바꾸면 섹션이 늘었다 줄었다 하며 아래 내용이 밀려 화면이 튄다. */
.iro_reviews .rev_viewport { overflow: hidden; cursor: grab; }
/* 끄는 동안에는 손 모양을 쥔 상태로 바꾸고 글자가 잡히지 않게 한다 */
.iro_reviews .rev_slider.is_drag .rev_viewport { cursor: grabbing; }
.iro_reviews .rev_slider.is_drag .rev_track,
.iro_reviews .rev_slider.is_drag .rev_track * { user-select: none; }
/* 드래그 중 이미지가 브라우저 기본 드래그로 끌려가지 않게 */
.iro_reviews .rev_track img { -webkit-user-drag: none; user-select: none; }
.iro_reviews .rev_track {
display: flex;
flex-direction: column;
gap: clamp(28px, 3vw, 48px);
transition: transform .6s cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
.iro_reviews .rev_track > .rev_card { flex: 0 0 auto; }
/* 화살표·도트 스타일은 시술안내(.cat_arrow/.cat_dot)와 함께 04 CATALOGUE 블록에서 공통으로 정의한다 */
.iro_reviews .rev_nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
margin-top: clamp(28px, 3vw, 44px);
}
/* 넘길 곳이 없으면(후기 3건 이하) 컨트롤 자체를 감춘다(mainpage.js 가 붙인다) */
.iro_reviews .rev_slider.is_single .rev_nav { display: none; }
.iro_reviews .rev_slider.is_single .rev_viewport { cursor: auto; }
/* 세로로 쌓이면 가로가 길어지므로 카드 안을 좌(사진)·우(글)로 나눈다 */
.iro_reviews .rev_card {
display: grid;
grid-template-columns: clamp(150px, 15vw, 220px) 1fr;
column-gap: clamp(24px, 2.6vw, 44px);
row-gap: 16px; /* 세로 간격은 좁게 — 글이 한 덩어리로 읽혀야 한다 */
align-items: start;
align-content: start; /* 행을 위로 몰아 빈 공간이 벌어지지 않게 한다 */
padding: clamp(28px, 3vw, 44px) 0 0;
border: 0;
border-top: 1px solid var(--iro-ink);
background: none;
}
/* 글은 .rev_body 하나로 묶여 있어 사진 옆에서 위부터 차곡차곡 쌓인다
(예전처럼 별점·본문·작성자를 각각 행에 두면 사진 높이가 행 사이로 분배돼 벌어진다) */
/* 사진은 카드 세로를 꽉 채운다(비율 대신 높이에 맞춰 잘라낸다).
width/min-width 를 못 박지 않으면 사진 원본 비율이 칸을 밀어내 옆 글과 겹친다. */
.iro_reviews .rev_photo {
align-self: stretch;
width: 100%;
min-width: 0;
height: 100%;
aspect-ratio: auto;
margin-bottom: 0;
}
.iro_reviews .rev_body {
display: flex;
flex-direction: column;
gap: 18px;
align-self: start;
}
/* .rev_body > p 규칙(검정)이 더 우선하므로 p 를 붙여 특정도를 맞춘다 */
.iro_reviews .rev_body > p.rev_star {
margin: 0;
font-size: 16px;
letter-spacing: .16em;
color: var(--iro-point); /* 별점은 포인트색(다홍) */
}
.iro_reviews .rev_body > p {
margin: 0;
max-width: 820px; /* 가로가 길어져 한 줄이 늘어지지 않게 묶는다 */
font-size: clamp(17px, 1.35vw, 20px);
font-weight: 300;
line-height: 1.85;
letter-spacing: -.02em;
color: var(--iro-ink);
}
.iro_reviews .rev_photo {
aspect-ratio: 4 / 3;
margin-bottom: 28px;
overflow: hidden;
background: var(--iro-paper-3);
}
.iro_reviews .rev_photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.iro_reviews .rev_user {
display: flex;
align-items: center;
gap: 14px;
margin-top: 8px;
padding-top: 22px;
border-top: 1px solid var(--iro-line);
}
.iro_reviews .rev_avatar {
flex: 0 0 auto;
width: 38px; height: 38px;
border-radius: 50%; /* 사람 아바타만 예외적으로 원형 */
background: var(--iro-paper-2);
border: 1px solid var(--iro-line);
}
.iro_reviews .rev_user b { display: block; font-size: 14px; font-weight: 500; }
.iro_reviews .rev_user span { display: block; margin-top: 4px; font-size: 12px; color: var(--iro-ink-3); }
/* ---------------------------- 07 BACKSTAGE ---------------------------- */
/* 섹션 배경 — 어두운 텍스처 한 장(backstage_bg.png). 원본이 갈색 기운이 도는 웜그레이라
그 위에 차가운 회색 막을 한 겹 덮어 톤을 중립으로 눌러 둔다(브라운 톤 제외 요청).
막이 진한 만큼 텍스처는 은은하게만 남고, 흰 글자는 더 또렷해진다. */
/* .iro_sec.is_dark 가 배경 검정을 지정하므로 선택자를 같은 무게로 맞춘다 */
.iro_sec.iro_backstage {
position: relative;
background: var(--iro-ink) url('/img/backstage_bg.png') center center / cover no-repeat;
}
.iro_backstage::before {
content: "";
position: absolute;
inset: 0;
background: rgba(22, 23, 27, .62);
pointer-events: none;
}
.iro_backstage .iro_inner { position: relative; z-index: 1; }
/* ── 편집형 목록(에디토리얼 로우) ──
4단계를 위→아래로 읽히는 행으로 세운다 — 순서는 "위에서 아래" 가 가장 직관적이다.
행 하나 = [번호 | 영문 라벨 + 제목 | 설명 | 소요 시간] 을 한 줄에 놓고 헤어라인으로 나눈다.
왼쪽 끝에 세로 타임라인(선 + 행마다 노드)을 세워 단계가 이어진다는 느낌을 준다.
■ 01 CONSULTING 부위 사진과 일정을 미리 확인해 … 소요 시간 약 10분
│ 상담
■ 02 MAPPING 피부 톤을 측정해 조색하고 … 소요 시간 약 15분
│ 맵핑
그리드 영역(grid-template-areas)으로 칸을 잡으므로 마크업은 그대로 둔다. */
.iro_backstage .step_list {
position: relative;
display: block;
margin: 0;
padding: 0 0 0 clamp(28px, 3vw, 48px); /* 왼쪽 = 타임라인 자리 */
list-style: none;
border: 0;
}
/* 타임라인 세로선 — 첫 행 노드에서 마지막 행 노드까지만 긋는다(끝을 넘기지 않는다) */
.iro_backstage .step_list::before {
content: "";
position: absolute;
left: 4px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 12%, rgba(255,255,255,.28) 88%, rgba(255,255,255,0) 100%);
}
.iro_backstage .step_item {
position: relative;
display: grid;
/* 2026-09-28: 소요 시간 칸을 빼고 사진 칸(photo)을 넣었다 — [번호 | 라벨·제목 | 사진 | 설명] */
grid-template-columns: clamp(96px, 9vw, 150px) minmax(150px, .7fr) clamp(180px, 16vw, 280px) minmax(260px, 1.6fr);
grid-template-areas:
"no en photo desc"
"no h3 photo desc";
grid-template-rows: auto auto;
column-gap: clamp(24px, 3vw, 56px);
align-items: center; /* 번호·제목·설명·시간이 행 가운데 선에 맞는다 */
align-content: center;
/* 사진 칸이 들어오며 행이 길어져 위아래 여백을 줄였다(2026-09-28, 사진 크기는 유지) */
padding: clamp(14px, 1.3vw, 22px) 0;
border: 0;
border-top: 1px solid rgba(255,255,255,.16);
text-align: left;
transition: border-color .3s ease;
}
.iro_backstage .step_item:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
/* 노드 — 타임라인 위, 행의 세로 가운데에 앉는 작은 사각형 */
.iro_backstage .step_item::before {
content: "";
position: absolute;
left: calc(-1 * clamp(28px, 3vw, 48px));
top: 50%;
margin-top: -4px;
width: 9px;
height: 9px;
background: #fff;
opacity: .75;
transition: opacity .3s ease, transform .3s ease;
}
/* 번호 — 행의 앵커. 세리프 대형 숫자 */
.iro_backstage .step_no {
grid-area: no;
display: block;
width: auto; height: auto;
margin: 0;
border: 0;
font-family: var(--iro-serif);
font-size: clamp(44px, 4.6vw, 72px);
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
color: rgba(255,255,255,.55); /* 옅은 흰색 — hover 에서 순백으로 차오른다 */
transition: color .3s ease;
}
.iro_backstage .step_en {
grid-area: en;
display: block;
margin: 6px 0 10px;
font-family: var(--iro-serif);
font-size: 12px;
font-weight: 400;
letter-spacing: .2em;
color: #fff;
opacity: .55;
}
.iro_backstage .step_item h3 {
grid-area: h3;
margin: 0;
font-size: clamp(22px, 1.9vw, 28px);
font-weight: 300;
letter-spacing: -.03em;
color: #fff;
}
.iro_backstage .step_item p {
grid-area: desc;
margin: 0;
max-width: 30em;
font-size: 15px;
font-weight: 300;
line-height: 1.85;
color: #a8a8ad;
word-break: keep-all;
transition: color .3s ease;
}
/* 단계 사진 — 2026-10-15 실제 사진 반영(backstage_01~04). 자리표시자 규칙은 사진이 빠진 단계용으로 남겨 둔다 */
/* 섹션 높이 축소(2026-09-28 요청, 레이아웃 유지) — 위아래 여백 170 → 120, 제목 아래 간격 92 → 56 */
.iro_sec.iro_backstage { padding: 120px 0; }
.iro_backstage .iro_head { margin-bottom: 56px; }
.iro_backstage .step_photo {
grid-area: photo;
aspect-ratio: 3 / 2; /* 4:3 → 3:2 로 눕혀 행 높이를 줄였다(폭은 그대로) */
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
}
.iro_backstage .step_photo::after { color: #75757b; }
.iro_backstage .step_photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 사진이 행 높이를 키우므로 라벨은 윗줄 바닥, 제목은 아랫줄 위에 붙여 한 덩어리로 둔다 */
.iro_backstage .step_en { align-self: end; }
.iro_backstage .step_item h3 { align-self: start; }
/* <더이로 특허 출원기술> 표기 — 설명 첫 줄 위의 작은 각진 태그(이 섹션은 포인트색을 쓰지 않는다) */
.iro_backstage .step_badge {
display: table;
margin: 0 0 12px;
padding: 4px 10px;
border: 1px solid rgba(255,255,255,.5);
font-size: 13px;
font-weight: 500;
letter-spacing: .02em;
line-height: 1.5;
color: #fff;
}
/* 소요 시간 — 행 오른쪽 끝. 라벨 위, 값 아래로 세워 오른쪽 정렬
※ 2026-09-28 요청으로 마크업에서 뺐다. 다시 쓰면 grid 에 time 칸을 되살릴 것. */
.iro_backstage .step_time {
grid-area: time;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
min-width: 120px;
color: #fff;
}
.iro_backstage .step_time small {
font-size: 13px;
font-weight: 300;
letter-spacing: .06em;
color: #a8a8ad;
}
.iro_backstage .step_time strong {
font-family: var(--iro-serif);
font-size: clamp(24px, 2.1vw, 32px);
font-weight: 400;
letter-spacing: .01em;
line-height: 1;
color: #fff;
white-space: nowrap;
}
/* hover — 행이 앞으로 나온다: 번호·노드는 흰색, 설명은 밝게, 위 선도 밝게.
이 섹션은 포인트색을 쓰지 않는다(2026-09 요청) — 어두운 면 위 흑백 명암으로만 위계를 준다. */
.iro_backstage .step_item:hover { border-top-color: rgba(255,255,255,.55); }
.iro_backstage .step_item:hover::before { opacity: 1; transform: scale(1.3); }
.iro_backstage .step_item:hover .step_no { color: #fff; }
.iro_backstage .step_item:hover p { color: #d6d6da; }
/* ------------------------------- 08 Q&A ------------------------------- */
/* 이 섹션만 가운데 정렬 — 질문 목록은 읽기 편하도록 본문은 왼쪽 정렬을 유지한다 */
.iro_qa .qa_inner { max-width: 1100px; margin: 0 auto; }
.iro_qa .iro_head { text-align: center; }
.iro_qa .iro_head .iro_lead { margin-left: auto; margin-right: auto; }
.iro_qa .qa_list { border-top: 1px solid var(--iro-ink); }
.iro_qa .qa_item { border-bottom: 1px solid var(--iro-line); }
.iro_qa .qa_q {
display: flex;
align-items: flex-start;
gap: 22px;
width: 100%;
padding: 34px 0;
border: 0;
background: none;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.iro_qa .qa_q .q_mark {
flex: 0 0 auto;
font-family: var(--iro-serif);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--iro-point-ink);
}
.iro_qa .qa_q .q_txt {
flex: 1 1 auto;
font-size: clamp(17px, 1.6vw, 23px);
font-weight: 300;
line-height: 1.5;
letter-spacing: -.04em;
color: var(--iro-ink);
}
/* 열림/닫힘 표시는 ＋ 와 － 를 CSS 로 그린다(각진 톤 유지) */
.iro_qa .qa_q .q_ico {
position: relative;
flex: 0 0 auto;
width: 16px; height: 16px;
margin-top: 5px;
}
.iro_qa .qa_q .q_ico::before,
.iro_qa .qa_q .q_ico::after {
content: "";
position: absolute;
top: 50%; left: 0;
width: 100%; height: 1px;
margin-top: -.5px;
background: var(--iro-ink);
transition: transform .25s ease;
}
.iro_qa .qa_q .q_ico::after { transform: rotate(90deg); }
.iro_qa .qa_item.on .qa_q .q_ico::after { transform: rotate(0deg); }
.iro_qa .qa_item.on .qa_q .q_txt { color: var(--iro-point-ink); }
.iro_qa .qa_a {
display: none;
padding: 0 0 32px; /* Q 마크를 없앴으므로 질문과 같은 왼쪽 기준선에 맞춘다 */
font-size: 15px;
font-weight: 300;
line-height: 1.95;
color: var(--iro-ink-2);
}
.iro_qa .qa_item.on .qa_a { display: block; }
/* --------------------------- 09 APPOINTMENT --------------------------- */
/* 좌: 지도 + 오시는 길 안내 / 우: 예약 폼 (별도 Location 섹션을 이 안으로 합쳤다)
DOM 순서도 지도 → 폼. 좁은 화면에서는 order 로 폼을 위에 올린다(반응형 블록 참조). */
.iro_appointment .app_cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(56px, 6vw, 120px);
align-items: start;
}
/* ── 지점 목록(지도 아래) ──
안양 · 부산 두 곳 + 2027 오픈 예정 한 곳, 총 3개(2026-09 요청).
행 하나 = [번호 | 지점명 + 주소 | 지도 링크] 를 헤어라인으로 나눠 세운다.
지도는 본점(안양) 퍼가기 한 장만 있으므로 지점마다 카카오맵 새 창 링크를 붙인다. */
/* 지도가 아래 띠로 빠져 지점 목록이 칸 맨 위에 선다(2026-09-28) — 위 여백을 없앤다 */
.iro_appointment .app_branches { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--iro-ink); }
.iro_appointment .branch_item {
display: grid;
grid-template-columns: 44px 1fr auto;
column-gap: 18px;
align-items: start;
padding: 20px 0;
border-bottom: 1px solid var(--iro-line);
}
.iro_appointment .branch_no {
font-family: var(--iro-serif);
font-variant-numeric: lining-nums;
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
line-height: 1.6;
color: var(--iro-point-ink);
}
.iro_appointment .branch_item h3 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 6px;
font-size: 17px;
font-weight: 500;
letter-spacing: -.02em;
color: var(--iro-ink);
}
.iro_appointment .branch_item p {
margin: 0;
font-size: 15px;
font-weight: 300;
line-height: 1.7;
color: var(--iro-ink-2);
word-break: keep-all;
}
/* 지점 배지 — 각진 작은 태그. 본점은 검정, 오픈 예정은 다홍 선 */
.iro_appointment .branch_tag {
display: inline-block;
padding: 3px 8px;
font-family: var(--iro-serif);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
line-height: 1.3;
color: #fff;
background: var(--iro-ink);
}
.iro_appointment .branch_tag.is_soon {
color: var(--iro-point-ink);
background: var(--iro-point-soft);
border: 1px solid var(--iro-point);
}
/* 오픈 예정 지점은 한 톤 낮춰 "아직" 임을 알린다 */
.iro_appointment .branch_item.is_soon h3 { color: var(--iro-ink-2); }
.iro_appointment .branch_item.is_soon p { color: var(--iro-ink-3); }
/* 지도 링크 — 히어로의 밑줄 링크(.hero_link)와 같은 언어. 짧게 "MAP" 만. */
.iro_appointment .branch_map {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 2px;
padding-bottom: 5px;
font-family: var(--iro-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: .18em;
color: var(--iro-ink);
text-decoration: none;
white-space: nowrap;
transition: color .25s ease;
}
.iro_appointment .branch_map::before {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: rgba(17,17,17,.3);
transition: background .25s ease;
}
.iro_appointment .branch_map::after {
content: "";
width: 18px; height: 1px;
background: currentColor;
transition: transform .3s ease;
}
.iro_appointment .branch_map:hover { color: var(--iro-point-ink); }
.iro_appointment .branch_map:hover::before { background: var(--iro-point-ink); }
.iro_appointment .branch_map:hover::after { transform: translateX(5px); }
/* 공통 안내(운영시간 · 연락처) — 지점 목록 아래, 라벨을 왼쪽에 세워 가로로 눕힌다. */
.iro_appointment .app_contact { margin: 0; }
.iro_appointment .app_contact > div {
display: grid;
grid-template-columns: 96px 1fr;
gap: 16px;
align-items: baseline;
padding: 18px 0;
border-bottom: 1px solid var(--iro-line);
}
.iro_appointment .app_contact dt {
font-family: var(--iro-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: .18em;
line-height: 1.9;
color: var(--iro-point-ink);
}
.iro_appointment .app_contact dd {
margin: 0;
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: var(--iro-ink-2);
}
.iro_appointment .app_contact dd a { color: inherit; text-decoration: none; }
.iro_appointment .app_contact dd a:hover { color: var(--iro-point-ink); }
/* 폼 — 흰 면 위에 밑줄만 남긴 입력. 사방 테두리를 두르면 칸이 겹겹이 쌓여
무거워지므로, 사이트 톤(선 위주)에 맞춰 아래 선 하나로만 구분한다. */
.iro_appointment .app_form {
padding: clamp(34px, 3.4vw, 62px);
border: 1px solid var(--iro-line);
background: var(--iro-paper);
}
.iro_appointment .form_row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 clamp(24px, 2.4vw, 40px);
}
.iro_appointment .form_field { margin-bottom: 30px; }
.iro_appointment .form_field label {
display: block;
margin-bottom: 6px;
font-size: 11px;
font-weight: 500;
letter-spacing: .1em;
color: var(--iro-ink-3);
}
.iro_appointment .form_field label em { font-style: normal; color: var(--iro-point-ink); }
.iro_appointment .form_field input[type="text"],
.iro_appointment .form_field input[type="tel"],
.iro_appointment .form_field input[type="email"],
.iro_appointment .form_field input[type="date"],
.iro_appointment .form_field select,
.iro_appointment .form_field textarea {
width: 100%;
height: 50px;
padding: 0 2px;
border: 0;
border-bottom: 1px solid var(--iro-line);
background: transparent;
font-family: inherit;
font-size: 15px;
font-weight: 300;
letter-spacing: -.01em;
color: var(--iro-ink);
transition: border-color .25s ease;
-webkit-appearance: none;
appearance: none;
}
.iro_appointment .form_field textarea {
height: 118px;
padding: 12px 2px;
line-height: 1.8;
resize: vertical;
}
/* 기본 화살표를 지운 자리에 삼각형 두 조각을 직접 그린다(각진 톤 유지) */
.iro_appointment .form_field select {
background-image: linear-gradient(45deg, transparent 50%, var(--iro-ink) 50%), linear-gradient(135deg, var(--iro-ink) 50%, transparent 50%);
background-position: calc(100% - 7px) 23px, calc(100% - 2px) 23px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.iro_appointment .form_field input:focus,
.iro_appointment .form_field select:focus,
.iro_appointment .form_field textarea:focus { outline: 0; border-bottom-color: var(--iro-ink); }
.iro_appointment .form_field input:hover,
.iro_appointment .form_field select:hover,
.iro_appointment .form_field textarea:hover { border-bottom-color: var(--iro-ink-3); }
.iro_appointment .form_field input::placeholder,
.iro_appointment .form_field textarea::placeholder { color: #c3c3c8; font-weight: 300; }
/* 아직 고르지 않은 select 는 placeholder 처럼 흐리게 둔다.
:has 미지원 브라우저에서는 평소대로 진하게 보일 뿐 동작에는 지장이 없다. */
.iro_appointment .form_field select:has(option[value=""]:checked) { color: #c3c3c8; }
.iro_appointment .form_agree {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 4px 0 34px;
font-size: 13px;
font-weight: 300;
line-height: 1.75;
color: var(--iro-ink-2);
cursor: pointer;
}
/* 브라우저 기본 체크박스는 둥글어서 톤이 깨진다 — 각진 사각형으로 직접 그린다 */
.iro_appointment .form_agree input {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 3px 0 0;
border: 1px solid var(--iro-line);
background: var(--iro-paper);
transition: background .2s ease, border-color .2s ease;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.iro_appointment .form_agree input:hover { border-color: var(--iro-ink-3); }
.iro_appointment .form_agree input:checked { border-color: var(--iro-point-dk); background: var(--iro-point); }
.iro_appointment .form_agree input:checked::after {
content: "";
display: block;
width: 9px;
height: 5px;
margin: 3px auto 0;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(-45deg);
}
.iro_appointment .app_form .iro_btn { width: 100%; height: 60px; letter-spacing: .18em; }
/* 오른쪽 칸 — 폼 아래 SNS 버튼(2026-09-28 요청). 폼과 같은 각진 흰 면·선 언어로 두 칸 나란히 */
.iro_appointment .app_side { display: grid; gap: 16px; align-content: start; }
.iro_appointment .app_sns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 2026-10-15: 버튼이 3개(카카오 지점 2 + 인스타)가 되어 인스타는 아랫줄 전체 폭으로 깐다 */
.iro_appointment .sns_btn.is_wide { grid-column: 1 / -1; }
.iro_appointment .sns_btn {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
border: 1px solid var(--iro-line);
background: var(--iro-paper);
color: var(--iro-ink);
text-decoration: none;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.iro_appointment .sns_btn svg { flex: 0 0 26px; width: 26px; height: 26px; }
.iro_appointment .sns_btn span { display: flex; flex-direction: column; gap: 3px; font-size: 15px; font-weight: 400; letter-spacing: -.02em; }
.iro_appointment .sns_btn small {
font-family: var(--iro-serif);
font-size: 10px;
font-weight: 600;
letter-spacing: .18em;
color: var(--iro-ink-3);
transition: color .25s ease;
}
/* 각 SNS 시그니처 색 배경(2026-09-28 요청) — 인스타그램: 브랜드 그라디언트 / 카카오: 옐로(#FEE500) + 검정 글자 */
.iro_appointment .sns_btn.is_insta {
border-color: transparent;
background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
color: #fff;
}
.iro_appointment .sns_btn.is_insta small { color: rgba(255,255,255,.85); }
.iro_appointment .sns_btn.is_kakao {
border-color: #fee500;
background: #fee500;
color: #191919;
}
.iro_appointment .sns_btn.is_kakao small { color: rgba(25,25,25,.6); }
/* hover — 색은 그대로 두고 살짝 어둡게 눌러 반응만 준다 */
.iro_appointment .sns_btn:hover { filter: brightness(.94); }
/* 지도 컬럼 — 카카오 지도 퍼가기는 640x360 고정으로 렌더된다.
생성된 요소의 인라인 크기를 덮어써 컬럼 폭에 맞춘다. */
.iro_appointment .map_frame { line-height: 0; }
.iro_appointment .root_daum_roughmap,
.iro_appointment .root_daum_roughmap .wrap_map,
.iro_appointment .root_daum_roughmap .map { width: 100% !important; }
.iro_appointment .root_daum_roughmap .wrap_map { height: 420px !important; }
/* 지도 가로 띠 — 지점 · 폼 두 칸 아래 전체 폭 */
.iro_appointment .app_mapwide { margin-top: clamp(48px, 5vw, 80px); border: 1px solid var(--iro-line); }
/* 지도 아래 딸려 나오는 줄은 감춰 지도만 남긴다(주소는 지도 아래에 따로 적었다).
.wrap_controllers = kakaomap 로고·길찾기 / .cont = 주소·전화 표 */
.iro_appointment .root_daum_roughmap .wrap_controllers,
.iro_appointment .root_daum_roughmap .cont { display: none !important; }
.iro_appointment .app_map .hero_link { display: inline-block; margin-top: 26px; }
/* 지도 터치 가드 — 손가락으로 페이지를 훑다가 지도에 닿으면 지도가 스크롤을 삼켜
페이지가 멈춘다. 터치 기기에서만 투명한 막을 덮어 두고, 탭하면 걷어 지도를 살린다.
페이지를 다시 스크롤하면 mainpage.js 가 is_active 를 지워 막이 돌아온다.
마우스 환경(PC)에서는 막 자체를 두지 않는다. */
.iro_appointment .map_frame { position: relative; }
.iro_appointment .map_guard { display: none; }
@media (hover: none) and (pointer: coarse) {
.iro_appointment .map_guard {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0 0 14px;
border: 0;
background: transparent;
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.iro_appointment .map_guard span {
padding: 9px 14px;
background: rgba(17,17,17,.78);
font-family: var(--iro-sans);
font-size: 12px;
font-weight: 400;
letter-spacing: .02em;
color: #fff;
}
.iro_appointment .map_frame.is_active .map_guard { display: none; }
}
/* --------------------------- 맨 위로(TOP) 버튼 --------------------------- */
/* 사이트 톤에 맞춘 각진 흑백 상자. 화면 오른쪽 아래에 고정, 히어로를 지나면 나타난다(mainpage.js).
hover 하면 슬라이드 화살표와 같은 언어로 검정 면이 차오른다. */
.iro_main .iro_top {
position: fixed;
right: clamp(16px, 2.4vw, 36px);
bottom: clamp(16px, 2.4vw, 36px);
z-index: 90;
width: 54px;
height: 54px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0;
border: 1px solid var(--iro-ink);
background: var(--iro-paper);
color: var(--iro-ink);
box-shadow: 0 10px 28px rgba(17,17,17,.12);
cursor: pointer;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(14px);
transition: opacity .35s ease, visibility .35s ease, transform .35s ease, color .3s ease;
}
.iro_main .iro_top.is_show { opacity: 1; visibility: visible; transform: none; }
.iro_main .iro_top::before {
content: "";
position: absolute;
inset: 0;
background: var(--iro-ink);
transform: scaleY(0);
transform-origin: center bottom;
transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.iro_main .iro_top:hover { color: #fff; }
.iro_main .iro_top:hover::before { transform: scaleY(1); }
.iro_main .iro_top .top_arrow {
position: relative;
z-index: 1;
width: 9px;
height: 9px;
border-left: 1px solid currentColor;
border-top: 1px solid currentColor;
transform: translateY(2px) rotate(45deg);
transition: transform .3s ease;
}
.iro_main .iro_top:hover .top_arrow { transform: translateY(-1px) rotate(45deg); }
.iro_main .iro_top .top_txt {
position: relative;
z-index: 1;
font-family: var(--iro-serif);
font-size: 9px;
font-weight: 600;
letter-spacing: .2em;
line-height: 1;
}
/* --------------------------- 마우스 인터랙션 --------------------------- */
/* 손이 닿는 곳마다 반응이 오도록 얹는다. 움직임은 작고 느리게 — 과하면 싸구려로 보인다. */
/* Essay — 상자가 없으므로 떠오르는 움직임은 두지 않는다(위 선 색 변화만, 02 블록 참조) */
/* Solution — 마우스를 올린 면이 가로로 조금 넓어진다.
grid 의 fr 값을 바꿔 세 면이 서로 밀고 당기듯 움직인다. */
.iro_solution .cmp { transition: grid-template-columns .45s cubic-bezier(.22,.61,.36,1); }
.iro_solution .cmp:has(.cmp_col:nth-child(1):hover) { grid-template-columns: 1.12fr 0.94fr 0.94fr; }
.iro_solution .cmp:has(.cmp_col:nth-child(2):hover) { grid-template-columns: 0.94fr 1.12fr 0.94fr; }
.iro_solution .cmp:has(.cmp_col:nth-child(3):hover) { grid-template-columns: 0.94fr 0.94fr 1.12fr; }
/* Solution — 흑/백 맞바꾸기. 검정 면(Cover-up)만 강조돼 있어 흰 면은 반응이 없어 보였다.
흰 면(Removal · Sticker)에 마우스를 올리면 그쪽이 검정이 되고 Cover-up 은 흰 면으로 물러난다 —
어느 쪽을 보든 "지금 보는 면" 하나만 검정으로 서고, 손을 떼면 원래(Cover-up 검정)로 돌아온다.
색은 전부 --c-* 변수를 읽으므로 여기서 변수만 뒤집는다. :has 미지원 브라우저는 폭 변화와 함께 이 효과도 빠질 뿐이다.
※ 3열이 되면서 nth-child(1) 고정이 아니라 :not(.is_ours) 로 일반화했다 — 어느 흰 면이든 같은 규칙. */
.iro_solution .cmp_col { transition: background .45s ease, color .45s ease, border-color .45s ease; }
.iro_solution .cmp_col .cmp_sub,
.iro_solution .cmp_col .cmp_note { transition: color .45s ease, border-color .45s ease; }
.iro_solution .cmp_col .cmp_list { transition: border-color .45s ease; }
.iro_solution .cmp .cmp_col:not(.is_ours):hover {
--c-bg: var(--iro-ink);
--c-fg: #fff;
--c-sub: #9a9a9e;
--c-li: #c9c9ce;
--c-note: #9a9a9e;
--c-line: #3a3a3a;
border-left-color: var(--iro-ink);
}
.iro_solution .cmp:has(.cmp_col:not(.is_ours):hover) .cmp_col.is_ours {
--c-bg: var(--iro-paper);
--c-fg: var(--iro-ink);
--c-sub: var(--iro-ink-3);
--c-li: var(--iro-ink-2);
--c-note: var(--iro-ink-3);
--c-line: var(--iro-line);
}
/* Solution — 항목에 마우스를 올리면 글이 진해지고 살짝 밀려난다(면 색과 무관하게 그 면의 본색 --c-fg 로) */
.iro_solution .cmp_list li { transition: color .25s ease, transform .3s ease; }
.iro_solution .cmp_list li:hover { color: var(--c-fg); transform: translateX(6px); }
/* Catalogue — 제목이 포인트색으로, 아래 구분선도 함께 물든다 */
.iro_catalogue .cat_body h3 { transition: color .25s ease; }
.iro_catalogue .cat_meta { transition: border-color .3s ease, color .25s ease; }
.iro_catalogue .cat_card:hover .cat_body h3 { color: var(--iro-point-ink); }
.iro_catalogue .cat_card:hover .cat_meta { border-top-color: var(--iro-point); color: var(--iro-ink-2); }
/* Before/After 핸들 — 잡을 수 있다는 걸 알린다. 제자리에서 살짝만 커진다.
※ 손잡이는 음수 margin 으로 가운데를 잡고 있으므로 translate(-50%,-50%) 를 얹으면 안 된다 —
그러면 hover 순간 왼쪽 위로 튄다(실제 발생). scale 만 쓴다. */
.iro_main .ba_knob { transition: transform .25s ease, box-shadow .25s ease; }
.iro_main .ba:hover .ba_knob { transform: scale(1.12); box-shadow: 0 4px 20px rgba(0,0,0,.28); }
/* Reviews — 사진이 아주 느리게 확대되고 위쪽 선이 포인트색으로 */
.iro_reviews .rev_card { transition: border-top-color .3s ease; }
.iro_reviews .rev_photo img { transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.iro_reviews .rev_card:hover { border-top-color: var(--iro-point-ink); }
.iro_reviews .rev_card:hover .rev_photo img { transform: scale(1.06); }
/* Backstage — 번호가 흰색으로 떠오르고, 선·화살촉이 함께 밝아진다(07 블록의 ::before/::after 규칙).
면 배경을 밝히는 효과는 뺐다 — 칸 테두리가 없어져 면의 경계가 드러나면 어색하다. */
.iro_backstage .step_no { transition: color .3s ease; }
.iro_backstage .step_item:hover .step_no { color: #fff; }
/* Q&A — 질문 줄 전체가 반응한다 */
.iro_qa .qa_q .q_txt { transition: color .22s ease; }
.iro_qa .qa_q:hover .q_txt { color: var(--iro-point-ink); }
.iro_qa .qa_q .q_ico::before,
.iro_qa .qa_q .q_ico::after { transition: transform .25s ease, background .22s ease; }
.iro_qa .qa_q:hover .q_ico::before,
.iro_qa .qa_q:hover .q_ico::after { background: var(--iro-point-ink); }
/* 손가락 커서 — 누를 수 있는 것과 끌 수 있는 것을 구분한다 */
.iro_catalogue .cat_card { cursor: default; }
.iro_main .ba { cursor: ew-resize; }
@media (hover: none) {
/* 터치 기기에서는 hover 가 눌린 채 남으므로 움직임을 끈다 */
.iro_solution .cmp_list li:hover { transform: none; }
.iro_reviews .rev_card:hover .rev_photo img { transform: none; }
/* 터치에서는 흑/백 맞바꾸기를 하지 않는다 — 탭한 채 hover 가 남아 Cover-up 이 흰 면으로 굳는다 */
.iro_solution .cmp .cmp_col:not(.is_ours):hover {
--c-bg: var(--iro-paper);
--c-fg: var(--iro-ink);
--c-sub: var(--iro-ink-3);
--c-li: var(--iro-ink-2);
--c-note: var(--iro-ink-3);
--c-line: var(--iro-line);
border-left-color: var(--iro-line);
}
.iro_solution .cmp:has(.cmp_col:not(.is_ours):hover) .cmp_col.is_ours {
--c-bg: var(--iro-ink);
--c-fg: #fff;
--c-sub: #9a9a9e;
--c-li: #c9c9ce;
--c-note: #9a9a9e;
--c-line: #3a3a3a;
}
}
/* ---------------------------- 반응형 정리 ---------------------------- */
@media (max-width: 1024px) {
.iro_sec { padding: 72px 0; }
.iro_head { margin-bottom: 40px; } /* 좌우 여백은 .iro_inner 의 clamp 가 처리한다 */
.iro_lead { margin-top: 16px; line-height: 1.75; }
.iro_essay .essay_cards,
.iro_catalogue .cat_grid { grid-template-columns: 1fr; gap: 28px; }
.iro_catalogue .cat_body .br_tab { display: inline; }
/* 좁은 화면에서는 최소 높이를 풀어 글 분량만큼만 차지하게 둔다 */
.iro_essay .essay_card { min-height: 0; }
/* 좁은 화면에서는 제목을 위로 올리고 카드도 세로로 편다 */
.iro_reviews .rev_layout { grid-template-columns: 1fr; gap: 44px; }
.iro_reviews .iro_head { position: static; }
/* 좁은 화면에서는 장식 인용부호를 줄인다 */
.iro_reviews::after { font-size: 200px; }
.iro_reviews .rev_card { grid-template-columns: 1fr; row-gap: 22px; }
.iro_reviews .rev_nav { justify-content: center; margin-top: 24px; }
/* 사진을 4:3 대신 16:10 으로 눕혀 카드 한 장의 키를 줄인다(내용은 그대로) */
.iro_reviews .rev_photo { aspect-ratio: 16 / 10; height: auto; align-self: start; }
.iro_reviews .rev_cards { gap: 24px; }
.iro_essay .essay_card { padding: 28px 0 0; }
.iro_essay .essay_card::before { font-size: 44px; }
/* 세로로 쌓이면 폭 변화 hover 도 의미가 없으므로 1열로 고정한다(:has 규칙보다 뒤에 있어 이긴다) */
/* ※ :nth-child(n) 은 위 hover 규칙과 특이도를 맞추기 위한 것 — 빼면 폭 변화 규칙이 이긴다 */
.iro_solution .cmp,
.iro_solution .cmp:has(.cmp_col:nth-child(n):hover) { grid-template-columns: 1fr; }
.iro_solution .cmp_col { padding: 34px 22px; }
/* 세로 쌓임에서는 좌측 선 대신 위쪽 선으로 흰 면끼리 나눈다 */
.iro_solution .cmp_col + .cmp_col:not(.is_ours) { border-left: 0; border-top: 1px solid var(--iro-line); }
.iro_lookbook .look_cols { grid-template-columns: 1fr; gap: 40px; }
/* 좁은 화면 — 2열 카드 그리드(한 줄에 2개 × 2줄, 2026-09-28 요청).
카드마다 [사진 → 번호 | 라벨·제목 → 설명] 순으로 세로로 쌓는다.
가로 행 전제의 타임라인 세로선 · 노드 · 행 구분선은 숨긴다. */
/* 위 섹션 축소 규칙(.iro_sec.iro_backstage)이 공통 반응형 여백보다 특이도가 높아 여기서 다시 맞춘다 */
.iro_sec.iro_backstage { padding: 72px 0; }
.iro_backstage .iro_head { margin-bottom: 40px; }
.iro_backstage .step_list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 36px 20px;
padding-left: 0;
}
.iro_backstage .step_list::before,
.iro_backstage .step_item::before { display: none; }
.iro_backstage .step_item {
grid-template-columns: auto 1fr;
grid-template-areas:
"photo photo"
"no en"
"no h3"
"desc desc";
grid-template-rows: auto;
column-gap: 12px;
align-items: start;
align-content: start;
padding: 0;
border: 0;
}
.iro_backstage .step_item:last-child { border-bottom: 0; }
.iro_backstage .step_photo { max-width: none; margin: 0 0 16px; }
.iro_backstage .step_no { font-size: 40px; align-self: center; }
.iro_backstage .step_en { margin: 0 0 4px; align-self: end; }
.iro_backstage .step_item h3 { align-self: start; }
.iro_backstage .step_item p { margin-top: 12px; max-width: none; }
.iro_backstage .step_badge { margin-bottom: 8px; }
.iro_backstage .step_time { flex-direction: row; align-items: baseline; gap: 12px; margin-top: 16px; min-width: 0; }
.iro_backstage .step_time strong { font-size: 22px; }
/* 세로로 쌓이면 폼을 먼저 — 히어로 CTA 가 이 섹션으로 오므로 폼이 바로 보여야 한다.
지도가 위에 오면 손가락이 지도부터 닿아 스크롤이 걸리는 문제도 함께 피한다. */
.iro_appointment .app_cols { grid-template-columns: 1fr; gap: 32px; }
/* 폼이 .app_side 안으로 들어갔으므로 순서 당김은 .app_side 에 준다 */
.iro_appointment .app_side { order: -1; }
.iro_appointment .app_form { padding: 26px 20px; }
.iro_appointment .root_daum_roughmap .wrap_map { height: 300px !important; }
.iro_main .iro_top { width: 46px; height: 46px; gap: 5px; }
}
/* ── 모바일(≤560) : 스크롤 길이를 줄이는 데 초점을 둔다 ──────────────
내용을 덜어내지 않고 여백 · 행간 · 사진 비율만 좁혀 같은 정보를 더 짧은
스크롤 안에 넣는다. 손가락으로 짚는 대상(입력칸 · 버튼 · 링크)의 높이는
건드리지 않는다 — 여기서 줄이면 누르기 어려워진다. */
@media (max-width: 560px) {
.iro_sec { padding: 52px 0; }
.iro_head { margin-bottom: 28px; }
/* 영문 카피는 좌우 여백 안쪽을 꽉 채우는 크기로 — vw 로 두면 화면 폭이
달라져도 한 줄을 유지한 채 같은 비율로 꽉 찬다(390px 기준 약 43px). */
/* 한 줄에 다 안 들어가므로 쉼표 뒤(em)에서 줄을 바꿔 "Hide less, / Remember more." 로 끊는다 */
.iro_hero .hero_en { font-size: 11vw; letter-spacing: -.04em; }
.iro_hero .hero_en em { display: block; }
.iro_eyebrow { margin-bottom: 12px; font-size: clamp(30px, 8.6vw, 40px); }
.iro_tit { line-height: 1.45; }
.iro_lead { margin-top: 14px; line-height: 1.7; }
/* 카드형 블록 — 카드 사이 간격과 안쪽 여백을 함께 좁힌다 */
.iro_essay .essay_cards,
.iro_catalogue .cat_grid { gap: 18px; }
.iro_essay .essay_card { padding: 22px 0 0; }
.iro_essay .essay_no { margin-bottom: 18px; }
.iro_essay .essay_quote { margin-top: 18px; line-height: 1.6; }
.iro_solution .cmp_col { padding: 28px 18px; }
/* 비교 항목이 두 줄로 접히는 걸 줄인다 — 왼쪽 들여쓰기와 글자를 좁혀
같은 폭에 몇 글자라도 더 들어가게 한다. */
.iro_solution .cmp_list { padding-left: 14px; }
.iro_solution .cmp_list li { font-size: 15px; line-height: 1.55; letter-spacing: -.035em; }
.iro_solution .cmp_list li + li { margin-top: 14px; }
.iro_solution .cmp_note { margin-top: 22px; padding-top: 18px; line-height: 1.65; }
.iro_solution .sol_foot { margin-top: 22px; }
.iro_reviews .rev_cards { gap: 18px; }
/* 2열 카드 구조는 1024 블록 그대로, 칸이 좁아진 만큼 간격과 글자를 한 단계 줄인다 */
.iro_sec.iro_backstage { padding: 52px 0; }
.iro_backstage .iro_head { margin-bottom: 28px; }
.iro_backstage .step_list { gap: 28px 12px; }
.iro_backstage .step_item { column-gap: 8px; }
.iro_backstage .step_photo { margin-bottom: 12px; }
.iro_backstage .step_photo::after { font-size: 9px; letter-spacing: .12em; }
.iro_backstage .step_no { font-size: 28px; }
.iro_backstage .step_en { margin: 0 0 2px; font-size: 9px; letter-spacing: .12em; }
.iro_backstage .step_item h3 { font-size: 16px; }
.iro_backstage .step_item p { margin-top: 10px; font-size: 13px; line-height: 1.6; letter-spacing: -.03em; }
.iro_backstage .step_badge { padding: 3px 7px; font-size: 11px; }
.iro_backstage .step_time { margin-top: 12px; }
.iro_backstage .step_time small { font-size: 12px; }
.iro_backstage .step_time strong { font-size: 20px; }
/* 슬라이드 컨트롤 — 손가락으로 누르기 좋게 크기는 두고 간격만 좁힌다 */
.iro_catalogue .cat_nav { justify-content: center; gap: 14px; }
.iro_catalogue .cat_arrow { width: 46px; height: 46px; }
/* ── 후기 : 슬라이드를 접고 세로 목록으로 편다(mainpage.js 의 is_list) ──
사진을 왼쪽 정사각 썸네일로 줄이고 글을 오른쪽에 붙여 한 건을 한 줄에 담는다.
카드 한 장이 화면 절반을 차지하던 것이 훨씬 짧아지고, 여러 건을 훑기도 쉽다. */
.iro_reviews .rev_slider.is_list .rev_viewport { height: auto !important; overflow: visible; }
.iro_reviews .rev_slider.is_list .rev_track { transform: none !important; display: grid; gap: 14px; }
.iro_reviews .rev_slider.is_list .rev_nav { display: none; }
.iro_reviews .rev_slider.is_list .rev_card {
grid-template-columns: 92px 1fr;
column-gap: 14px;
row-gap: 0;
align-items: start;
padding-bottom: 14px;
border-bottom: 1px solid var(--iro-line);
}
.iro_reviews .rev_slider.is_list .rev_card:last-child { border-bottom: 0; padding-bottom: 0; }
.iro_reviews .rev_slider.is_list .rev_photo { aspect-ratio: 1 / 1; }
.iro_reviews .rev_slider.is_list .rev_body p { font-size: 15px; line-height: 1.6; }
.iro_reviews .rev_slider.is_list .rev_user { margin-top: 12px; padding-top: 10px; }
.iro_reviews .rev_slider.is_list .rev_avatar { width: 28px; height: 28px; }
.iro_appointment .form_row { grid-template-columns: 1fr; gap: 0; }
/* 좁은 화면에서는 라벨을 옆에 세울 자리가 없어 다시 위아래로 쌓는다 */
.iro_appointment .app_contact > div { grid-template-columns: 1fr; gap: 8px; }
/* 지점 행 — 지도 링크를 주소 아래로 내린다 */
.iro_appointment .branch_item { grid-template-columns: 36px 1fr; column-gap: 12px; padding: 16px 0; }
.iro_appointment .branch_map { grid-column: 2; justify-self: start; margin-top: 10px; }
.iro_appointment .app_form { padding: 22px 16px; }
.iro_appointment .app_sns { gap: 10px; }
.iro_appointment .sns_btn { gap: 10px; padding: 16px 14px; }
.iro_appointment .sns_btn svg { flex-basis: 22px; width: 22px; height: 22px; }
.iro_appointment .sns_btn span { font-size: 14px; }
.iro_appointment .sns_btn small { font-size: 9px; letter-spacing: .12em; }
.iro_appointment .root_daum_roughmap .wrap_map { height: 260px !important; }
.iro_lookbook .look_thumbs { grid-template-columns: repeat(2, 1fr); }
.iro_hero .hero_cta { width: 100%; }
.iro_main .iro_top { right: 14px; bottom: 14px; }
}