:root{
  --bg:#FCFBF9;
  --text:#1F1B1C;
  --sub:#6F6668;
  --line:#E7E2DC;
  --wine:#4A1D29;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip;word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0}
img{display:block;max-width:100%}
a{color:var(--wine);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(74,29,41,.35)}
a:hover{text-decoration-color:var(--wine)}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}

.page{max-width:720px;margin:0 auto;padding:40px 24px 64px}

/* top */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:72px}
.home{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-weight:600}
.home img{width:auto;height:20px}
.top nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:6px 22px;font-size:15px}
.top nav .app{font-size:17px}
.top nav .sep{width:1px;height:12px;background:var(--line);align-self:center}
@media (max-width:560px){.top{flex-direction:column;align-items:flex-start;margin-bottom:48px}.top nav{justify-content:flex-start;gap:6px 18px}}
.top nav a{color:var(--sub);text-decoration:none}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--text)}

/* type */
h1{font-size:28px;line-height:1.4;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
h2{font-size:15px;font-weight:600;color:var(--sub);margin:56px 0 14px}
h3{font-size:16px;font-weight:600}
p+p{margin-top:12px}
.sub{color:var(--sub)}
.small{font-size:14px}
.app{font-family:var(--serif);font-style:italic;font-weight:800;letter-spacing:-.01em}
h1.app{font-size:44px;line-height:1.1;margin-bottom:10px}

/* intro with logo */
.intro img{width:88px;height:88px;border-radius:20px;margin-bottom:28px}

/* project list */
.list{list-style:none;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.list a{display:grid;grid-template-columns:120px 1fr auto;gap:4px 20px;align-items:baseline;padding:16px 0;text-decoration:none;color:var(--text)}
.list .app{font-size:20px;color:var(--wine)}
.list .meta{font-size:14px;color:var(--sub);white-space:nowrap}
.list a:hover .what{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sub)}
@media (max-width:560px){.list a{grid-template-columns:1fr}.list .meta{white-space:normal}}

/* facts row */
.facts{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14px;color:var(--sub);margin-top:4px}
.facts b{font-weight:500;color:var(--text)}

/* plain lists */
.bullets{list-style:none}
.bullets li{position:relative;padding-left:16px}
.bullets li+li{margin-top:6px}
.bullets li::before{content:"";position:absolute;left:2px;top:.85em;width:6px;height:1px;background:var(--sub)}
.steps{list-style:decimal;padding-left:22px}
.steps li{padding-left:4px}
.steps li+li{margin-top:4px}
.steps li::marker{color:var(--sub);font-size:14px}
.steps span{color:var(--sub)}

/* comparison */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
th{font-weight:600;font-size:14px;color:var(--sub)}
td:first-child{color:var(--sub);width:34%}

/* log */
.log{list-style:none}
.log li{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:6px 0}
.log time{font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}

.note{margin-top:20px;padding:14px 16px;background:#F4F1EC;border-radius:8px;font-size:15px;color:var(--sub)}

/* terms */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.tabs button{appearance:none;border:1px solid var(--line);background:transparent;border-radius:6px;padding:6px 12px;font:inherit;font-size:14px;color:var(--sub);cursor:pointer;min-height:36px}
.tabs button:hover{color:var(--text)}
.tabs button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.doc h3{margin-top:24px}

/* footer */
.foot{margin-top:96px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--sub)}
.foot a{color:var(--sub)}

/* desktop: use the width */
.page{max-width:1280px;padding:40px clamp(24px,5vw,72px) 64px}
.lead-col .facts+p{margin-top:28px}
@media (max-width:959px){.page{max-width:720px}.body-col{margin-top:0}}
@media (min-width:960px){
  body{font-size:17px}
  .top{margin-bottom:112px}
  .cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(64px,8vw,128px);align-items:start}
  .lead-col{position:sticky;top:48px}
  h1{font-size:34px}
  h1.app{font-size:72px}
  .home img{height:22px}
  .list a{grid-template-columns:150px 1fr auto;padding:22px 0}
  .list .app{font-size:24px}
  .body-col h2{margin-top:64px}
  .body-col>h2:first-child{margin-top:0}
}

