:root {
  --ink:#172e2b;
  --muted:#687d77;
  --mint:#dff8ed;
  --green:#16795e;
  --line:#dfe7e1;
  --paper:#f9fbf7
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif;
  word-break:keep-all
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #39a17f;
  outline-offset:5px
}
.wrap {
  max-width:1160px;
  margin:auto;
  padding:0 36px
}
header {
  height:88px;
  position:sticky;
  top:0;
  z-index:20;
  background:#f9fbf7ed;
  backdrop-filter:blur(14px);
  border-bottom:1px solid #172e2b0b
}
.nav {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  font-size:22px;
  font-weight:750;
  letter-spacing:-1px
}
.mark {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:34px;
  height:34px;
  background:var(--ink);
  border-radius:11px
}
.mark i {
  width:3px;
  background:#b2f1d7;
  border-radius:4px;
  height:12px
}
.mark i:nth-child(2) {
  height:21px
}
.mark i:nth-child(3) {
  height:16px
}
nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:14px
}
nav>a:not(.small) {
  color:#5b6b65
}
.small {
  background:var(--ink);
  color:white;
  padding:12px 20px;
  border-radius:30px;
  font-size:13px
}
.hero {
  background:var(--mint);
  overflow:hidden;
  position:relative
}
.hero-grid {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  align-items:center;
  min-height:730px;
  gap:30px
}
.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:9px
}
.dot {
  width:7px;
  height:7px;
  background:#208461;
  border-radius:50%
}
h1 {
  font-size:66px;
  line-height:1.19;
  letter-spacing:-4px;
  font-weight:750;
  margin:25px 0
}
h1 em {
  font-style:normal;
  color:var(--green)
}
.lead {
  font-size:18px;
  line-height:1.9;
  color:#57736a;
  max-width:410px
}
.actions {
  display:flex;
  align-items:center;
  gap:23px;
  margin-top:31px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  background:var(--ink);
  color:white;
  border:0;
  border-radius:100px;
  padding:18px 25px;
  font-size:15px;
  font-weight:600;
  transition:transform .2s,background .2s
}
.btn:hover {
  background:#285347;
  transform:translateY(-2px)
}
.text-link {
  font-size:14px;
  border-bottom:1px solid #799b8e;
  padding:8px 0
}
.micro {
  font-size:11px;
  color:#6e887e;
  margin-top:17px
}
.hero-art {
  position:relative;
  display:flex;
  justify-content:center;
  padding:52px 0 55px
}
.orbit {
  position:absolute;
  border:1px solid #bddfcd;
  border-radius:50%;
  width:510px;
  height:510px;
  top:90px
}
.orbit:after {
  content:'';
  position:absolute;
  inset:38px;
  border:1px solid #c9e8d7;
  border-radius:50%
}
.phone {
  width:270px;
  height:555px;
  background:#fcfdfb;
  border:7px solid #203832;
  box-shadow:0 30px 60px #224b3933,0 0 0 2px #6b877e;
  border-radius:41px;
  position:relative;
  z-index:2;
  overflow:hidden;
  transform:rotate(6deg)
}
.status {
  font-size:10px;
  padding:15px 18px;
  display:flex;
  justify-content:space-between
}
.camera {
  position:absolute;
  top:10px;
  left:calc(50% - 4px);
  width:8px;
  height:8px;
  border-radius:50%;
  background:#172e2b
}
.screen {
  padding:15px 20px
}
.screen-head {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.screen-head span {
  font-size:11px;
  color:#7d8d83
}
.screen h3 {
  font-size:20px;
  margin:12px 0 22px;
  letter-spacing:-1px
}
.screen h3 small {
  display:block;
  color:#8b9b92;
  font-size:11px;
  letter-spacing:0;
  font-weight:400;
  margin-top:8px
}
.app-card {
  border-radius:17px;
  background:#edf5ed;
  padding:16px
}
.card-meta {
  font-size:10px;
  display:flex;
  justify-content:space-between;
  color:#5d786b
}
.app-card h4 {
  font-size:14px;
  margin:16px 0 5px
}
.app-card p {
  font-size:11px;
  line-height:1.8;
  color:#7b8f82
}
.waves {
  height:42px;
  display:flex;
  align-items:center;
  gap:3px;
  justify-content:center;
  margin:18px 0
}
.waves i {
  display:block;
  width:3px;
  border-radius:3px;
  background:#7ea993;
  height:var(--h)
}
.time {
  font-size:10px;
  display:flex;
  justify-content:space-between;
  color:#82998c
}
.app-mini {
  padding:18px 0;
  border-bottom:1px solid #e6ece4;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px
}
.mini-icon {
  padding:10px;
  border-radius:12px;
  background:#f2f0e8;
  color:#999879
}
.app-mini small {
  display:block;
  color:#93a196;
  font-size:9px;
  margin-top:5px
}
.record {
  width:52px;
  height:52px;
  margin:22px auto 12px;
  background:#27775e;
  color:white;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:25px
}
.phone-nav {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-around;
  font-size:9px;
  padding:16px 5px 20px;
  border-top:1px solid #e8eee6;
  background:#fcfdfb;
  color:#91a297
}
.phone-nav b {
  color:#226649
}
.float {
  position:absolute;
  z-index:3;
  background:white;
  box-shadow:0 12px 35px #284d3212;
  padding:16px 20px;
  border:1px solid #e8efdf;
  border-radius:15px;
  font-size:12px
}
.float b {
  display:block;
  margin-bottom:5px;
  font-size:13px
}
.float small {
  color:#7e8d83
}
.float-one {
  left:-12px;
  top:165px;
  transform:rotate(-5deg)
}
.float-two {
  right:-13px;
  bottom:105px;
  transform:rotate(-4deg)
}
.spark {
  position:absolute;
  right:12px;
  top:60px;
  font-size:45px;
  color:#438565
}
.hero-foot {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #c8e3d5;
  padding:23px 0;
  font-size:12px;
  color:#668275
}
.hero-foot strong {
  color:var(--ink);
  font-weight:500
}
.section {
  padding:115px 0
}
.section-label {
  font-size:12px;
  letter-spacing:2px;
  color:#6c8b7d;
  font-weight:700
}
h2 {
  font-size:43px;
  line-height:1.35;
  letter-spacing:-2px;
  margin:20px 0
}
.section-desc {
  color:#79897f;
  font-size:16px;
  line-height:1.9
}
.intro-head {
  display:flex;
  justify-content:space-between;
  align-items:end
}
.intro-head .section-desc {
  max-width:320px;
  margin-bottom:8px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:55px;
  gap:48px
}
.step {
  border-top:1px solid #d6e1d7;
  padding-top:24px
}
.step-no {
  font-size:12px;
  color:#8ba494
}
.step h3 {
  font-size:22px;
  letter-spacing:-.7px;
  margin:24px 0 12px
}
.step p {
  font-size:14px;
  line-height:1.9;
  color:#79897f
}
.modes {
  background:#eef3eb
}
.modes-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.switcher {
  display:flex;
  gap:5px;
  background:#dfe7db;
  border-radius:100px;
  width:max-content;
  padding:5px;
  margin:30px 0
}
.switcher button {
  background:transparent;
  border:0;
  color:#778772;
  padding:12px 25px;
  border-radius:40px;
  font-size:14px
}
.switcher button[aria-selected=true] {
  background:var(--ink);
  color:white
}
.mode-points {
  list-style:none;
  padding:0;
  font-size:14px;
  color:#61796a;
  line-height:2.5
}
.mode-points li:before {
  content:'✓';
  margin-right:12px;
  color:#277b59
}
.mode-visual {
  background:#dae8d4;
  border-radius:26px;
  min-height:390px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:40px
}
.mode-icon {
  background:#fbfff7;
  width:90px;
  height:90px;
  display:grid;
  place-items:center;
  border-radius:25px;
  font-size:42px;
  box-shadow:0 10px 35px #536e4020
}
.mode-visual h3 {
  font-size:25px;
  letter-spacing:-1px;
  margin-bottom:8px
}
.mode-visual p {
  font-size:13px;
  color:#788c6c;
  line-height:1.8;
  text-align:center
}
.mode-badge {
  position:absolute;
  top:24px;
  left:25px;
  font-size:10px;
  letter-spacing:2px;
  color:#647f57
}
.mode-visual.ai {
  background:#e0e5f4
}
.mode-note {
  font-size:11px;
  color:#899587;
  line-height:1.8;
  max-width:420px
}
.daily {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.journal {
  background:#f0eee4;
  border-radius:26px;
  padding:40px;
  position:relative
}
.journal-sheet {
  background:#fffefa;
  padding:30px;
  transform:rotate(-3deg);
  box-shadow:0 12px 30px #524a2b0d;
  border:1px solid #e8e6d9;
  min-height:300px
}
.journal-sheet .date {
  font-family:Georgia,serif;
  font-size:40px;
  color:#6d8069
}
.journal-sheet .date span {
  font-size:12px;
  font-family:Arial;
  letter-spacing:2px
}
.journal-sheet h3 {
  font-size:20px;
  margin:24px 0 12px
}
.journal-sheet p {
  font-size:13px;
  line-height:2;
  color:#84907d
}
.tag {
  display:inline-block;
  font-size:10px;
  color:#79916e;
  border:1px solid #dce4d3;
  border-radius:30px;
  padding:6px 10px;
  margin-top:15px
}
.journal-label {
  position:absolute;
  bottom:18px;
  right:24px;
  font-size:10px;
  color:#8f9684
}
.details {
  display:flex;
  gap:30px;
  margin-top:30px
}
.details span {
  font-size:13px;
  border-left:2px solid #a3b991;
  padding-left:12px;
  color:#63785b
}
.faq {
  max-width:800px;
  margin:auto
}
.faq-top {
  text-align:center;
  margin-bottom:45px
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  cursor:pointer;
  padding:23px 4px;
  list-style:none;
  font-size:15px;
  font-weight:600;
  display:flex;
  justify-content:space-between
}
summary:after {
  content:'+';
  font-weight:400;
  color:#7f9588;
  font-size:20px
}
details[open] summary:after {
  content:'−'
}
details p {
  font-size:14px;
  color:#76877d;
  line-height:1.95;
  padding:0 4px 22px;
  margin:0
}
.closing {
  background:var(--ink);
  color:#edf7ec;
  text-align:center;
  padding:80px 24px
}
.closing .section-label {
  color:#a3c6af
}
.closing h2 {
  font-size:46px;
  margin:20px 0 13px
}
.closing p {
  font-size:15px;
  color:#a0b8aa;
  line-height:1.8
}
.closing .btn {
  background:#d7f4c8;
  color:#213a2b;
  margin-top:15px
}
.closing small {
  display:block;
  margin-top:17px;
  color:#789584;
  font-size:11px
}
footer {
  padding:32px 0;
  font-size:11px;
  color:#89988b
}
.footer-row {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.footer-brand {
  font-size:17px;
  color:var(--ink);
  font-weight:700
}
.demo-tag {
  font-size:10px;
  color:#7f9a8a;
  text-align:center;
  margin:5px 0 0
}
.scroll-hint {
  font-size:10px;
  letter-spacing:2px
}
.badge {
  font-size:10px;
  padding:5px 9px;
  border:1px solid #bacfc0;
  border-radius:30px;
  margin-left:10px;
  color:#6c8a76
}
dialog {
  border:1px solid #d8e4da;
  border-radius:24px;
  padding:35px;
  max-width:440px;
  width:calc(100% - 40px);
  color:var(--ink);
  box-shadow:0 20px 90px #142e2c30
}
dialog::backdrop {
  background:#142e2c77;
  backdrop-filter:blur(5px)
}
dialog h2 {
  font-size:25px
}
dialog p {
  font-size:14px;
  line-height:1.9;
  color:#738477
}
.close {
  position:absolute;
  top:15px;
  right:18px;
  border:0;
  background:none;
  font-size:24px;
  color:#6e8276
}
dialog .btn {
  margin-top:15px;
  font-size:13px;
  padding:13px 22px
}
@media(max-width:1000px) {
  h1 {
  font-size:54px
}
.float-one {
  left:-5px
}
.float-two {
  right:-8px
}
.hero-grid {
  gap:15px
}
.modes-grid,.daily {
  gap:45px
}
.phone {
  width:250px;
  height:535px
}
.hero-foot {
  gap:15px
}
.hero-art {
  scale:.94
}
h2 {
  font-size:36px
}

}
@media(max-width:700px) {
  .wrap {
  padding:0 24px
}
header {
  height:72px
}
.brand {
  font-size:20px
}
nav {
  gap:14px
}
nav>a:not(.small) {
  display:none
}
.small {
  font-size:12px;
  padding:11px 17px
}
.hero-grid {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding-top:52px
}
.hero-copy {
  text-align:center
}
.eyebrow {
  justify-content:center;
  font-size:10px
}
h1 {
  font-size:47px;
  letter-spacing:-2.5px;
  margin:21px 0
}
.lead {
  font-size:15px;
  margin:0 auto;
  max-width:320px
}
.actions {
  justify-content:center;
  gap:20px;
  margin-top:25px
}
.btn {
  font-size:13px;
  padding:16px 22px
}
.text-link {
  font-size:12px
}
.hero-art {
  padding:36px 0 20px;
  scale:1;
  width:100%;
  max-width:400px;
  margin:auto;
  height:565px
}
.phone {
  transform:rotate(5deg);
  width:245px;
  height:510px
}
.screen {
  padding:10px 18px
}
.app-mini {
  padding:12px 0
}
.record {
  margin-top:13px
}
.orbit {
  width:380px;
  height:380px;
  top:90px
}
.float {
  padding:13px 14px;
  font-size:11px
}
.float b {
  font-size:11px
}
.float-one {
  left:-5px;
  top:130px
}
.float-two {
  right:-5px;
  bottom:85px
}
.spark {
  right:3px;
  top:25px;
  font-size:32px
}
.hero-foot {
  font-size:10px;
  justify-content:center;
  gap:20px;
  padding:20px 0
}
.hero-foot .scroll-hint {
  display:none
}
.hero-foot strong {
  display:block;
  margin-top:5px
}
.section {
  padding:70px 0
}
.intro-head {
  display:block
}
h2 {
  font-size:32px;
  letter-spacing:-1.7px
}
.intro-head .section-desc {
  font-size:14px;
  max-width:100%
}
.steps {
  grid-template-columns:1fr;
  gap:20px;
  margin-top:35px
}
.step {
  padding-top:18px;
  position:relative;
  padding-left:38px
}
.step-no {
  position:absolute;
  left:0;
  top:24px
}
.step h3 {
  font-size:20px;
  margin:0 0 8px
}
.step p {
  margin:0;
  font-size:13px
}
.modes-grid,.daily {
  grid-template-columns:1fr;
  gap:35px
}
.section-desc {
  font-size:14px
}
.mode-visual {
  min-height:320px
}
.switcher {
  margin:24px 0
}
.daily .journal {
  order:2;
  padding:30px
}
.details {
  gap:20px
}
.details span {
  font-size:12px
}
.faq-top {
  margin-bottom:25px
}
.closing {
  padding:65px 24px
}
.closing h2 {
  font-size:33px
}
summary {
  font-size:14px;
  gap:20px
}
.footer-row {
  gap:20px
}
.footer-row>span {
  font-size:9px;
  max-width:160px;
  text-align:right
}
.badge {
  font-size:8px
}
.micro {
  font-size:10px
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
* {
  transition:none!important
}

}


.languages {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:11px;
  white-space:nowrap
}
.languages a {
  padding:5px 0;
  color:#718679
}
.languages a[aria-current=page] {
  color:#172e2b;
  font-weight:700;
  border-bottom:1px solid #172e2b
}
html:not([lang=ko]) h1 {
  font-size:60px;
  letter-spacing:-2.5px
}
html:not([lang=ko]) .screen h3 {
  font-size:19px
}
.phone .screen {
  padding-top:8px
}
.phone .app-card {
  padding:13px
}
.phone .app-card p {
  margin:7px 0
}
.phone .waves {
  margin:12px 0
}
.phone .record {
  margin:12px auto 5px
}
.phone .screen h3 {
  margin:8px 0 14px
}
.mode-icon svg {
  width:46px;
  height:46px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
@media(max-width:1000px) {
  html:not([lang=ko]) h1 {
  font-size:49px
}
nav {
  gap:18px
}

}
@media(max-width:700px) {
  html:not([lang=ko]) h1 {
  font-size:43px;
  letter-spacing:-2px
}
nav .small {
  display:none
}
.languages {
  gap:10px;
  font-size:12px
}
nav {
  gap:0
}
.hero-art {
  height:565px
}
.screen h3 {
  font-size:18px!important
}
.float-one {
  max-width:170px
}
.float-two {
  max-width:180px
}
.switcher button {
  padding:12px 20px
}
.mode-visual h3 {
  text-align:center
}
h2 {
  overflow-wrap:break-word
}
.footer-row {
  align-items:start
}

}

#mode-description {
  white-space:pre-line
}


/* Store availability is explicit until the official listing is published. */
.btn:disabled, .btn:disabled:hover {
  cursor: default;
  opacity: .7;
  transform: none;
}