:root{
  --bg:#f4f7fb; --panel:#ffffff; --ink:#1f2b3a; --muted:#7b8aa0;
  --brand:#00b4a0; --brand-d:#009683; --accent:#ff6b6b;
  --line:#e6ecf3; --shadow:0 8px 30px rgba(30,60,90,.08);
  --radius:16px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
}
/* 언어별 글꼴 — 한글 글꼴에도 가나가 들어 있어서, 일본어를 그대로 두면
   가나는 한글 글꼴이 그리고 한자만 다른 글꼴로 대체되어 획 두께가 들쭉날쭉해진다.
   문자권마다 그 언어 글꼴을 앞에 세워 한 벌로 그려지게 한다.
   본문 대부분이 font-family:inherit 를 쓰고, 캔버스도 certBaseFont() 로 이 값을 읽는다. */
html[lang="ja"] body{
  font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic UI','Yu Gothic',
    'Meiryo','Noto Sans JP','MS PGothic',system-ui,sans-serif;
}
html[lang="zh"] body{
  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',
    'Source Han Sans SC','SimHei',system-ui,sans-serif;
}
/* 일본어·중국어 글꼴은 굵기가 보통 Regular·Bold 두 벌뿐이라 800 을 주면
   브라우저가 억지로 굵히면서(가짜 볼드) 획이 뭉개진다. 700 으로 낮춘다. */
html[lang="ja"] .hero-title, html[lang="zh"] .hero-title,
html[lang="ja"] .lp-title, html[lang="zh"] .lp-title{font-weight:700;}
a{color:var(--brand-d);}
.muted{color:var(--muted);}