/* screens: photos beside the text, scrolled sideways */
.hscroll+h2{margin-top:72px}
.hscroll{--bleed:max(24px,calc((100vw - 1280px)/2 + clamp(24px,5vw,72px)));position:relative}
.hs-stage{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;margin-right:calc(var(--bleed) * -1)}
.hs-stage::-webkit-scrollbar{display:none}
.hs-track{display:flex;align-items:flex-start;gap:24px;width:max-content;padding-right:var(--bleed);will-change:transform}
.shot{margin:0;flex:0 0 auto;scroll-snap-align:start}
.shot .frame{position:relative;overflow:hidden;background:#F1EDE7;border:1px solid var(--line)}
.shot.phone{--h:min(74vh,720px);width:calc(var(--h) * 9 / 19.5)}
.shot.phone .frame{height:var(--h);border-radius:calc(var(--h) / 18)}
.shot.web{--h:min(62vh,560px);width:calc(var(--h) * 1.6)}
.shot.web .frame{aspect-ratio:16/10;border-radius:14px}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;color:var(--sub);font-size:14px;line-height:1.5}
.ph small{font-size:12px;opacity:.75;margin-top:4px;word-break:break-all}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.shot figcaption{font-size:14px;color:var(--sub);margin-top:12px}
.hs-foot{display:flex;align-items:center;gap:16px;margin-top:20px;max-width:100%}
.hs-bar{flex:1;max-width:240px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.hs-bar span{display:block;height:100%;width:0;background:var(--text)}
.count{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.hscroll.single .hs-foot{display:none}
.hscroll.pinned .hs-stage{position:sticky;top:48px;overflow:hidden;scroll-snap-type:none}
@media (max-width:959px){
  .hscroll{margin-top:40px}
  .shot.phone{--h:min(60vh,540px)}
  .hscroll.pinned .hs-stage{margin-right:calc(var(--bleed) * -1)}
  .shot.web{--h:auto;width:86vw}
}

/* home: app sections */
.intro{max-width:720px;margin-bottom:24px}
.app-sec{border-top:1px solid var(--line);padding-top:clamp(56px,8vw,112px);margin-top:clamp(56px,8vw,112px)}
.app-sec h2.sec-name{font-size:56px;line-height:1.05;color:var(--text);margin:0 0 10px}
.sec-desc{margin:24px 0 18px;max-width:30em}
.sec-more{margin-top:28px}
.sec-title{font-size:22px;color:var(--text);margin:0 0 12px}
.app-sec .hscroll{margin-top:0}
@media (min-width:960px){.app-sec h2.sec-name{font-size:72px}}
@media (max-width:959px){.app-sec .hscroll{margin-top:32px}.app-sec h2.sec-name{font-size:48px}}

/* app logos in place of app names (Merroll, ReLogs) */
.logo-name{margin:0 0 14px;line-height:0}
.logo-name img{display:block;width:auto}
.logo-merroll img{height:40px}
.logo-relogs img{height:54px}
.app-sec .logo-name{margin-bottom:16px}
@media (min-width:960px){
  .logo-merroll img{height:52px}
  .logo-relogs img{height:70px}
}

/* 한글 앱 이름 (총대): 세리프 이탤릭 대신 Pretendard 굵게 */
.app-ko{font-weight:800;letter-spacing:-.04em;color:var(--text)}
h1.app-ko{font-size:44px;line-height:1.1;margin:0 0 10px}
@media (min-width:960px){h1.app-ko{font-size:68px}.app-sec h2.app-ko{font-size:68px}}

@media (max-width:560px){.top nav{gap:6px 14px}.top nav .app{font-size:15px}.top nav a{font-size:14px}}

/* 상단 메뉴: 앱 로고 글자만 (Merroll, ReLogs) — 글자 기준선에 맞춤 */
.top nav .nav-logo-link{display:inline-block;line-height:1;opacity:.62;transition:opacity .15s}
.top nav .nav-logo-link:hover,.top nav .nav-logo-link[aria-current="page"]{opacity:1}
.nav-logo{display:inline-block;width:auto;vertical-align:baseline}
.nl-merroll{height:13px}
.nl-relogs{height:16.5px;vertical-align:-3.7px}
@media (max-width:560px){.top nav{gap:6px 14px}.nl-merroll{height:12px}.nl-relogs{height:15px;vertical-align:-3.4px}}

/* 폰 홈: 글과 사진을 함께 고정하고 사진만 옆으로 넘김 */
.cols.block-pinned{position:sticky}
.hscroll.blockpin .hs-stage{overflow:hidden;scroll-snap-type:none}
.cols.block-pinned.compact .bullets{display:none}
.cols.block-pinned.compact .sec-desc{margin-bottom:0}

/* 문의 페이지 */
.mailbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
.mail-addr{font-size:18px;font-weight:600;color:var(--text);text-decoration-color:var(--line);text-underline-offset:4px;padding:6px 0}
.copy{appearance:none;font:inherit;font-size:14px;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 16px;min-height:40px;cursor:pointer}
.copy:hover{border-color:var(--sub)}
.opts{list-style:none;display:grid;gap:10px}
.opts .opt{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text);min-height:56px}
.opts .opt b{font-weight:600}
.opts .opt span{font-size:14px;color:var(--sub)}
.opts .opt:hover{border-color:var(--sub)}

/* ---------- 모바일 편의 ---------- */
@media (max-width:959px){
  .page{padding-top:16px}
  /* 머리글: 로고 줄은 스크롤과 함께 사라지고 메뉴 줄만 화면 위에 붙어 있음 */
  .top{position:sticky;top:-40px;z-index:20;flex-direction:column;align-items:stretch;gap:4px;
    margin:0 -24px 40px;padding:10px 24px 0;background:rgba(252,251,249,.94);
    -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
    box-shadow:0 1px 0 var(--line)}
  .home{height:26px}
  .top nav{flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:0;margin:0 -10px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;white-space:nowrap;flex:0 0 auto}
  .top nav .nav-logo-link{display:inline-flex}
  .top nav .sep{flex:0 0 1px;margin:0 4px}
  /* 누르기 쉬운 크기 */
  .sec-more a,.foot a{display:inline-block;padding:10px 0}
  .foot{margin-top:72px}
  .tabs button{min-height:44px;padding:8px 14px}
  .mail-addr{font-size:17px;word-break:break-all}
  html{scroll-padding-top:64px}
}
@media (max-width:959px) and (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
#doc{margin-top:28px}