/* gipp(깊) 원래 색: 짙은 갈색 #503723, 빨강 #e24e3f, 크림 #f4e9e6. 갈색 바탕(2026-10-29 사용자 확정). */
:root{
  --page:#ece4dd;--paper:#faf6f2;--white:#fff;--ink:#2b211a;--muted:#7a6a5f;--line:#e8ddd3;
  --brown:#503723;--brown-deep:#3a281a;--cream:#f4e9e6;--red:#e24e3f;--red-strong:#d43d2e;--red-text:#c4392b;
  --dark-bg:#503723;--dark-fg:#fbf3ef;--dark-muted:#dcc7b9;--mark:rgba(226,78,63,.92);--chip:#ffcfc4;
  --body-width:880px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:'Pretendard Variable',Pretendard,GInter,GNotoKR,'Malgun Gothic',sans-serif;letter-spacing:-.035em;line-height:1.65;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #3b91b0;outline-offset:4px}
[hidden]{display:none!important}

.review-only,.draft-note{display:inline-block;font-size:12px;font-weight:700;color:#7a4b00;background:#ffe9a8;border-radius:3px;padding:2px 7px;letter-spacing:-.01em}
body.clean .review-only{display:none}

main{max-width:var(--body-width);margin:auto;background:var(--paper);box-shadow:0 0 0 1px #e0d6cd}
/* 세로로 읽는 페이지: 화면 높이를 강제하지 않고, 이어지는 메시지는 한 구간에 붙인 뒤 간격(.gap)으로 나눈다(2026-11-01 사용자 “여백이 너무 많아… 의미있는 건 붙이고”) */
.band{padding:56px 16px}
.gap{height:56px}
.scene{width:100%;max-width:600px;margin:auto}
.dark{background:var(--dark-bg);color:var(--dark-fg)}
.white{background:var(--white)}
.center{text-align:center}
h1{font-size:40px;line-height:1.18;font-weight:900;letter-spacing:-.06em}
h2{font-size:30px;line-height:1.3;font-weight:850;letter-spacing:-.055em}
em{font-style:normal;background:linear-gradient(transparent 60%,var(--mark) 60%,var(--mark) 94%,transparent 94%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{font-size:17px;line-height:1.7;margin-top:18px;color:var(--muted)}
.dark .lead{color:var(--dark-muted)}
.small{font-size:13px;line-height:1.6;color:var(--muted)}
.dark .small{color:var(--dark-muted)}
.turn{font-size:26px;line-height:1.42;font-weight:900;letter-spacing:-.05em;text-align:center}
.turn+.lead{margin-top:22px}

.btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:440px;min-height:56px;margin:24px auto 0;padding:15px 20px;border:0;border-radius:6px;background:var(--red-strong);color:#fff;font-size:18px;font-weight:800;text-align:left}
.btn span{font-size:22px}
.btn:hover{filter:brightness(1.06)}

/* 첫 화면: AI 말투 */
.band.first{padding-top:32px}
.map-frame{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.author{font-size:13px;line-height:1.6;color:var(--dark-muted);margin-top:14px}

/* 채팅 화면 그림: 채팅창 AI 답과 AI 에이전트의 말 */
.shot{margin-top:22px;background:#fff;border:1px solid #d9d2cb;border-radius:12px;box-shadow:0 12px 30px rgba(43,33,26,.14);overflow:hidden;text-align:left;color:#1f1f1f;letter-spacing:-.02em}
.shot-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f3f1ef;border-bottom:1px solid #e6e1dc;font-size:12px;font-weight:600;color:#8a7f77}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#d8d2cc;display:inline-block}
.shot-bar b{margin-left:6px;font-weight:700}
.shot-body{padding:14px 12px 16px;display:grid;gap:9px}
.msg{max-width:90%;font-size:14.5px;line-height:1.55;padding:9px 13px;border-radius:16px}
.msg.me{justify-self:end;background:#3a3a3a;color:#fff;border-bottom-right-radius:4px}
.msg.ai{justify-self:start;background:#f1f1f1;border-bottom-left-radius:4px}
.msg.ai p+p,.msg.ai .mail+p{margin-top:6px}
.msg .mail{display:block;margin-top:6px;padding:8px 11px;background:#fff;border:1px solid #e3e3e3;border-radius:8px}
.tic{text-decoration:underline wavy var(--red-strong);text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-skip-ink:none}
.msg.ask{justify-self:end;background:var(--red-strong);color:#fff;font-weight:800;border-bottom-right-radius:4px}
.agent .msg.ai{font-family:ui-monospace,'D2Coding',Consolas,monospace;font-size:13.5px;letter-spacing:0}
.agent .shot-body{gap:7px;padding:12px 11px 13px}
.agent .msg{padding:7px 11px}
.agent .msg.ai::before{content:'●';color:#d97757;margin-right:7px}

/* 내가 한 말과 AI가 짠 코드: 작은 줄 + 큰 숫자 두 칸 */
.versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:16px}
.versus div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 8px}
.versus span{display:block;font-size:13.5px;font-weight:700;color:var(--muted)}
.versus strong{display:block;font-size:30px;line-height:1.2;font-weight:900;letter-spacing:-.05em;margin-top:2px}
.versus .big strong{color:var(--red-text)}
.versus i{font-style:normal;font-size:22px;font-weight:900;color:#cdbdb0}
/* 개발자가 하던 일 넷 */
.jobs{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
.jobs li{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 12px 11px 36px;font-size:15.5px;font-weight:800;position:relative}
.jobs li::before{content:"";position:absolute;left:13px;top:50%;width:10px;height:6px;margin-top:-5px;border-left:2.5px solid var(--red-strong);border-bottom:2.5px solid var(--red-strong);transform:rotate(-45deg)}
.jobs-note{font-size:14px;color:var(--muted);margin-top:10px}

/* 고객의 말 */
.voices{margin-top:20px;display:grid;gap:9px;text-align:left}
.voice{background:#fff;border:1px solid var(--line);border-radius:14px;border-top-left-radius:4px;padding:11px 15px;font-size:15.5px;line-height:1.6;max-width:92%}
.voice:nth-child(2){justify-self:end;border-top-left-radius:14px;border-top-right-radius:4px}
.dark .voice{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--dark-fg)}

/* 피드백 루프 그림: 단계 다섯과 오른쪽 되돌림 선 */
.loop{text-align:left}
.loop-steps{display:grid;gap:14px;counter-reset:st;padding-right:34px}
.cycle{position:relative;display:grid;gap:14px;margin-right:-34px;padding-right:34px}
.cycle::after{content:"";position:absolute;right:6px;top:26px;bottom:26px;width:20px;border:2px solid var(--red-strong);border-left:0;border-radius:0 14px 14px 0}
.cycle::before{content:"";position:absolute;right:24px;top:20px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid var(--red-strong)}
.step{position:relative;counter-increment:st;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px 11px 46px;min-width:0}
.step::before{content:counter(st);position:absolute;left:11px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--brown);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.step:not(:last-child)::after{content:"";position:absolute;left:19px;bottom:-14px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #cdbdb0}
.step-who{display:inline-block;font-size:13px;font-weight:800;color:var(--red-text);margin-right:6px}
.step-who.top{display:block;margin:0 0 3px}
.step p{font-size:14.5px;line-height:1.55}
.say-bubble{display:inline-block;background:#3a3a3a;color:#fff;border-radius:14px;border-bottom-left-radius:4px;padding:8px 12px;font-weight:700}
.file{margin-top:7px;background:#fff;border:1px solid #d9d2cb;border-radius:8px;padding:7px 10px;font-size:13px;line-height:1.5;display:grid;gap:2px}
.file b{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--brown);margin-bottom:2px}
.file .hit{color:var(--red-text);font-weight:700}
.file small{color:var(--muted);font-size:12px}
.piles{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.piles span{font-size:13px;font-weight:750;line-height:1.3;padding:5px 9px;border-radius:6px;background:#fff;border:1px solid #d9d2cb}
.piles b{color:var(--red-text);font-weight:900}
.loop-back{margin-top:12px;padding-right:4px;text-align:right;font-size:14px;font-weight:800;color:var(--red-text)}

/* 강사 이력: 작은 줄, 큰 결과, 그림 */
.cred-sub{font-size:16px;font-weight:600;color:var(--muted)}
.cred-big{font-size:28px;line-height:1.35;font-weight:900;letter-spacing:-.05em;margin-top:4px}
.cred-img{width:100%;height:auto;margin:20px auto 0}
.cred-img.books{max-width:420px}
.cred-img.framed{border:1px solid var(--line);border-radius:8px}
.cred-note{font-size:17px;font-weight:800;color:var(--red-text);margin-top:10px}
.cred-note+.cred-list{max-width:300px;margin-top:10px}
.cred-list{max-width:380px;margin:16px auto 0;display:grid;gap:6px;text-align:left}
.cred-list li{font-size:15px;line-height:1.55;padding-left:22px;position:relative}
.cred-list li::before{content:'';position:absolute;left:3px;top:.55em;width:10px;height:6px;border-left:2.5px solid var(--red-strong);border-bottom:2.5px solid var(--red-strong);transform:rotate(-45deg)}
/* 강의 이력 목록: 4단 목록을 2단씩 두 그림으로 나누고, 눈에 띄는 두 줄을 원본에서 잘라 그 줄 위에 바로 얹는다(아래 글은 가려도 된다) */
.lects{margin-top:20px;display:grid;gap:10px}
.lecture-list{position:relative;border:1px solid var(--line);border-radius:8px;background:#ebe7e4}
.lecture-list>img{border-radius:8px}
.lens{position:absolute;left:4%;width:92%;transform:translateY(-50%);background:#ebe7e4;border:2px solid var(--red-strong);border-radius:6px;padding:5px 9px;box-shadow:0 10px 24px rgba(43,33,26,.3);text-align:left}
.lens span{display:block;font-size:14px;line-height:1.55;padding:2px 0 2px 16px;text-indent:-16px;color:#3e3a37;letter-spacing:-.02em}
.lens span::before{content:"•";display:inline-block;width:16px;text-indent:0;color:#3e3a37}
.lects.ready .lens{opacity:0;transform:translateY(-50%) scale(.82);transition:opacity .45s ease,transform .45s ease}
.lects.ready .lens.on{opacity:1;transform:translateY(-50%) scale(1)}


/* 달라지는 회사 생활: 휴대폰에서도 두 칸 */
.life{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.life-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.life-sub{font-size:13px;line-height:1.45;font-weight:600;color:var(--dark-muted)}
.life-big{font-size:18px;font-weight:900;letter-spacing:-.05em;line-height:1.4;margin-top:4px}

/* 올해 나온 기사: 실제 기사 화면을 오려 붙인 모양 */
.clips{margin-top:26px;display:grid;padding:0 6px}
.clip{position:relative;background:#fff;padding:10px 10px 8px;border:1px solid #e6dfd8;border-radius:2px;box-shadow:0 10px 24px rgba(43,33,26,.16)}
.clip a{display:block}
.clip:nth-child(1){transform:rotate(-1.4deg)}
.clip:nth-child(2){transform:rotate(1.3deg);margin-top:-8px;z-index:1;width:94%;justify-self:end}
.clip:nth-child(3){transform:rotate(-.7deg);margin-top:-6px;z-index:2}
.clip-note{margin-top:22px;font-size:15.5px;line-height:1.6;font-weight:700}
.clip-note b{color:var(--red-text)}

/* 연봉과 시간: 작은 줄 + 큰 결과 */
.pay{margin-top:20px;display:grid;gap:8px}
.pay-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px 10px;text-align:center}
.pay-sub{font-size:14.5px;font-weight:600;color:var(--muted);line-height:1.45}
.pay-big{font-size:20px;font-weight:900;letter-spacing:-.05em;line-height:1.35;margin-top:3px;color:var(--ink)}
.pay-src{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}

/* 불을 켜는 그림. 위 그림 한 장과 같은 틀 */
.spotmap{position:relative;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.spotmap img{transition:opacity .3s}
.spotmap.lit img{opacity:.2}
.spot{position:absolute;border:2px solid var(--red-strong);border-radius:5px;background-image:url(/assets/lp/ai-it-map-s16.png);background-repeat:no-repeat;background-origin:border-box;opacity:0;transition:opacity .3s;pointer-events:none}
.spot.on{opacity:1}
.picker{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:24px}
.picker button{min-height:42px;border:1.5px solid #cdbdb0;border-radius:99px;background:#fff;font-size:14px;font-weight:750;padding:6px 12px}
.picker button[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:#fff}

/* 강사의 처음 */
.story{font-size:16px;line-height:1.75;text-align:left;margin-bottom:26px}

/* 강사 */
.portrait{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 14px}
.who{font-size:15px;font-weight:700;color:var(--red-text);margin-bottom:12px}

/* 배울 내용 */
.course{margin-top:20px;display:grid;gap:6px;text-align:left;counter-reset:q}
.course li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.course li::before{counter-increment:q;content:counter(q);width:26px;height:26px;border-radius:50%;background:var(--brown);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.course b{display:block;font-size:14.5px;line-height:1.42}
.course small{display:block;font-size:12px;line-height:1.4;color:var(--red-text);font-weight:700;margin-top:2px}

/* 강의를 들은 뒤: X만 했는데 Y */
.after{margin-top:24px;display:grid;gap:10px}
.after-card{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:12px;padding:16px 14px}
.after-sub{font-size:14.5px;line-height:1.5;color:var(--dark-muted);font-weight:600}
.after-big{font-size:22px;line-height:1.38;font-weight:900;letter-spacing:-.05em;margin-top:4px}

/* 가격과 예약 */
.price-card{margin-top:26px;border:2px solid var(--brown);border-radius:12px;padding:20px 18px;text-align:left;background:#fff}
.price-name{font-size:14px;font-weight:700;color:var(--muted);line-height:1.5}
.price-row{display:flex;align-items:baseline;gap:10px;margin:10px 0 14px;flex-wrap:wrap}
.price-row span{font-size:14px;font-weight:800;color:var(--red-text)}
.price-row strong{font-size:38px;font-weight:900;letter-spacing:-.05em;color:var(--ink)}
.price-row strong small{font-size:20px;margin-left:2px}
.price-list{display:flex;align-items:baseline;gap:10px;margin:12px 0 0;font-size:15px;font-weight:700;color:var(--muted)}
.price-list s{font-size:18px}
.price-row.presale{margin-top:4px}
.price-note{font-size:14px;line-height:1.6;color:var(--ink);margin:0 0 14px}
.video-slot{margin:14px 0 4px;border:2px dashed var(--muted);border-radius:12px;padding:28px 14px;text-align:center;font-size:14px;color:var(--muted)}
.includes{display:grid;gap:7px;border-top:1px solid var(--line);padding-top:14px}
.includes li{font-size:15px;padding-left:22px;position:relative}
.includes li::before{content:'';position:absolute;left:3px;top:.55em;width:10px;height:6px;border-left:2.5px solid var(--red-strong);border-bottom:2.5px solid var(--red-strong);transform:rotate(-45deg)}
.note-box{margin-top:18px;font-size:14px;line-height:1.65;color:var(--muted);background:var(--paper);border-radius:8px;padding:12px 13px;text-align:left}
.gift{margin-top:24px;text-align:left;border:1.5px dashed #cdbdb0;border-radius:12px;padding:16px 16px;background:var(--paper)}
.gift ul{display:grid;gap:7px}
.gift li{font-size:16px;font-weight:700;padding-left:14px;position:relative}
.gift li::before{content:'';position:absolute;left:2px;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--red-strong)}
.gift p{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.6}
.form{margin-top:22px;text-align:left}
.form label.field{display:block;font-size:14px;font-weight:800;margin-bottom:6px}
.form input[type="tel"]{width:100%;height:52px;border:1.5px solid #cdbdb0;border-radius:6px;padding:0 14px;font-size:17px;background:#fff}
.form input[type="tel"]:focus{border-color:var(--brown);outline:none;box-shadow:0 0 0 3px rgba(80,55,35,.15)}
.agree{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.55;margin-top:12px}
.agree input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brown);flex:none}
.form .btn{max-width:none;margin-top:16px}
.form-error{font-size:13px;color:var(--red-text);margin-top:8px;font-weight:700}
.done{margin-top:22px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 18px}
.done h3{font-size:22px;font-weight:900;letter-spacing:-.05em}
.done p{font-size:15px;color:var(--muted);margin-top:6px}
.choices{display:grid;gap:8px;margin-top:14px}
.choices button{min-height:46px;border:1.5px solid #cdbdb0;border-radius:6px;background:#fff;font-size:15px;font-weight:700;text-align:left;padding:10px 13px}
.choices button[aria-pressed="true"]{border-color:var(--brown);background:var(--brown);color:#fff}

/* 질문 */
.faq{margin-top:26px;text-align:left;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-size:16px;font-weight:800;padding:17px 32px 17px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:13px;font-size:22px;font-weight:500;color:var(--muted)}
.faq details[open] summary::after{content:'−'}
.faq details p{font-size:15px;line-height:1.7;color:var(--muted);padding:0 4px 18px 0}

.foot{padding:28px 16px 40px;text-align:center;font-size:12px;color:var(--muted);background:var(--paper)}

@media (min-width:720px){
  .band{padding:88px 40px}
  .gap{height:80px}
  .band.first{padding-top:56px}
  .scene{max-width:680px}
  h1{font-size:64px}
  h2{font-size:44px}
  .lead{font-size:20px}
  .author{font-size:14px}
  .turn{font-size:36px}
  .msg{font-size:16px}
  .agent .msg.ai{font-size:15px}
  .life{gap:12px}
  .life-card{padding:20px 14px}
  .life-sub{font-size:15px}
  .life-big{font-size:24px}
  .cred-big{font-size:36px}
  .step p{font-size:16px}
  .pay{grid-template-columns:1fr 1fr}
  .clips{max-width:500px;margin-left:auto;margin-right:auto}
  .after-big{font-size:26px}
}