/* 헤더 */
header{
  background:linear-gradient(120deg,#00b4a0,#0093c4);
  color:#fff; padding:20px 24px; box-shadow:var(--shadow);
  /* 스크롤해도 맨 위에 붙어 있다. 모달(1000)·문의 버튼(1200)보다는 아래 */
  position:sticky; top:0; z-index:900; transition:padding .2s ease;
}
/* 내려가면 얇게 — 고정된 헤더가 화면을 너무 가리지 않게(app.js stickyHeader) */
header.compact{padding-top:9px; padding-bottom:9px;}
header.compact .brand .tag{display:none;}
header.compact .logo{width:40px; height:40px; border-radius:12px;}
header .logo{transition:width .2s ease, height .2s ease;}
/* 헤더 밑으로 숨지 않도록 — 앵커·scrollIntoView 가 멈추는 위치를 헤더 높이만큼 내린다 */
html{scroll-padding-top:calc(var(--hdr-h, 80px) + 8px);}
.brand{display:flex; align-items:center; gap:12px; max-width:1200px; margin:0 auto;}
.logo{width:50px;height:50px;flex:0 0 auto; cursor:pointer;
  background:#fff; border-radius:14px; padding:4px; box-sizing:border-box;
  box-shadow:0 3px 10px rgba(0,0,0,.18);}
.logo svg, .hero-mascot svg{width:100%; height:100%; display:block;}
/* 여우는 세로가 길어 칸에 꽉 채우면 찌그러진다 — contain 으로 비율을 지킨다 */
.logo img, .hero-mascot img, .sup-mascot img{width:100%; height:100%; object-fit:contain; display:block;}
.home-link{cursor:pointer;}
.brand h1, .brand-name{font-size:22px; margin:0; font-weight:800; letter-spacing:-.5px; line-height:1.1;}
.brand-latin{font-weight:400; opacity:.82; font-size:16px;}
.brand .tag{font-size:13px; opacity:.9; margin:0;}
.brand .spacer{flex:1;}
.brand .soon{background:rgba(255,255,255,.18); padding:6px 12px; border-radius:20px; font-size:12px;}
/* 계정·크레딧 칩 */
.acct-chip{display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.18);
  color:#fff; border:1.5px solid rgba(255,255,255,.42); border-radius:20px; padding:6px 13px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; transition:.15s;}
.acct-chip:hover{background:#fff; color:var(--brand-d); border-color:#fff;}
.acct-chip.on{background:#fff; color:var(--brand-d); border-color:#fff;}
.acct-chip b{font-size:14px;}
.ac-box{max-width:390px; text-align:center;}
.ac-big{font-size:40px; margin-bottom:8px;}
.ac-lead{font-size:16px; font-weight:800; color:var(--ink); margin:6px 0 6px;}
.ac-sub{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 16px; word-break:break-all;}
.ac-form{display:flex; flex-direction:column; gap:9px;}
.ac-form input{width:100%; box-sizing:border-box; font-family:inherit; font-size:14px;
  border:1.5px solid var(--line); border-radius:11px; padding:11px 13px; color:var(--ink);}
.ac-form input:focus{outline:none; border-color:var(--brand);}
.ac-err{font-size:12.5px; color:#e5484d; margin:2px 0 0; min-height:16px;}
.ac-log-h{margin:14px 0 6px; font-weight:700;}
.ac-log{text-align:left; border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-bottom:14px;}
.ac-log-row{display:flex; justify-content:space-between; padding:7px 12px; font-size:12.5px;
  border-bottom:1px solid var(--line);}
.ac-log-row:last-child{border-bottom:0;}
.ac-log-k{color:var(--muted);}
.ac-log-n{font-weight:800; color:var(--ink);}
.ac-log-n.plus{color:var(--brand-d);}
/* 크레딧 묶음 */
.ac-packs{display:grid; gap:9px; margin-bottom:14px;}
.ac-pack{position:relative; display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:2px 10px; border:1.5px solid var(--line); border-radius:13px; padding:13px 15px;
  text-decoration:none; color:inherit; transition:.15s;}
a.ac-pack:hover{border-color:var(--brand); background:#f5fbfa; transform:translateY(-2px);}
.ac-pack.best{border-color:var(--brand);}
.ac-pack-tag{position:absolute; top:-9px; left:14px; background:var(--brand); color:#fff;
  font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:10px;}
.ac-pack-c{font-size:15px; font-weight:800; color:var(--ink); text-align:left;}
.ac-pack-p{grid-row:1 / span 2; font-size:21px; font-weight:800; color:var(--brand-d);}
.ac-pack-u{font-size:11.5px; color:var(--muted); text-align:left;}
.ac-soon{background:#fff7e6; border:1px solid #f0dcae; border-radius:10px; padding:9px 11px;
  font-size:12px; color:#7a5c1e; margin-bottom:12px;}

.lang-sel{background:rgba(255,255,255,.92); color:var(--ink); border:none; border-radius:20px;
  padding:6px 10px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; margin-left:10px;}

/* 좁은 화면에서 헤더 한 줄이 넘치지 않도록 2행으로 접는다 */
@media(max-width:560px){
  header{padding:14px 16px;}
  /* 1행: 로고·이름·언어  /  2행: 비즈니스·무저장 배지 */
  .brand{flex-wrap:wrap; gap:8px 10px;}
  .logo{order:1;} .home-link{order:2; min-width:0;} .lang-sel{order:3;}
  .brand .spacer{order:4; flex:1 0 100%; height:0; margin:0;}   /* 강제 줄바꿈 */
  .nav-biz{order:5; flex:0 0 auto;} .brand .soon{order:6;}
  .logo{width:40px; height:40px; border-radius:11px;}
  .brand h1, .brand-name{font-size:18px;}
  .brand .tag{display:none;}   /* 바로 아래 히어로 문구와 중복 — 모바일에선 헤더를 낮춘다 */
  .brand .soon{font-size:11px; padding:5px 10px;}
  .nav-biz{font-size:12px; padding:5px 10px;}
  .lang-sel{margin-left:auto; padding:5px 8px; font-size:12px; max-width:38vw;}
  /* flex-basis:0 이라야 배지가 통째로 줄바꿈되지 않고 남은 폭 안에서 접힌다(언어 무관 2행 유지).
     문구를 자르면 무저장 약속이 안 읽히므로 잘라내지 않고 배지 안에서 두 줄로 흘린다. */
  .brand .soon{flex:1 1 0; min-width:0; line-height:1.35; border-radius:14px;}
  /* 내려가면 한 줄로 — 무저장 배지는 첫 화면에서 이미 읽었으니 숨기고, 비즈니스 버튼을 첫 줄로 올린다 */
  header.compact{padding-top:7px; padding-bottom:7px;}
  header.compact .logo{width:34px; height:34px; border-radius:10px;}
  header.compact .brand{flex-wrap:nowrap;}
  header.compact .brand .spacer, header.compact .brand .soon, header.compact .brand-latin{display:none;}
  header.compact .home-link{flex:1 1 auto; min-width:0;}
  header.compact .brand-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  /* 한 줄에 다 넣으려면 비즈니스 버튼은 아이콘만 */
  header.compact .nav-biz [data-i18n]{display:none;}
  header.compact .nav-biz{padding:5px 9px;}
  header.compact .nav-biz{order:3;} header.compact .lang-sel{order:4; margin-left:0;}
}

/* SVG 국기 */
.flg{width:24px; height:16px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); display:block;}
.country .flag{line-height:0;}
.flag-sm .flg{display:inline-block; width:20px; height:13px; vertical-align:-2px;}

/* 랜딩(히어로) */
#landing{background:radial-gradient(1200px 500px at 50% -10%, #e9fbf8, var(--bg));}
.hero{max-width:900px; margin:0 auto; padding:44px 24px 60px; text-align:center;}
/* 여우 전신 비율(260:354)에 맞춘 칸 — contain 으로 남던 좌우 여백을 없앤다 */
.hero-mascot{width:110px; height:150px; margin:0 auto 14px; animation:bob 3s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-title{font-size:30px; font-weight:800; letter-spacing:-.5px; margin:0 0 12px; color:var(--ink); line-height:1.25;}
.hero-sub{font-size:15.5px; color:var(--muted); max-width:620px; margin:0 auto 28px; line-height:1.6;}
/* 서비스별 소개 문구 순환. 실제 높이는 heroSizeLock() 이 다섯 장면을 재서 잠그고,
   아래 두 줄은 그 전(스크립트 실행 직전)까지 버티는 최소값이다. */
.hero-title{min-height:calc(30px * 1.25 * 2);}
.hero-sub{min-height:calc(15.5px * 1.6 * 2);}
.hero-title, .hero-sub{transition:opacity .32s ease, transform .32s ease;}
.hero-title.hero-out, .hero-sub.hero-out{opacity:0; transform:translateY(-8px);}
/* 낱자 애니메이션 — 단어(.hw)는 통째로 묶어 줄바꿈이 단어 중간에서 일어나지 않게 한다 */
.hero-title .hw, .hero-sub .hw{display:inline-block; white-space:nowrap;}
.hero-title .hc, .hero-sub .hc{display:inline-block;}
.hero-title{perspective:600px;}
/* 줄 길이를 고르게 — 안 그러면 마지막 줄에 한 글자만 남아(중국어·일본어) 밑줄이 토막난다 */
.hero-title, .hero-sub{text-wrap:balance;}
/* 제목 밑줄 — 마지막 줄 폭에 맞춰 자바스크립트가 위치와 경로를 정한다 */
.hero{position:relative;}
.hero-uline{position:absolute; left:0; top:0; width:0; height:0; overflow:visible;
  pointer-events:none; opacity:0;}
.hero-uline path{fill:none; stroke:var(--brand); stroke-width:4.5; stroke-linecap:round; opacity:.5;}
@media(prefers-reduced-motion:reduce){ .hero-title, .hero-sub{transition:none;} }
.compares{display:flex; align-items:flex-start; justify-content:center; gap:16px 30px; flex-wrap:wrap; margin:0 auto 30px;}
.compare{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:0;}
.cmp-item{margin:0; display:flex; flex-direction:column; align-items:center; gap:8px;}
.cmp-item img{width:150px; height:186px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); background:#fff;}
.cmp-item figcaption{font-size:13px; font-weight:700; color:var(--muted);}
.cmp-item .cap-after{color:var(--brand-d);}
.cmp-arrow{font-size:30px; color:var(--brand); font-weight:800; display:flex; flex-direction:column; align-items:center; gap:4px;}
.cmp-badge{font-size:11px; font-weight:800; color:#fff; background:linear-gradient(120deg,#7c5cff,#b06bff); border-radius:20px; padding:3px 10px;}
.start-btn{border:none; border-radius:14px; padding:15px 40px; font-size:17px; font-weight:800; cursor:pointer;
  font-family:inherit; color:#fff; background:linear-gradient(120deg,#00b4a0,#0093c4);
  box-shadow:0 10px 26px rgba(0,150,180,.35); transition:.15s;}
.start-btn:hover{transform:translateY(-2px); filter:brightness(1.05);}
.hero-trust{font-size:12.5px; color:var(--muted); margin:16px 0 0;}

/* 랜딩 홍보 섹션 */
.lp{max-width:900px; margin:0 auto; padding:10px 24px 20px; text-align:center;}
.lp-title{font-size:22px; font-weight:800; color:var(--ink); margin:44px 0 22px; letter-spacing:-.3px;}
.how-steps{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;}
.how-step{background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:18px 16px; width:200px; display:flex; flex-direction:column; align-items:center; gap:8px;}
.how-ic{font-size:30px;}
.how-step p{margin:0; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4;}
.how-arrow{font-size:24px; color:var(--brand); font-weight:800;}
.ben-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; text-align:left;}
.ben-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:18px 18px 16px;}
.ben-ic{font-size:26px; display:block; margin-bottom:8px;}
.ben-card h4{font-size:15.5px; font-weight:800; color:var(--ink); margin:0 0 6px;}
.ben-card p{font-size:13px; color:var(--muted); margin:0; line-height:1.55;}
/* 가격 비교 */
.cmp{max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.cmp-row{display:flex; align-items:center; gap:12px;}
.cmp-name{width:96px; flex:0 0 auto; text-align:right; font-size:13px; font-weight:700; color:var(--ink);}
.cmp-track{flex:1; display:flex; align-items:center; gap:8px; background:#eef2f7; border-radius:10px;}
.cmp-bar{display:flex; align-items:center; padding:9px 12px; border-radius:10px; color:#fff; font-weight:800; font-size:14px; letter-spacing:1px; white-space:nowrap;}
.cmp-bar.studio{background:#c05b6a;}
.cmp-bar.booth{background:#e0a33a;}
.cmp-bar.pm{background:linear-gradient(120deg,#00b4a0,#0093c4);}
.cmp-best{font-size:11px; font-weight:800; color:var(--brand-d); background:#e9fbf8; border-radius:20px; padding:3px 10px;}
.cmp-sub{font-size:13px; color:var(--brand-d); font-weight:700; margin:16px 0 0;}
.lp-free{font-size:13px; color:var(--muted); margin:34px 0 16px;}

/* 일본 시험별 사이즈 표 (일본어일 때만) */
.jp-faq{max-width:900px; margin:8px auto 40px; padding:0 24px;}
.jp-faq-title{font-size:18px; font-weight:800; color:var(--ink); text-align:center; margin:24px 0 6px;}
.jp-faq-note{font-size:12px; color:var(--muted); text-align:center; margin:0 0 18px;}
.jp-faq-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;}
.jp-size-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); text-align:left;}
.jp-size{font-size:19px; font-weight:800; color:var(--brand-d); margin-bottom:8px;}
.jp-size span{font-size:12px; font-weight:700; color:var(--muted); margin-left:2px;}
.jp-size-card ul{margin:0; padding-left:16px;}
.jp-size-card li{font-size:12.5px; color:var(--ink); line-height:1.7;}

/* 레이아웃 */
main{max-width:1200px; margin:0 auto; padding:24px; display:grid;
  grid-template-columns:270px 1fr 300px; gap:20px; align-items:start;}
.panel{background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.panel h2{font-size:14px; margin:0 0 12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.panel-head h2{margin:0;}
.unit-toggle{display:inline-flex; border:1.5px solid var(--line); border-radius:8px; overflow:hidden;}
.unit-toggle button{border:none; background:#fff; padding:4px 9px; font-size:12px; font-weight:800;
  cursor:pointer; font-family:inherit; color:var(--muted);}
.unit-toggle button.active{background:var(--brand); color:#fff;}

/* 국가 목록 (많아지면 스크롤) */
#countryList{display:grid; grid-template-columns:1fr 1fr; gap:8px;
  max-height:410px; overflow-y:auto; padding-right:4px;}
#countryList::-webkit-scrollbar{width:7px;}
#countryList::-webkit-scrollbar-thumb{background:#c9d6e2; border-radius:4px;}
#countryList::-webkit-scrollbar-track{background:transparent;}
.country{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:10px 6px; border:2px solid var(--line); border-radius:12px;
  background:#fff; cursor:pointer; transition:.15s; font-family:inherit;
}
.country:hover{border-color:var(--brand); transform:translateY(-1px);}
.country.active{border-color:var(--brand); background:#e9fbf8;}
.country .flag{font-size:22px;}
.country .cname{font-size:13px; font-weight:700;}
.country .csize{font-size:11px; color:var(--muted);}

/* 에디터 가운데 */
.editor-wrap{display:flex; flex-direction:column; align-items:center; gap:16px;}
#dropZone{
  width:100%; border:2px dashed #b9c6d8; border-radius:var(--radius);
  padding:28px; text-align:center; color:var(--muted); cursor:pointer;
  transition:.15s; background:#fbfdff;
}
#dropZone.over{border-color:var(--brand); background:#e9fbf8; color:var(--brand-d);}
#dropZone.compact{padding:12px; font-size:13px;}
#dropZone .big{font-size:40px; margin-bottom:6px;}
#dropZone strong{color:var(--ink);}

/* 업로드/카메라 좌우 반반 */
.upload-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%;}
.upload-row #dropZone{min-width:0; width:auto; display:flex; flex-direction:column; justify-content:center;}
.cam-tile{min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:2px dashed #b9c6d8; border-radius:var(--radius); padding:28px 16px; text-align:center;
  color:var(--muted); cursor:pointer; background:#fbfdff; transition:.15s;}
.cam-tile:hover{border-color:var(--brand); background:#e9fbf8; color:var(--brand-d);}
.cam-tile .big{font-size:40px; margin-bottom:6px;}
.cam-tile-title{font-weight:800; color:var(--ink); font-size:15px;}
.up-sub{font-size:12px; margin-top:4px;}
.cam-tile.compact{padding:12px;}
.cam-tile.compact .big, #dropZone.compact .big{font-size:24px; margin-bottom:2px;}
.cam-tile.compact .up-sub, #dropZone.compact .up-sub{display:none;}
@media(max-width:560px){ .upload-row{flex-direction:column;} }

.btn-cam{width:100%; background:#eef4f9; color:var(--ink); border:none; border-radius:12px; padding:11px;
  font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; margin-top:8px; transition:.15s;}
.btn-cam:hover{background:#e0eaf2;}

/* 웹캠 촬영 모달 */
.cam-modal{position:fixed; inset:0; z-index:1000; background:rgba(10,20,30,.82);
  display:flex; align-items:center; justify-content:center; padding:20px;}
.cam-inner{background:var(--panel); border-radius:18px; padding:16px; max-width:440px; width:100%; text-align:center; box-shadow:var(--shadow);}
.cam-stage{position:relative; width:100%; aspect-ratio:3/4; background:#000; border-radius:12px; overflow:hidden;}
#camVideo{width:100%; height:100%; object-fit:cover; transform:scaleX(-1);}
.cam-guide{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 40% 46% at 50% 44%, transparent 60%, rgba(0,180,160,.10) 61%);}
.cam-guide::after{content:""; position:absolute; left:50%; top:44%; width:44%; height:60%; transform:translate(-50%,-50%);
  border:2px dashed rgba(255,255,255,.6); border-radius:50%;}
.cam-hint{font-size:12.5px; color:var(--muted); margin:10px 0 12px;}
.cam-actions{display:flex; gap:10px;}
.cam-actions .btn{margin-top:0;}
.cam-actions #camCancel{flex:0 0 auto; width:auto; padding-left:22px; padding-right:22px;}
.cam-actions #camShot{flex:1;}

.canvas-holder{position:relative; background:
  linear-gradient(45deg,#eef2f7 25%,transparent 25%,transparent 75%,#eef2f7 75%),
  linear-gradient(45deg,#eef2f7 25%,#fff 25%,#fff 75%,#eef2f7 75%);
  background-size:20px 20px; background-position:0 0,10px 10px;
  border-radius:12px; padding:16px; display:flex; justify-content:center;}
#preview{border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,.15); cursor:grab;}
#preview:active{cursor:grabbing;}
.hint{font-size:12px; color:var(--muted); text-align:center;}

/* AI 변환 */
.ai-overlay{position:absolute; inset:0; background:rgba(255,255,255,.82);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; border-radius:12px; color:var(--brand-d); font-weight:600; text-align:center;}
.ai-overlay small{color:var(--muted); font-weight:400;}
.spinner{width:38px; height:38px; border:4px solid #d7efe9;
  border-top-color:var(--brand); border-radius:50%; animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-bar{display:flex; align-items:center; gap:12px; width:100%; justify-content:center; flex-wrap:wrap;}
.btn-ai{background:linear-gradient(120deg,#7c5cff,#b06bff); color:#fff; border:none;
  border-radius:12px; padding:12px 20px; font-size:15px; font-weight:800; cursor:pointer;
  font-family:inherit; box-shadow:0 6px 18px rgba(124,92,255,.35); transition:.15s;}
.btn-ai:hover:not(:disabled){filter:brightness(1.06); transform:translateY(-1px);}
.btn-ai:disabled{opacity:.5; cursor:not-allowed;}
.ab-toggle{display:inline-flex; border:2px solid var(--line); border-radius:10px; overflow:hidden;}
.ab-toggle button{border:none; background:#fff; padding:8px 14px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; color:var(--muted);}
.ab-toggle button.active{background:var(--brand); color:#fff;}
.ai-note{font-size:12.5px; text-align:center; border-radius:8px; padding:8px 12px; margin:2px 0 0; width:100%;}
.ai-note.ok{background:#e9fbf8; color:var(--brand-d);}
.ai-note.warn{background:#fff4e6; color:#b3630a;}

/* 컨트롤 */
.controls{width:100%; display:flex; flex-direction:column; gap:14px;}
.ctl{display:flex; align-items:center; gap:10px;}
.ctl label{font-size:13px; width:64px; color:var(--muted); flex:0 0 auto;}
.ctl input[type=range]{flex:1; accent-color:var(--brand);}
.ctl input[type=color]{width:40px; height:28px; border:1px solid var(--line); border-radius:6px; padding:0; background:none;}
.ctl select{flex:1; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-family:inherit;}
.switch{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink);}

/* 우측 규격 + 버튼 */
.spec-row{font-size:15px; margin-bottom:10px;}
.spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
.spec-grid > div{background:#f7fafd; border-radius:10px; padding:8px 10px;}
.spec-grid span{display:block; font-size:11px; color:var(--muted);}
.spec-grid strong{font-size:14px;}
.note{font-size:12px; color:var(--muted); background:#fff8e6; border-radius:8px; padding:8px 10px; margin:0 0 4px;}

.btn{width:100%; border:none; border-radius:12px; padding:12px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit; margin-top:8px; transition:.15s;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--brand-d);}
.btn-ghost{background:#eef4f9; color:var(--ink);}
.btn-ghost:hover:not(:disabled){background:#e0eaf2;}
.paper-row{display:flex; gap:8px; align-items:center; margin-top:12px;}
.paper-row select{flex:1; padding:8px; border:1px solid var(--line); border-radius:8px; font-family:inherit;}
.reset{font-size:12px; color:var(--brand-d); background:none; border:none; cursor:pointer; margin-top:6px; text-decoration:underline;}

.divider{height:1px; background:var(--line); margin:16px 0;}

/* 결제 */
.pay-box{margin-top:12px; border-top:1px dashed var(--line); padding-top:12px;}
.btn-pay{width:100%; border:none; border-radius:12px; padding:13px; font-size:15px; font-weight:800;
  cursor:pointer; font-family:inherit; color:#4a2b00;
  background:linear-gradient(120deg,#ffd66b,#ffb347); box-shadow:0 6px 18px rgba(255,170,60,.35); transition:.15s;}
.btn-pay:hover:not(:disabled){filter:brightness(1.05); transform:translateY(-1px);}
.btn-pay:disabled{background:#eef1f5; color:var(--muted); box-shadow:none; cursor:default;}
.wm-hint{font-size:11.5px; color:var(--muted); text-align:center; margin:8px 0 0;}
.paid-note{font-size:12.5px; color:var(--brand-d); background:#e9fbf8; border-radius:8px; padding:8px 10px; margin:8px 0 0; text-align:center; font-weight:700;}
.coming{font-size:12px; color:var(--muted); border:1px dashed var(--line); border-radius:10px; padding:10px; margin-top:14px;}
.coming b{color:var(--accent);}

/* 사진 종류 선택 */
.type-head{font-size:12px; color:var(--muted); font-weight:700; margin:14px 0 8px; text-transform:uppercase; letter-spacing:.4px;}
.type-list{display:flex; flex-wrap:wrap; gap:6px;}
.ptype{display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:7px 11px; border:2px solid var(--line); border-radius:10px; background:#fff;
  cursor:pointer; font-family:inherit; transition:.15s;}
.ptype:hover{border-color:var(--brand);}
.ptype.active{border-color:var(--brand); background:#e9fbf8;}
.ptype .tname{font-size:13px; font-weight:700; color:var(--ink);}
.ptype .tsize{font-size:11px; color:var(--muted);}
.type-badge{display:inline-block; font-size:12px; font-weight:700; color:var(--brand-d);
  background:#e9fbf8; border-radius:6px; padding:2px 8px; margin-left:2px;}

/* 규격별 경고 칩 */
.country-warn{display:flex; flex-direction:column; gap:6px; margin-top:12px;}
.warn-chip{font-size:12px; background:#fff4e6; color:#b3630a; border-radius:8px; padding:6px 10px;}

/* 본인 사진 동의 */
.consent{display:flex; gap:8px; align-items:flex-start; width:100%; font-size:12.5px;
  background:#f7fafd; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer;}
.consent input{margin-top:2px; accent-color:var(--brand); flex:0 0 auto;}
.consent b{color:var(--ink);}

/* AI 옵션 */
.ai-options{width:100%; display:flex; flex-direction:column; gap:10px;
  background:#faf7ff; border:1px solid #ecdfff; border-radius:12px; padding:12px;}
.opt-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.opt-label{font-size:13px; color:var(--muted); width:44px; flex:0 0 auto;}
.seg{display:inline-flex; border:2px solid #e4d4ff; border-radius:10px; overflow:hidden;}
.seg button{border:none; background:#fff; padding:7px 12px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit; color:var(--muted);}
.seg button.active{background:#7c5cff; color:#fff;}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;}
.chk input{accent-color:#7c5cff;}
.opt-sub{display:flex; flex-direction:column; gap:10px; border-top:1px dashed #e4d4ff; padding-top:10px;}
.tie-colors{display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap;}
.tie-colors button{width:22px; height:22px; border:1px solid #ccd4de; border-radius:50%; cursor:pointer; padding:0;
  font-size:11px; font-weight:800; color:#888; background:#fff; line-height:1;}
.tie-colors button.active{outline:2px solid #7c5cff; outline-offset:1px;}

/* 배경 프리셋 */
.bg-presets{display:inline-flex; gap:5px;}
.bg-presets button{width:22px; height:22px; border:1px solid #ccd4de; border-radius:6px; cursor:pointer; padding:0;}
.bg-presets button:hover{outline:2px solid var(--brand);}

/* 자동 맞춤 바 */
.fit-bar{display:flex; align-items:center; gap:10px; width:100%; flex-wrap:wrap; justify-content:center;}
.btn-fit{background:#eef9f6; color:var(--brand-d); border:2px solid #bfe9e0; border-radius:11px;
  padding:9px 16px; font-size:14px; font-weight:800; cursor:pointer; font-family:inherit; transition:.15s;}
.btn-fit:hover:not(:disabled){background:#ddf3ee; transform:translateY(-1px);}
.btn-fit:disabled{opacity:.5; cursor:not-allowed;}
.fit-hint{font-size:11.5px; color:var(--muted);}

/* 검증 결과 리스트 */
.checklist{margin:12px 0 4px; display:flex; flex-direction:column; gap:5px;}
.cl-row{font-size:12px; display:flex; gap:7px; align-items:flex-start; color:var(--ink);}
.cl-row.you{color:var(--muted);}
.cl-row span{flex:0 0 auto;}
.cl-row.v-pass{color:var(--brand-d);}
.cl-row.v-warn{color:#b3630a;}
.cl-row.v-na{color:var(--muted);}

.tiny{font-size:11.5px; color:var(--brand-d); margin:6px 0 2px;}
.paper-row label{font-size:13px; color:var(--muted); width:36px; flex:0 0 auto;}

/* 개인정보/면책 안내 */
.notice{margin-top:16px; border-top:1px solid var(--line); padding-top:12px;}
.notice p{font-size:11.5px; color:var(--muted); margin:0 0 8px; line-height:1.55;}
.notice b{color:var(--ink);}

footer{text-align:center; color:var(--muted); font-size:12px; padding:24px 20px 34px;}
footer p{margin:0 auto; max-width:760px; line-height:1.7;}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:14px 0 10px;}
.foot-links a, .foot-links button{color:var(--brand-d); font-size:12.5px; font-weight:700;
  text-decoration:none; background:none; border:0; padding:0; font-family:inherit; cursor:pointer;}
.foot-links a:hover, .foot-links button:hover{text-decoration:underline;}
.foot-biz{font-size:11.5px; opacity:.8;}

@media(max-width:960px){
  main{grid-template-columns:1fr;}
}

/* 워터마크 제거(결제) 안내 팝업 */
.wm-modal{position:fixed; inset:0; background:rgba(11,61,57,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px;}
.wm-box{background:#fff; border-radius:18px; max-width:420px; width:100%; padding:26px 24px; box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center;}
.wm-title{font-size:20px; font-weight:800; color:#0b3d39; margin-bottom:10px;}
.wm-msg{font-size:15px; line-height:1.6; color:#333; margin:0 0 22px;}
.wm-btns{display:flex; flex-direction:column; gap:10px;}
.wm-btns button{padding:13px 16px; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; border:0;}
.wm-yes{background:#00877d; color:#fff;}
.wm-yes:disabled{background:#b8c4c2; cursor:not-allowed;}
.wm-no{background:#eef2f1; color:#0b3d39; border:1px solid #d3ddda !important;}

/* 결제 자가 복구(주문번호 재검증) */
.recover-wrap{margin-top:10px; text-align:center;}
.recover-link{font-size:12.5px; color:#00877d; text-decoration:underline; cursor:pointer;}
.recover-form{display:flex; gap:6px; margin-top:8px;}
.recover-form input{flex:1; padding:9px 11px; border:1px solid #cdd8d5; border-radius:9px; font-size:13px;}
.recover-form button{padding:9px 14px; border:0; border-radius:9px; background:#0b3d39; color:#fff; font-weight:700; font-size:13px; cursor:pointer;}

/* ===== 서포트 챗봇 위젯 ===== */
#pmSupport{position:fixed; right:20px; bottom:20px; z-index:1200;}
#supFab{width:58px; height:58px; border-radius:50%; border:0; background:#ff5b7f; box-shadow:0 8px 22px rgba(255,91,127,.45); cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; transition:transform .15s;}
#supFab:hover{transform:scale(1.06);}
#supFab .sup-dot{position:absolute; top:6px; right:7px; width:11px; height:11px; border-radius:50%; background:#2fd07a; border:2px solid #fff;}
#supPanel{position:absolute; right:0; bottom:72px; width:340px; max-width:calc(100vw - 30px); background:#fff; border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.28); overflow:hidden; animation:supPop .18s ease;}
@keyframes supPop{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.sup-head{position:relative; background:linear-gradient(135deg,#ffd9e2,#ffe9ef); padding:16px 44px 14px 16px; display:flex; align-items:center; gap:11px;}
.sup-mascot{width:40px; height:40px; flex:0 0 40px; background:#fff; border-radius:11px; padding:3px; box-shadow:0 2px 6px rgba(0,0,0,.1); display:flex; align-items:center; justify-content:center;}
.sup-mascot svg{width:100%; height:100%;}
.sup-head-txt b{display:block; font-size:15px; color:#8a2b45;}
.sup-head-txt span{font-size:12px; color:#a9647a;}
.sup-x{position:absolute; top:12px; right:12px; border:0; background:transparent; font-size:15px; color:#8a2b45; cursor:pointer;}
.sup-back{display:block; width:100%; text-align:left; border:0; background:#faf3f5; color:#8a2b45; font-size:13px; padding:9px 16px; cursor:pointer;}
.sup-body{padding:14px 16px 18px; max-height:min(64vh,460px); overflow-y:auto;}
.sup-card{width:100%; display:flex; align-items:center; gap:12px; text-align:left; background:#fff; border:1px solid #eef0f2; border-radius:13px; padding:13px 14px; margin-bottom:10px; cursor:pointer; transition:.12s;}
.sup-card:hover{border-color:#ffbccb; box-shadow:0 4px 14px rgba(0,0,0,.06);}
.sup-ico{font-size:20px; flex:0 0 24px; text-align:center;}
.sup-card-txt b{display:block; font-size:14.5px; color:#222;}
.sup-card-txt small{font-size:12px; color:#8a92a0;}
.sup-form-title{font-size:15px; font-weight:800; color:#0b3d39; margin-bottom:10px;}
#supPanel textarea, #supPanel input{width:100%; box-sizing:border-box; border:1px solid #d4dcda; border-radius:10px; padding:10px 12px; font-size:13.5px; margin-bottom:9px; font-family:inherit;}
#supPanel textarea{resize:vertical;}
.sup-send{width:100%; border:0; border-radius:11px; background:#00877d; color:#fff; font-weight:700; font-size:14px; padding:12px; cursor:pointer;}
.sup-send:disabled{background:#a9c6c2;}
.sup-out{font-size:12.5px; margin-top:8px; text-align:center;}
.sup-recover{background:#f0faf8; border:1px solid #cfeae5; border-radius:12px; padding:11px 12px; margin-bottom:12px;}
.sup-recover p{margin:0 0 8px; font-size:12.5px; color:#2a6b64; line-height:1.5;}
.sup-recover-row{display:flex; gap:6px;}
.sup-recover-row input{margin:0;}
.sup-recover-row button{flex:0 0 auto; border:0; border-radius:10px; background:#0b3d39; color:#fff; font-size:12.5px; font-weight:700; padding:0 12px; cursor:pointer;}
.sup-recmsg{font-size:12px; margin-top:7px;}
/* 환불 전 안내 */
.sup-rf-intro{margin:-4px 0 10px; font-size:13px; color:#556;}
.sup-card.sup-rf{padding:10px 12px;}
.sup-card.sup-rf .sup-ico{font-size:18px;}
.sup-rf-tips{margin:0 0 12px; padding-left:18px; font-size:13px; line-height:1.6; color:#233;}
.sup-rf-tips li{margin-bottom:6px;}
.sup-rf-policy{background:#fff7e8; border:1px solid #f1dfb8; border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.55; color:#5c4300; margin-bottom:12px;}
.sup-rf-policy b{color:#8a5200; margin-right:4px;}
.sup-rf-policy a{color:#8a5200; font-weight:700; text-decoration:none;}
.sup-rf-btns{display:flex; flex-direction:column; gap:8px;}
.sup-rf-still{width:100%; border:1px solid #d7dfdd; border-radius:11px; background:#fff; color:#556; font-weight:600; font-size:13px; padding:10px; cursor:pointer;}
.sup-rf-chip{display:inline-block; background:#fbe3df; color:#8e2a1f; border-radius:10px; padding:3px 10px; font-size:12px; font-weight:700; margin:-4px 0 10px;}
.sup-qa{border:1px solid #eef0f2; border-radius:11px; padding:10px 13px; margin-bottom:9px;}
.sup-qa summary{cursor:pointer; font-size:13.5px; font-weight:700; color:#222;}
.sup-qa p{margin:9px 0 0; font-size:13px; color:#556; line-height:1.6;}
.sup-sent{text-align:center; padding:26px 16px;}
.sup-check{width:52px; height:52px; margin:0 auto 14px; border-radius:50%; background:#e4f6e9; color:#0a7d34; font-size:26px; display:flex; align-items:center; justify-content:center;}
.sup-sent p{font-size:14px; color:#333; line-height:1.6; margin:0 0 16px;}

/* ===== 용도 모드(증명·여권 / 프로필) ===== */
.purpose-seg{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
.purpose-seg button{display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 8px; border:1.5px solid #dde4e2; border-radius:12px; background:#fff; font-size:14px; font-weight:700; color:#5a6a67; cursor:pointer; transition:.15s;}
.purpose-seg button:hover{border-color:#9fd3cc;}
.purpose-seg button.active{border-color:#00877d; background:#eaf7f5; color:#0b3d39;}
.purpose-seg .pz-ico{font-size:16px;}
.purpose-note{margin:0 0 12px; padding:10px 12px; background:#fdf4f7; border:1px solid #f6dde5; border-radius:10px; font-size:12.5px; line-height:1.6; color:#8a5a68;}

/* ===== 멀티컷 미리보기(프로필) ===== */
.multicut{width:100%; margin:14px 0 4px;}
.multicut-head{display:flex; align-items:baseline; gap:8px; margin-bottom:8px; font-size:13px; font-weight:700; color:#0b3d39;}
.multicut-hint{font-size:11.5px; font-weight:500; color:#93a09d;}
.multicut-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.mc-cell{display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px; border:1.5px solid #e4e9e8; border-radius:12px; background:#fff; cursor:pointer; transition:.15s;}
.mc-cell:hover{border-color:#9fd3cc;}
.mc-cell.active{border-color:#00877d; background:#f2faf9;}
.mc-cell canvas{border-radius:7px; display:block; background:#f3f5f4;}
.mc-cap{font-size:11.5px; font-weight:700; color:#5a6a67;}
.mc-cell.active .mc-cap{color:#00877d;}

/* ===== 프로필 의상 선택기(그림 아이콘) ===== */
.opt-row-col{flex-direction:column; align-items:flex-start; gap:8px;}
.outfit-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; width:100%;}
.outfit{display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 3px 5px; border:1.5px solid #e2e8e6; border-radius:11px; background:#fff; cursor:pointer; transition:.13s;}
.outfit:hover{border-color:#9fd3cc; transform:translateY(-1px);}
.outfit.active{border-color:#00877d; background:#f1faf8; box-shadow:0 0 0 1px #00877d inset;}
.of-ico{display:block; width:38px; height:38px;}
.of-ico svg{width:100%; height:100%; display:block;}
.of-name{font-size:10px; line-height:1.25; text-align:center; color:#6b7a77; word-break:keep-all;}
.outfit.active .of-name{color:#00877d; font-weight:700;}
@media(max-width:560px){ .outfit-grid{grid-template-columns:repeat(4,1fr);} }

/* 가이드 토글 스위치 (사진 바깥, 자동맞춤 옆) */
.tgl{display:inline-flex; align-items:center; gap:7px; padding:4px 2px; border:0;
  background:transparent; font-family:inherit; cursor:pointer;}
.tgl-track{position:relative; width:36px; height:20px; border-radius:20px; background:#cfd8d6;
  flex:0 0 auto; transition:background .18s;}
.tgl-knob{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s;}
.tgl-label{font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap;}
.tgl.active .tgl-track{background:var(--brand);}
.tgl.active .tgl-knob{transform:translateX(16px);}
.tgl.active .tgl-label{color:var(--brand-d);}

/* 얼굴·몸통 방향 선택 */
.dir-seg{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:100%;}
.dir-seg button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px;
  border:1.5px solid #e2e8e6; border-radius:11px; background:#fff; color:#6b7a77;
  font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer; transition:.13s;}
.dir-seg button:hover{border-color:#9fd3cc;}
.dir-seg button.active{border-color:#00877d; background:#f1faf8; color:#00877d;}
.dir-ic{font-size:17px; line-height:1;}

/* ===== 접이식 패널 ===== */
.fold-head{display:flex; align-items:center; gap:8px; width:100%; padding:2px 0 10px;
  border:0; background:transparent; font-family:inherit; cursor:pointer; text-align:left;}
.fold-title{font-size:14px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; flex:0 0 auto;}
.fold-sum{flex:1; min-width:0; font-size:12px; color:var(--ink); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .15s;}
.fold-ic{flex:0 0 auto; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#e7f2f0; border:1.5px solid #c3e2dc; color:var(--brand-d);
  font-size:15px; font-weight:900; line-height:1; transition:transform .18s, background .15s, border-color .15s;}
.fold:not(.open) .fold-body{display:none;}
.fold:not(.open) .fold-ic{transform:rotate(-90deg);}
.fold:not(.open) .fold-sum{opacity:1;}
.fold-head:hover .fold-title{color:var(--brand-d);}
.fold-head:hover .fold-ic{background:var(--brand); border-color:var(--brand); color:#fff;}
#foldInfo{margin-top:16px; border-top:1px solid var(--line); padding-top:12px;}
.ph-spacer{flex:1;}

/* 방향 선택 라벨은 한 줄로 (기본 opt-label은 44px 고정폭이라 줄바꿈됨) */
.opt-label-wide{width:auto; white-space:nowrap;}
.dir-seg button span:last-child{white-space:nowrap;}

/* ===== 히어로 진입 카드 (증명 / 프로필) ===== */
.entry-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto 26px;}
.entry-card{position:relative; background:var(--panel); border:2px solid var(--line); border-radius:20px;
  padding:26px 20px 22px; box-shadow:var(--shadow); cursor:pointer; transition:.18s; text-align:center;}
.entry-card:hover{transform:translateY(-4px); border-color:var(--brand); box-shadow:0 14px 36px rgba(30,60,90,.16);}
.entry-card:focus-visible{outline:3px solid var(--brand); outline-offset:3px;}
.ec-badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:5px 14px; border-radius:20px; font-size:12.5px; font-weight:800; color:#fff;}
.ec-badge-id{background:linear-gradient(120deg,#00b4a0,#0093c4);}
.ec-badge-pf{background:linear-gradient(120deg,#e0669b,#b06bff);}
.ec-shots{display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 0 14px;}
.ec-shots .cmp-item img{width:118px; height:148px;}
.ec-shots .cmp-arrow{font-size:24px;}
.ec-desc{font-size:13px; color:var(--muted); line-height:1.55; margin:0 0 16px; min-height:40px;}
.ec-cta{width:100%; padding:13px 18px; font-size:15.5px;}
.ec-cta-pf{background:linear-gradient(120deg,#e0669b,#b06bff); box-shadow:0 10px 26px rgba(176,107,255,.32);}
.cap-pf{color:#b0479a !important;}
.entry-card:hover .ec-cta{filter:brightness(1.06);}
/* 첫 화면 맨 위 — 개인용/비즈니스용 탭과 그 서비스 카드. 여우·문구(.hero)는 이 아래에 온다 */
.home-svc{max-width:900px; margin:0 auto; padding:26px 24px 10px; text-align:center;}
.home-tabs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 16px;}
.home-tab{display:flex; align-items:center; gap:12px; padding:16px 18px; text-align:left; cursor:pointer;
  background:var(--panel); border:2px solid var(--line); border-radius:18px; color:var(--ink);
  box-shadow:var(--shadow); transition:.16s; font:inherit;}
.home-tab:hover{border-color:#9fd3cd;}
.home-tab.on{border-color:var(--brand); background:linear-gradient(135deg,#e9fbf8,#fff);
  box-shadow:0 10px 28px rgba(0,135,125,.18);}
.home-tab:focus-visible{outline:3px solid rgba(0,135,125,.35); outline-offset:2px;}
.ht-ic{font-size:30px; line-height:1; flex:0 0 auto;}
.ht-txt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.ht-txt b{font-size:19px; font-weight:800; letter-spacing:-.2px; color:var(--brand-d);}
.home-tab:not(.on) .ht-txt b{color:var(--ink);}
.ht-txt small{font-size:12.5px; color:var(--muted); line-height:1.4;}
.home-svc .svc-lead{margin:0 auto 18px;}
.svc-pane{animation:svcIn .22s ease;}
@keyframes svcIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
/* 서비스가 위로 올라갔으니 여우 영역은 위 여백을 줄인다 */
.home-svc + .hero{padding-top:30px;}
@media(max-width:560px){
  .home-svc{padding:16px 14px 6px;}
  .home-tabs{gap:8px;}
  .home-tab{flex-direction:column; align-items:flex-start; gap:6px; padding:12px 12px;}
  .ht-ic{font-size:24px;}
  .ht-txt b{font-size:16px;}
  .ht-txt small{font-size:11.5px;}
}
@media (prefers-reduced-motion: reduce){ .svc-pane{animation:none;} }

/* 랜딩 서비스 선택 — 5가지 용도를 카툰으로 보여주고 각각 따로 입장한다 */
.svc-lead{font-size:14px; color:var(--muted); line-height:1.65; max-width:640px; margin:0 auto 26px;}
.svc-group{font-size:20px; font-weight:800; letter-spacing:-.2px; color:var(--brand-d);
  margin:0 0 16px; text-align:center; line-height:1.35;}
@media(max-width:560px){ .svc-group{font-size:17px;} }
.svc-group + .svc-grid{margin-bottom:30px;}
.svc-grid{display:grid; gap:18px; max-width:900px; margin:0 auto;}
.svc-grid-2{grid-template-columns:repeat(2,1fr);}
/* B2B 도 개인용과 같은 크기로 — 3장이라 마지막 한 장은 가운데로 보낸다 */
.svc-grid-3{grid-template-columns:repeat(2,1fr);}
.svc-grid-3 > :last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 9px);}
.svc-card{display:flex; flex-direction:column; background:var(--panel); border:1.5px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow); text-align:left; transition:.16s;}
.svc-card:hover{transform:translateY(-4px); border-color:var(--brand); box-shadow:0 14px 34px rgba(30,60,90,.16);}
/* 직계 자식만 — 예시 스트립 안의 이미지까지 카툰 비율로 잘리면 안 된다 */
.svc-card > img{width:100%; height:auto; aspect-ratio:680/383; object-fit:cover; display:block; background:#f3f7f7;}
/* 카툰 아래 실사 변환 예시 — 카툰이 「무엇을」, 이 줄이 「어떻게 나오는지」를 보여준다 */
.svc-real{padding:14px 14px 16px; background:#f6fafb; border-top:1px solid var(--line); text-align:center;}
.svc-real-h{display:block; font-size:12.5px; font-weight:800; letter-spacing:.02em;
  color:var(--brand-d); margin-bottom:11px;}
.svc-real-row{display:flex; align-items:center; justify-content:center; gap:16px;}
.svc-real-row figure{margin:0; min-width:0;}
.svc-real-row img{width:118px; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:10px; display:block; background:#e9eef1; box-shadow:0 4px 14px rgba(30,60,90,.16);}
.svc-real-row figcaption{font-size:11.5px; color:var(--muted); margin-top:7px; white-space:nowrap;}
.svc-real-row .cap-after{color:var(--brand-d); font-weight:700;}
.svc-real-row .cap-pf{color:#b06bff;}
.svc-real-arw{font-size:23px; color:var(--brand); flex:0 0 auto;}
/* 대량변환·수료증·헤어는 결과가 「여러 장」이라 가로로 긴 한 장으로 보여준다 */
.svc-real-wide{width:100%; height:auto; aspect-ratio:auto; object-fit:contain;
  border-radius:10px; display:block;
  box-shadow:0 4px 14px rgba(30,60,90,.16); background:#fff;}
@media(max-width:440px){ .svc-real-row img{width:92px;} .svc-real-row{gap:10px;} }

.svc-body{display:flex; flex-direction:column; gap:6px; padding:15px 16px 16px; flex:1;}
.svc-body b{font-size:15px; color:var(--ink);}
.svc-body small{font-size:12.5px; color:var(--muted); line-height:1.6; flex:1;}
.svc-go{width:100%; margin-top:8px; padding:10px 14px; font-size:14px;}
/* 연출 성격의 서비스(프로필·헤어)는 분홍→보라 버튼으로 구분한다 */
.svc-go-pink{background:linear-gradient(120deg,#e0669b,#b06bff); box-shadow:0 10px 26px rgba(176,107,255,.32);}
@media(max-width:560px){
  .svc-grid-2, .svc-grid-3{grid-template-columns:1fr;}
  .svc-grid-3 > :last-child:nth-child(odd){grid-column:auto; width:auto;}
}

@media(max-width:720px){
  .entry-cards{grid-template-columns:1fr;} .ec-desc{min-height:0;}
  /* 1fr 은 min-width:auto 라서 118px 미리보기 2장이 카드를 화면 밖까지 밀어낸다 */
  .entry-card, .ec-shots, .ec-shots .cmp-item{min-width:0;}
  .ec-shots .cmp-item img{width:clamp(84px,26vw,118px); height:auto; aspect-ratio:118/148;}
}

/* 모드별 편집 레이아웃 — 프로필은 국가 목록이 없어 좌측 패널이 얇다 */
#editorMain.mode-profile{grid-template-columns:230px 1fr 330px;}
#editorMain.mode-profile #unitToggle{display:none;}

/* 에디터 패널 안의 접이식(업로드) — flex 컬럼 안에서 전체폭 차지 */
.ed-fold{width:100%;}
.ed-fold .fold-head{padding:0 0 10px;}
#foldAi .fold-head{padding:2px 0 12px;}
/* 헤더에 요약이 없을 때도 화살표가 오른쪽 끝으로 */
.fold-head .fold-sum:empty{flex:1;}
/* 가이드 토글 바 — 업로드 영역과 사진 사이 */
.guide-bar{display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
  padding:8px 12px; margin-bottom:10px; background:#f5f8f8; border-radius:11px; flex-wrap:wrap;}

/* ===== SNS 공유 ===== */
.btn-share{background:linear-gradient(120deg,#7c5cff,#b06bff); color:#fff; border:0; margin-top:8px;}
.btn-share:disabled{opacity:.45; cursor:not-allowed;}
.share-modal{position:fixed; inset:0; background:rgba(11,61,57,.55); display:flex; align-items:center;
  justify-content:center; z-index:1100; padding:18px;}
.share-box{position:relative; background:#fff; border-radius:18px; width:100%; max-width:430px;
  max-height:92vh; overflow-y:auto; padding:22px 20px; box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center;}
.share-x{position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:15px; color:#889; cursor:pointer;}
.share-title{font-size:18px; font-weight:800; color:#0b3d39; margin-bottom:12px;}
.share-preview{margin:0 auto 10px; width:190px;}
.share-preview canvas{width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.16);}
.share-note{font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.5;}
.share-acts{display:flex; flex-direction:column; gap:8px;}
.share-acts .btn{width:100%;}
.share-sep{display:flex; align-items:center; gap:10px; margin:18px 0 12px; color:var(--muted); font-size:12px; font-weight:700;}
.share-sep::before, .share-sep::after{content:''; flex:1; height:1px; background:var(--line);}
.sns-row{display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
.sns{width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; display:flex;
  align-items:center; justify-content:center; color:#fff; transition:.14s;}
.sns svg{width:21px; height:21px;}
.sns:hover{transform:translateY(-2px); filter:brightness(1.08);}
.sns-dark{color:#3b1e1e;}
.share-tip{font-size:11.5px; color:#8a95a3; line-height:1.6; margin:16px 0 0; text-align:left;}

/* 공유 버튼 안의 SNS 로고 묶음 */
.btn-share{display:flex; align-items:center; justify-content:center; gap:9px;}
.share-ics{display:inline-flex; align-items:center; gap:5px; line-height:0;}
.share-ics svg{width:16px; height:16px; display:block; opacity:.95;}

/* ===== 다운로드 용도 선택 팝업 ===== */
.dl-modal{position:fixed; inset:0; background:rgba(11,61,57,.55); display:flex; align-items:center;
  justify-content:center; z-index:1100; padding:18px;}
.dl-box{position:relative; background:#fff; border-radius:18px; width:100%; max-width:440px;
  max-height:92vh; overflow-y:auto; padding:22px 20px; box-shadow:0 20px 60px rgba(0,0,0,.3);}
.dl-x{position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:15px; color:#889; cursor:pointer;}
.dl-title{font-size:18px; font-weight:800; color:#0b3d39; text-align:center;}
.dl-sub{font-size:12.5px; color:var(--muted); text-align:center; margin:6px 0 16px;}
.dl-card{position:relative; display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:13px 14px;
  margin-bottom:9px; cursor:pointer; font-family:inherit; transition:.13s;}
.dl-card:hover:not(:disabled){border-color:var(--brand); box-shadow:0 4px 14px rgba(0,0,0,.07); transform:translateY(-1px);}
.dl-card:disabled{opacity:.45; cursor:not-allowed;}
.dl-ic{font-size:21px; flex:0 0 26px; text-align:center;}
.dl-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.dl-txt b{font-size:14.5px; color:var(--ink); font-weight:800;}
.dl-txt small{font-size:11.5px; color:var(--muted); line-height:1.45;}
.dl-best{border-color:#bfe9e0; background:#f4fbf9;}
.dl-badge{position:absolute; top:-8px; right:12px; background:var(--brand); color:#fff;
  font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:20px;}
.dl-group{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.dl-group-head{font-size:12.5px; font-weight:800; color:#0b3d39; margin-bottom:10px;}
.dl-settings{background:#f6f9f9; border-radius:12px; padding:10px 12px; margin-bottom:11px;}
.dl-settings .paper-row{margin-bottom:6px;}
.dl-settings .tiny{margin:4px 0 0;}

/* ===== 비즈니스(대량 처리) ===== */
.nav-biz{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.18);
  color:#fff; border:1.5px solid rgba(255,255,255,.45); border-radius:20px; padding:6px 14px;
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; margin-right:10px; transition:.14s;}
.nav-biz:hover{background:#fff; color:var(--brand-d); border-color:#fff;}
.nb-ic{font-size:14px;}
#bizMain{max-width:1200px; margin:0 auto; padding:0 24px 40px;}
.biz-hero{text-align:center; padding:40px 20px 30px;}
.biz-badge{display:inline-block; background:linear-gradient(120deg,#0b3d39,#00877d); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.06em; padding:5px 14px; border-radius:20px;}
.biz-title{font-size:30px; font-weight:800; letter-spacing:-.5px; margin:16px 0 12px; color:var(--ink);}
.biz-sub{font-size:15px; color:var(--muted); max-width:680px; margin:0 auto 26px; line-height:1.65;}
/* 수료증·인증서 발급 */
.ct-names{width:100%; box-sizing:border-box; font-family:inherit; font-size:13.5px; line-height:1.7;
  border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; resize:vertical; color:var(--ink);}
.ct-names:focus{outline:none; border-color:var(--brand);}
.ct-preview-wrap{text-align:center;}
#ctPreview{display:flex; justify-content:center;}
.cd-page{max-width:100%; height:auto; border-radius:10px; display:block; margin:0 auto;
  box-shadow:0 8px 24px rgba(11,61,57,.18); background:#fff;}
.ct-page{max-width:100%; height:auto; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 24px rgba(11,61,57,.12); background:#fff;}
/* 가운데 「n / 전체」가 세로로 접히지 않게 자리를 넉넉히 주고, 버튼은 글자 폭만 차지한다 */
.ct-nav{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px;}
.ct-nav-btn{flex:0 0 auto; width:auto; display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; font-size:13.5px; font-weight:700; line-height:1.2; white-space:nowrap;}
.ct-nav-btn:disabled{opacity:.4; cursor:default;}
.ct-arw{font-size:17px; line-height:1;}
.ct-pos{flex:1 1 auto; text-align:center; white-space:nowrap;
  font-size:14px; font-weight:800; color:var(--brand-d);}
@media(max-width:420px){
  .ct-nav-btn{padding:8px 10px; font-size:12.5px;}
}
.ct-tpls{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.ct-tpl, .ct-or{flex:1 1 auto; min-width:0; border:1.5px solid var(--line); background:var(--panel);
  color:var(--ink); border-radius:10px; padding:8px 10px; font-size:13px; font-weight:700;
  font-family:inherit; cursor:pointer; transition:.15s;}
.ct-tpl:hover, .ct-or:hover{border-color:#9fd3cc;}
.ct-tpl.active, .ct-or.active{background:var(--brand); border-color:var(--brand); color:#fff;}
/* 입력 방식 전환 + 사진에서 읽은 수령자 목록 */
.ct-src{margin-bottom:12px;}
.ct-mode{flex:1 1 auto; min-width:0; border:1.5px solid var(--line); background:var(--panel);
  color:var(--ink); border-radius:10px; padding:8px 10px; font-size:13px; font-weight:700;
  font-family:inherit; cursor:pointer; transition:.15s;}
.ct-mode:hover{border-color:#9fd3cc;}
.ct-mode.active{background:var(--brand); border-color:var(--brand); color:#fff;}
.ct-plist{margin-top:10px; max-height:260px; overflow-y:auto;}
.ct-prow{position:relative; display:flex; align-items:center; gap:10px; padding:7px 34px 7px 8px;
  border:1px solid var(--line); border-radius:10px; margin-bottom:6px; background:#fff;}
.ct-pthumb{width:34px; height:45px; object-fit:cover; border-radius:5px; flex:0 0 auto; background:#eef2f4;}
.ct-ptxt{min-width:0;}
.ct-ptxt b{display:block; font-size:13px; color:var(--ink);}
.ct-ptxt small{font-size:11.5px; color:var(--muted);}
.ct-prow-x{top:50%; transform:translateY(-50%);}
.ct-chk{display:block; margin-top:10px; font-size:13px;}

.ct-sub-h{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin:12px 0 7px;}
.ct-frames{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:7px;}
.ct-frame{padding:2px; border:2px solid var(--line); border-radius:9px; background:#fff;
  cursor:pointer; line-height:0; transition:.15s;}
.ct-frame:hover{border-color:#9fd3cc;}
.ct-frame.active{border-color:var(--brand); box-shadow:0 0 0 2px rgba(0,180,160,.18);}
/* 셀이 썸네일보다 넓을 때 왼쪽에 붙지 않도록 가운데로 */
.ct-frame{display:flex; align-items:center; justify-content:center;}
.ct-frame canvas{display:block; border-radius:6px; max-width:100%; height:auto; margin:0 auto;}
/* 카드 테두리는 3종뿐이고 세로 규격일 때 폭이 좁아져 칸을 작게 잡는다 */
#cdFrames{grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); justify-items:center;}
.ct-ems{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));}
.ct-accents{display:flex; flex-wrap:wrap; gap:8px;}
.ct-acc{width:30px; height:30px; padding:0; border:2px solid var(--line); border-radius:50%;
  cursor:pointer; transition:.15s;}
.ct-acc:hover{transform:scale(1.08);}
.ct-acc.active{border-color:var(--ink); box-shadow:0 0 0 2px rgba(0,180,160,.25);}
/* 직접 고르기 — 라벨 안에 색 선택 input 을 숨겨 두고 라벨을 눌러 연다 */
.ct-acc-custom{display:inline-flex; align-items:center; justify-content:center; position:relative;
  background:#fff; border-style:dashed; color:var(--muted); font-size:16px; font-weight:800; line-height:1;}
/* 크기를 안 주면 색 입력요소가 기본 50px 로 스와치를 비집고 나온다.
   클릭은 감싸는 label 이 받으므로 안쪽에 담기기만 하면 된다. */
.ct-acc-custom input[type=color]{position:absolute; inset:0; width:100%; height:100%;
  box-sizing:border-box; opacity:0; border:0; padding:0; cursor:pointer;}

.ct-f{display:block; margin-bottom:10px;}
.ct-f > span{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:4px;}
.ct-f input, .ct-f textarea, .ct-f select{width:100%; box-sizing:border-box; font-family:inherit;
  font-size:13.5px; border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; color:var(--ink);}
.ct-f input:focus, .ct-f textarea:focus, .ct-f select:focus{outline:none; border-color:var(--brand);}
.ct-f textarea{resize:vertical; line-height:1.6;}
/* 카드 내용 네 칸 — 이름표[A]~[D] · 칸 이름 직접 수정 · 노출/비노출 */
.cd-fields{display:block;}
.cd-frow{margin-bottom:10px;}
.cd-fhead{display:flex; align-items:center; gap:6px; margin-bottom:4px;}
.cd-tag{flex:0 0 auto; font-size:11px; font-weight:800; color:var(--brand);
  background:#eaf7f5; border-radius:6px; padding:2px 5px; letter-spacing:-.3px;}
.cd-lb{flex:1 1 auto; min-width:0; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--muted); background:transparent; border:1.5px solid transparent; border-radius:8px;
  padding:2px 6px; transition:.15s;}
.cd-lb:hover{border-color:var(--line);}
.cd-lb:focus{outline:none; border-color:var(--brand); background:#fff; color:var(--ink);}
.cd-eye{flex:0 0 auto; width:28px; height:24px; line-height:1; font-size:13px; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:8px; transition:.15s;}
.cd-eye:hover{border-color:var(--brand);}
.cd-eye[aria-pressed="false"]{background:#f2f5f6; filter:grayscale(1); opacity:.75;}
.cd-val{width:100%; box-sizing:border-box; font-family:inherit; font-size:13.5px;
  border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; color:var(--ink);}
.cd-val:focus{outline:none; border-color:var(--brand);}
.cd-frow.off .cd-val{background:#f5f7f8; color:var(--muted);}
.cd-frow.off .cd-lb{text-decoration:line-through; opacity:.7;}
.cd-frow textarea.cd-val{resize:vertical; line-height:1.6;}
.cd-tok{margin-top:2px;}
/* 명단 파일 불러오기 */
.sh-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px;}
.sh-pick{flex:0 0 auto; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--brand);
  background:#fff; border:1.5px dashed var(--line); border-radius:9px; padding:6px 12px; transition:.15s;}
.sh-pick:hover{border-color:var(--brand); background:#f5fbfa;}
.sh-msg{flex:1 1 140px; min-width:0; word-break:break-word;}
.cd-tok code{background:#f2f5f6; border-radius:5px; padding:1px 4px; font-size:11.5px;
  word-break:break-all;}

.ct-uploads{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 6px;}
.ct-up{position:relative; border:1.5px dashed var(--line); border-radius:10px;
  font-size:12.5px; text-align:center; transition:.15s;}
.ct-up:hover{border-color:var(--brand); background:#f5fbfa;}
.ct-up-pick{display:block; padding:9px 10px; cursor:pointer;}
.ct-up span{display:block; font-weight:700; color:var(--ink); margin-bottom:3px;}
.ct-up em{font-style:normal; color:var(--muted); font-size:11.5px; word-break:break-all;}
/* 올린 파일이 있을 때만 나오는 삭제 버튼 */
.ct-up-x{position:absolute; top:5px; right:5px; width:22px; height:22px; padding:0;
  border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--muted);
  font-family:inherit; font-size:11px; line-height:1; cursor:pointer; transition:.15s;}
.ct-up-x:hover{background:#e5484d; border-color:#e5484d; color:#fff;}
.ct-up:has(.ct-up-x:not([hidden])){border-style:solid; border-color:#cfe4e0; background:#fff;}
@media(max-width:560px){ .ct-uploads{grid-template-columns:1fr;} }

/* 히어로 메인 비주얼(원본 → 카드용 대량 변환) */
.biz-shot{max-width:940px; margin:0 auto 34px; padding:0;}
.biz-shot img{width:100%; height:auto; display:block; border-radius:18px;
  border:1px solid var(--line); box-shadow:0 10px 30px rgba(11,61,57,.13); background:#fff;}
.biz-shot figcaption{font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:11px; padding:0 6px;}

/* 활용 현장 카드 */
.biz-cases-h{font-size:18px; font-weight:800; color:var(--ink); margin:0 0 16px;}
.biz-cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;
  max-width:940px; margin:0 auto 34px;}
.biz-case{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow); text-align:left; display:flex; flex-direction:column;}
/* height="420" 속성이 살아 있으면 aspect-ratio 가 무시돼 사진이 세로로 잘린다 */
.biz-case img{width:100%; height:auto; aspect-ratio:640/420; object-fit:cover; display:block;}
.bc-body{padding:14px 15px 16px;}
.biz-case b{display:block; font-size:14.5px; color:var(--ink); margin-bottom:6px;}
.biz-case small{font-size:12.5px; color:var(--muted); line-height:1.6;}

/* 소개 화면의 주 CTA + 도구 카드 (클릭하면 작업 화면으로 넘어간다) */
.biz-start{width:auto; padding:13px 30px; font-size:15.5px; margin:0 auto 30px;}
.biz-tools-h{margin-top:34px; margin-bottom:6px;}
.biz-tools-sub{max-width:660px; margin:0 auto 16px;}
.biz-tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;
  max-width:940px; margin:0 auto;}
.biz-tool{display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left;
  background:var(--panel); border:1.5px solid var(--line); border-radius:16px; padding:18px 16px;
  box-shadow:var(--shadow); font-family:inherit; cursor:pointer; transition:.16s;}
.biz-tool:hover{transform:translateY(-3px); border-color:var(--brand); box-shadow:0 14px 32px rgba(30,60,90,.15);}
.biz-tool .bt-ic{font-size:26px;}
.biz-tool b{font-size:15px; color:var(--ink);}
.biz-tool small{font-size:12.5px; color:var(--muted); line-height:1.55;}
.biz-tool .bt-go{margin-top:6px; font-size:12.5px; font-weight:800; color:var(--brand-d);}

/* 작업 화면 상단 바 — 소개로 돌아가는 길과 탭을 한 줄에 */
.biz-appbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:1200px; margin:0 auto; padding:18px 20px 0;}
.biz-appbar .biz-tabs{margin:0; flex:1 1 auto;}
.biz-back{background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:700;
  color:var(--muted); cursor:pointer; padding:6px 2px; white-space:nowrap;}
.biz-back:hover{color:var(--brand-d);}
@media(max-width:560px){ .biz-appbar{padding:14px 14px 0;} .biz-appbar .biz-tabs{flex-basis:100%;} }

.biz-feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; max-width:940px; margin:0 auto;}
.biz-feat{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 16px;
  box-shadow:var(--shadow); text-align:left;}
.bf-ic{font-size:24px; display:block; margin-bottom:8px;}
.biz-feat b{display:block; font-size:14.5px; color:var(--ink); margin-bottom:5px;}
.biz-feat small{font-size:12.5px; color:var(--muted); line-height:1.55;}
/* 폭 제한이 없어 넓은 화면에서 좌측 패널이 1500px 까지 늘어나던 문제.
   상단 .biz-appbar 와 같은 1200px 로 맞춘다. */
.biz-work{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;
  max-width:1200px; margin:24px auto 0; padding:0 20px;}
/* 헤어 시뮬은 스타일 목록이 주 화면이라 우측을 넓혀, 좁은 칸에서 스크롤하지 않게 한다 */
#bizSalon .biz-work{grid-template-columns:1fr 420px;}
@media(max-width:900px){ .biz-work, #bizSalon .biz-work{grid-template-columns:1fr;} }
.bulk-drop{border:2.5px dashed #bcd3ce; border-radius:16px; padding:30px 18px; text-align:center;
  cursor:pointer; background:#fafdfc; transition:.14s;}
.bulk-drop:hover, .bulk-drop.over{border-color:var(--brand); background:#f0faf8;}
.bulk-drop .big{font-size:38px; margin-bottom:8px;}
.bulk-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 8px;}
/* 「명단이 비어 있어요」 같은 문구가 두 줄로 접히지 않게 하고, 버튼은 내용 폭만 차지한다 */
.bk-cnt{font-size:13px; font-weight:800; color:var(--ink); white-space:nowrap;}
.bk-clear{padding:6px 12px; font-size:12px; width:auto; flex:0 0 auto;}
.bulk-prog{height:6px; background:#e8eef0; border-radius:6px; overflow:hidden;}
.bulk-prog span{display:block; height:100%; width:0; background:linear-gradient(90deg,#00b4a0,#0093c4); transition:width .25s;}
.bk-empty{font-size:13px; color:var(--muted); text-align:center; padding:22px 0;}
.bulk-list{max-height:460px; overflow-y:auto; margin-top:10px;}
.bk-row{display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line);
  border-radius:11px; margin-bottom:7px; background:#fff;}
.bk-thumb{width:38px; height:48px; flex:0 0 38px; border-radius:6px; overflow:hidden; background:#eef2f4;}
.bk-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.bk-name{flex:1; min-width:0; border:1px solid #e2e8ea; border-radius:8px; padding:7px 9px;
  font-size:13px; font-family:inherit; color:var(--ink);}
.bk-st{flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis;}
.bk-del{flex:0 0 auto; border:0; background:transparent; color:#b9c2cc; font-size:13px; cursor:pointer; padding:4px 6px;}
.bk-del:hover{color:#e05a5a;}
.bk-work .bk-st{color:#0093c4;}
.bk-done{border-color:#bfe9e0; background:#f6fdfb;}
.bk-done .bk-st{color:var(--brand-d);}
.bk-err{border-color:#f2c9c4; background:#fdf6f5;}
.bk-err .bk-st{color:#c0392b;}
.biz-spec{background:#f5f9f9; border-radius:12px; padding:12px 14px; margin:8px 0 10px;}
.bs-row{display:flex; align-items:center; gap:7px; font-size:14px; margin-bottom:5px;}
.bs-line{font-size:12.5px; color:var(--muted);}
.bk-ai{margin:6px 0;}
.bk-zip{margin-top:8px; background:linear-gradient(120deg,#7c5cff,#b06bff);}

/* ===== 여러 규격 동시 출력 ===== */
.dl-multi{border-color:#d8ccf5; background:#faf8ff;}
.dl-badge-new{background:linear-gradient(120deg,#7c5cff,#b06bff);}
.ms-modal{position:fixed; inset:0; background:rgba(11,61,57,.55); display:flex; align-items:center;
  justify-content:center; z-index:1200; padding:18px;}
.ms-box{position:relative; background:#fff; border-radius:18px; width:100%; max-width:460px;
  max-height:92vh; overflow-y:auto; padding:22px 20px; box-shadow:0 20px 60px rgba(0,0,0,.3);}
.ms-x{position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:15px; color:#889; cursor:pointer;}
.ms-title{font-size:18px; font-weight:800; color:#0b3d39; text-align:center;}
.ms-sub{font-size:12.5px; color:var(--muted); text-align:center; margin:6px 0 16px; line-height:1.55;}
.ms-name-row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.ms-name-row label{flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--muted);}
.ms-name-row input{flex:1; border:1px solid #d4dcda; border-radius:9px; padding:8px 11px; font-size:13.5px; font-family:inherit;}
.ms-list{max-height:230px; overflow-y:auto; margin-bottom:14px;}
.ms-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--line);
  border-radius:11px; margin-bottom:7px; cursor:pointer; transition:.12s; background:#fff;}
.ms-row:hover{border-color:#9fd3cc;}
.ms-row.on{border-color:var(--brand); background:#f2faf9;}
.ms-row input[type=checkbox]{width:17px; height:17px; accent-color:var(--brand-d); flex:0 0 auto;}
.ms-txt{flex:1; min-width:0; display:flex; flex-direction:column;}
.ms-txt b{font-size:13.5px; color:var(--ink);}
.ms-txt small{font-size:11.5px; color:var(--muted);}
.ms-del{flex:0 0 auto; border:0; background:transparent; color:#c3ccd4; font-size:13px; cursor:pointer; padding:2px 5px;}
.ms-del:hover{color:#e05a5a;}
.ms-add{background:#f6f9f9; border-radius:12px; padding:12px 13px; margin-bottom:14px;}
.ms-add-head{font-size:12.5px; font-weight:800; color:#0b3d39; margin-bottom:4px;}
.ms-add-hint{font-size:11.5px; color:var(--muted); margin:0 0 9px; line-height:1.5;}
.ms-add-row{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.ms-add-row input{border:1px solid #d4dcda; border-radius:8px; padding:7px 9px; font-size:12.5px; font-family:inherit; min-width:0;}
#msNewName{flex:1 1 96px;}
#msNewW, #msNewH{width:62px; flex:0 0 auto;}
.ms-x-sep{color:var(--muted); font-size:12px;}
.ms-unit{font-size:11.5px; color:var(--muted); margin-right:3px;}
#msAdd{border:0; border-radius:8px; background:#0b3d39; color:#fff; font-size:12.5px; font-weight:700;
  padding:8px 13px; cursor:pointer; font-family:inherit;}
.ms-err{font-size:11.5px; color:#c0392b; margin:7px 0 0;}
.ms-go{width:100%;}
.ms-go:disabled{opacity:.5; cursor:not-allowed;}
.ms-note{font-size:11.5px; color:#8a95a3; line-height:1.6; margin:12px 0 0;}

/* ===== 파일명 규칙 · 이름표 ===== */
.nm-box{background:#f6f9f9; border-radius:12px; padding:12px 13px; margin-bottom:12px;}
.nm-head{font-size:12px; font-weight:700; color:var(--muted); line-height:1.5; margin-bottom:9px;}
.nm-seg{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:10px;}
.nm-seg button{border:1.5px solid #dde5e3; background:#fff; border-radius:9px; padding:7px 4px;
  font-size:11.5px; font-weight:700; color:#6b7a77; font-family:inherit; cursor:pointer; transition:.12s;}
.nm-seg button:hover{border-color:#9fd3cc;}
.nm-seg button.active{border-color:var(--brand); background:#eaf7f5; color:var(--brand-d);}
.nm-chk{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); margin:5px 0;}
.nm-band-hint{font-size:11px; color:var(--muted); line-height:1.55; margin:2px 0 8px 24px;}
.nm-preview{display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px solid #e3ebe9; padding-top:9px;}
.nm-preview>span{font-size:11.5px; font-weight:700; color:var(--muted); flex:0 0 auto;}
.nm-ex{font-size:11.5px; color:var(--brand-d); background:#fff; border:1px solid #d7e6e3;
  border-radius:7px; padding:5px 9px; word-break:break-all; font-family:ui-monospace,monospace;}

/* ===== 비즈니스 탭 ===== */
/* 탭 이름이 긴 언어(스페인어 「Simulación de peinados」 등)에서는 한 줄에 안 들어간다 */
.biz-tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:26px 0 4px;}
.biz-tab{display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line);
  background:#fff; border-radius:22px; padding:9px 20px; font-family:inherit; font-size:14px;
  font-weight:800; color:var(--muted); cursor:pointer; transition:.14s; max-width:100%;}
@media(max-width:560px){ .biz-tab{padding:8px 14px; font-size:13px;} }
.biz-tab:hover{border-color:#9fd3cc;}
.biz-tab.active{background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 6px 18px rgba(0,180,160,.28);}
.bt-ic{font-size:15px;}

/* ===== 헤어 시뮬레이션 ===== */
.sl-drop{position:relative; min-height:220px; display:flex; align-items:center; justify-content:center;}
.sl-drop.has{padding:12px; border-style:solid; border-color:#cfe4e0; background:#fff;}
.sl-drop.has .sl-drop-txt{display:none;}
#slPhotoBox{width:100%; display:flex; justify-content:center;}
/* 사진이 없을 때도 width:100% 를 차지해 안내문을 오른쪽으로 밀어내던 문제 */
#slPhotoBox:empty{display:none;}
.sl-photo{max-height:260px; max-width:100%; border-radius:12px; display:block;
  box-shadow:0 4px 16px rgba(30,60,90,.14);}
.sl-gender{margin-bottom:8px;}
.sl-grid{grid-template-columns:repeat(4,1fr); max-height:340px; overflow-y:auto; padding-right:3px;}
.sl-style{position:relative;}
.sl-style.loading{border-color:#7c5cff; background:#f6f3ff;}
.sl-style.loading::after{content:''; position:absolute; inset:0; border-radius:11px;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.22),transparent);
  animation:slShine 1.1s linear infinite;}
@keyframes slShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sl-pick{font-size:12.5px; font-weight:700; color:var(--brand-d); margin:6px 0 8px;}
.sl-warn{font-size:11px; color:#a1806a; background:#fdf7f1; border:1px solid #f0e2d4;
  border-radius:10px; padding:9px 11px; line-height:1.6; margin:12px 0 0;}
.sl-res-head{display:flex; align-items:baseline; gap:9px; margin:18px 0 10px;
  font-size:13.5px; font-weight:800; color:#0b3d39;}
.sl-res-hint{font-size:11.5px; font-weight:500; color:var(--muted);}
.sl-results{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:11px;}
.sl-card{border:1.5px solid var(--line); border-radius:13px; overflow:hidden; background:#fff;
  cursor:pointer; transition:.14s;}
.sl-card:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,60,90,.13);}
.sl-card img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#eef2f4;}
.sl-cap{font-size:11.5px; font-weight:700; color:#5a6a67; text-align:center; padding:7px 4px;}
.sl-orig{border-color:#cfd8de; cursor:default;}
.sl-orig:hover{transform:none; box-shadow:none; border-color:#cfd8de;}
.sl-orig .sl-cap{color:var(--muted);}
/* 비교 모달 */
.sl-cmp{position:fixed; inset:0; background:rgba(11,61,57,.62); display:flex; align-items:center;
  justify-content:center; z-index:1300; padding:18px;}
.sl-cmp-box{position:relative; background:#fff; border-radius:18px; width:100%; max-width:660px;
  max-height:92vh; overflow-y:auto; padding:22px 20px; box-shadow:0 20px 60px rgba(0,0,0,.34); text-align:center;}
.sl-cmp-x{position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:15px; color:#889; cursor:pointer;}
.sl-cmp-name{font-size:17px; font-weight:800; color:#0b3d39; margin-bottom:14px;}
.sl-cmp-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
.sl-cmp-pair figure{margin:0;}
.sl-cmp-pair img{width:100%; border-radius:12px; display:block; background:#eef2f4;}
.sl-cmp-pair figcaption{font-size:12.5px; font-weight:700; color:var(--muted); margin-top:7px;}

/* 헤어 시뮬 스타일 선택 — 그림만 크게(이름 없음) */
.sl-grid{grid-template-columns:repeat(4,1fr); max-height:560px;}
/* 성별·보기방식 두 세그먼트를 한 줄에 */
.sl-opts{display:flex; gap:8px; align-items:stretch; margin-bottom:8px;}
/* 세그먼트는 글자 길이에 비례해 늘고, 그 안의 두 버튼은 반씩 똑같이 나눠 갖는다.
   버튼이 내용 폭만 차지하면 늘어난 칸에 빈 공간이 남아 한쪽으로 쏠려 보인다. */
.sl-opts .seg{flex:1 1 auto; min-width:0; margin-bottom:0;}
.sl-opts .seg button{flex:1 1 0; min-width:0; padding:7px 6px; white-space:nowrap; text-align:center;}
/* 맞춤 조합 슬라이더 */
.sl-mix{background:#f6fafb; border:1px solid var(--line); border-radius:12px;
  padding:12px 12px 10px; margin-bottom:10px;}
.sl-mix-h{display:block; font-size:13px; font-weight:800; color:var(--brand-d); margin-bottom:9px;}
.sl-sld{display:grid; grid-template-columns:52px 1fr 84px; align-items:center; gap:8px; margin-bottom:7px;}
.sl-sld > span{font-size:12px; font-weight:700; color:var(--muted);}
.sl-sld input[type=range]{width:100%; accent-color:var(--brand); margin:0;}
.sl-sld em{font-style:normal; font-size:11.5px; font-weight:700; color:var(--ink);
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sl-sld.off{opacity:.38;}
.sl-mix-add{width:100%; margin-top:6px; padding:8px 12px; font-size:13px;}
.sl-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.sl-chip{position:relative; display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--line); background:#fff; border-radius:20px;
  padding:6px 8px 6px 12px; cursor:pointer; transition:.15s; max-width:100%;}
.sl-chip b{font-size:11.5px; font-weight:700; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sl-chip.active{border-color:var(--brand); background:#f0faf8;}
.sl-chip.done b::after{content:' ✓'; color:var(--brand-d);}
.sl-chip.loading{opacity:.5;}
.sl-chip-x{border:0; background:transparent; color:#9ab; font-size:11px; line-height:1;
  cursor:pointer; padding:2px 3px; flex:0 0 auto;}
.sl-chip-x:hover{color:#e5484d;}

/* 이름 모드 — 글자가 들어가야 하므로 칸을 넓히고 정사각형 제약을 푼다 */
.sl-grid.names{grid-template-columns:repeat(2,1fr);}
.sl-grid.names .sl-style{padding:0;}
.sl-name{display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:44px; padding:9px 8px; font-size:12.5px; font-weight:700; line-height:1.35;
  color:var(--ink); word-break:keep-all;}
.sl-style{padding:5px;}
.sl-ico{width:100%; height:auto; aspect-ratio:1;}
.sl-ico svg{width:100%; height:100%; display:block;}
.sl-style.active{box-shadow:0 0 0 2px var(--brand) inset;}
@media(max-width:900px){ .sl-grid{grid-template-columns:repeat(5,1fr);} }

/* 옆모습 각도 전환 */
.sl-cmp-b{position:relative;}
.sl-cmp-load{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.72); border-radius:12px;}
.sl-ang-wrap{border-top:1px solid var(--line); padding-top:14px; margin-bottom:14px;}
.sl-ang-head{font-size:13px; font-weight:800; color:#0b3d39; margin-bottom:9px;}
.sl-ang{display:grid; grid-template-columns:repeat(3,1fr); gap:7px;}
.sl-ang button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px;
  border:1.5px solid #e2e8e6; border-radius:11px; background:#fff; color:#6b7a77;
  font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; transition:.13s;}
.sl-ang button:hover{border-color:#9fd3cc;}
.sl-ang button.active{border-color:var(--brand); background:#f1faf8; color:var(--brand-d);}
.sl-ang .dir-ic{font-size:17px; line-height:1;}
.sl-ang-hint{font-size:11.5px; color:var(--muted); line-height:1.55; margin:9px 0 0;}

/* ---- PayPal 결제창 ---- */
.pp-ov{position:fixed;inset:0;background:rgba(10,30,28,.55);display:flex;align-items:center;
  justify-content:center;z-index:9999;padding:18px}
.pp-card{background:#fff;border-radius:16px;padding:22px 20px 18px;width:min(380px,100%);
  position:relative;box-shadow:0 18px 50px rgba(0,0,0,.25);max-height:90vh;overflow:auto}
.pp-x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:17px;
  color:#8a9a97;cursor:pointer;line-height:1;padding:4px}
.pp-t{margin:0 0 4px;font-weight:800;font-size:17px;color:#0b3d39;padding-right:22px}
.pp-p{margin:0 0 16px;font-size:14px;color:#667}
.pp-msg{margin:10px 0 0;font-size:13px;min-height:18px;text-align:center}
.pp-oid{display:inline-block;margin-top:6px;font-family:ui-monospace,Menlo,monospace;
  font-size:12px;background:#f3f5f6;color:#334;padding:3px 8px;border-radius:6px;user-select:all}

/* ---- 결제 완료 팝업 ---- */
.paid-card{text-align:center}
.paid-ic{font-size:40px;line-height:1;margin:2px 0 10px}
.paid-card .pp-t{padding-right:0;font-size:19px}
.paid-card .pp-p{margin-bottom:18px}
.paid-order{margin:-8px 0 16px;font-size:12.5px;color:#667}
.paid-order code{display:inline-block;margin-top:4px;padding:3px 8px;border-radius:6px;background:#eef4f3;color:#0b3d39;font-family:ui-monospace,Consolas,monospace;font-size:13px;user-select:all}
.paid-card .btn{display:block;width:100%;margin-top:8px}

/* ---- 단계 안내 ---- */
/* 아직 차례가 아닌 곳. 「못 쓴다」가 아니라 「지금은 아니다」로만 보이게 한다 —
   AI 변환을 건너뛰고 바로 받는 길이 막히면 안 되므로 잠그지 않는다.
   마우스를 올리면 원래 색으로 돌아와 눌러도 된다는 걸 알려준다. */
.not-yet{opacity:.45; filter:saturate(.25); transition:opacity .18s, filter .18s}
.not-yet:hover, .not-yet:focus-within{opacity:1; filter:none}

/* 사진은 올렸는데 동의가 비어 있는 동안만 — 지금 눌러야 할 곳 */
.consent.need{border-color:#e05b4a; background:#fff6f3;
  animation:pmNeed 1.5s ease-in-out infinite}
.consent.need input{outline:2px solid #e05b4a; outline-offset:2px}
@keyframes pmNeed{
  0%,100%{box-shadow:0 0 0 0 rgba(224,91,74,.45)}
  50%    {box-shadow:0 0 0 7px rgba(224,91,74,0)}
}

/* 동의까지 끝났으면 다음은 변환 버튼 */
.btn-ai.next:not(:disabled){animation:pmNext 1.9s ease-in-out infinite}
@keyframes pmNext{
  0%,100%{box-shadow:0 0 0 0 rgba(124,92,225,.5)}
  50%    {box-shadow:0 0 0 9px rgba(124,92,225,0)}
}

/* 움직임을 줄여 달라고 한 사람에게는 깜빡이지 않고 테두리로만 알린다 */
@media (prefers-reduced-motion:reduce){
  .consent.need, .btn-ai.next:not(:disabled){animation:none}
  .consent.need{box-shadow:0 0 0 3px rgba(224,91,74,.3)}
}
.share-link{width:100%; margin-top:10px}

/* ---- 카카오페이 버튼 ---- */
.kp-wrap{margin-top:10px}
.kp-btn{width:100%; padding:13px 14px; border:0; border-radius:10px; background:#FEE500;
  color:#191600; font-weight:800; font-size:15px; cursor:pointer; font-family:inherit}
.kp-btn:hover:not(:disabled){filter:brightness(.97)}
.kp-btn:disabled{opacity:.6; cursor:default}
.kp-test{margin:8px 0 0; font-size:12px; color:#8a9a97; text-align:center}
.pay-alt{display:block; width:100%; margin-top:12px; padding:9px; border:0; background:none;
  color:#5a7d78; font-size:13px; text-decoration:underline; cursor:pointer; font-family:inherit}
.pay-alt:hover{color:#00877d}
.ac-use{margin-top:10px; padding:9px 11px; background:#f2f8f7; border-radius:9px;
  font-size:12px; line-height:1.55; color:#5a7d78}
.cu-wrap{margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid #eef1f3}
.cu-btn{width:100%; padding:13px 14px; border:0; border-radius:10px; background:#00877d;
  color:#fff; font-weight:800; font-size:15px; cursor:pointer; font-family:inherit}
.cu-btn:hover:not(:disabled){background:#00756c}
.cu-btn:disabled{opacity:.6; cursor:default}
.cu-note{margin:7px 0 0; font-size:12px; color:#8a9a97; text-align:center}
/* 비즈니스에서 나오는 상태 — 들어갈 때와 다르게 보이게 */
.nav-biz.out{background:rgba(255,255,255,.28)}
/* 로고·상호가 홈 버튼이라는 걸 알 수 있게 */
.logo.mascot[role="button"], .home-link[role="button"]{cursor:pointer}
.home-link[role="button"]:hover .brand-name{text-decoration:underline}