@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap");


.account-shell{
    max-width:980px;
    margin:34px auto 60px;
    padding:0 18px;
}
.account-card{
    background:#fff;
    border:1px solid #d8e5de;
    border-radius:22px;
    padding:28px;
    box-shadow:0 10px 30px rgba(30,64,48,.04);
}
.account-kicker{
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    background:#e9f6ee;
    color:#176b43;
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
}
.account-card h1{
    margin:10px 0 8px;
    font-size:clamp(28px,4vw,42px);
}
.account-muted{color:#687a71;line-height:1.7}
.account-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.account-field{display:flex;flex-direction:column;gap:7px}
.account-field.full{grid-column:1/-1}
.account-field label{font-weight:850;font-size:13px}
.account-input,.account-select{
    width:100%;
    min-height:46px;
    border:1px solid #cddbd4;
    border-radius:12px;
    padding:0 13px;
    background:#fff;
    color:#112b20;
    font-size:15px;
    box-sizing:border-box;
}
.account-check{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px 13px;
    border:1px solid #dce6e1;
    border-radius:12px;
    background:#f9fbfa;
    line-height:1.55;
}
.account-check input{margin-top:4px}
.account-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-top:18px;
}
.account-primary,.account-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:11px;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
}
.account-primary{
    border:1px solid #14243d;
    background:#14243d;
    color:#fff;
}
.account-secondary{
    border:1px solid #d0dcd6;
    background:#fff;
    color:#214838;
}
.account-error,.account-success{
    margin:14px 0;
    padding:12px 14px;
    border-radius:12px;
    line-height:1.55;
}
.account-error{
    border:1px solid #efc7c0;
    background:#fff5f3;
    color:#9a291f;
}
.account-success{
    border:1px solid #b9dfc9;
    background:#f1fbf5;
    color:#176b43;
}
.account-language{
    display:flex;
    gap:6px;
    justify-content:flex-end;
    margin-bottom:10px;
}
.account-language a{
    text-decoration:none;
    padding:6px 9px;
    border-radius:999px;
    color:#52675d;
    font-size:12px;
    font-weight:850;
}
.account-language a.active{background:#edf4f0;color:#183c2b}
.account-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:22px 0;
}
.account-stat{
    padding:16px;
    border:1px solid #dbe6e0;
    border-radius:15px;
    background:#fbfdfc;
}
.account-stat span{display:block;color:#6d7d75;font-size:12px;margin-bottom:6px}
.account-stat strong{font-size:24px}
.account-progress{
    height:12px;
    border-radius:999px;
    background:#edf2ef;
    overflow:hidden;
}
.account-progress span{
    display:block;
    height:100%;
    background:#176b43;
}
.account-profile{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 24px;
}
.account-profile div{
    padding:11px 0;
    border-bottom:1px solid #eef2f0;
}
.account-profile small{display:block;color:#7b8a83;margin-bottom:3px}
.account-code{
    max-width:260px;
    letter-spacing:.25em;
    font-size:22px;
    text-align:center;
    font-weight:900;
}
.account-detail{
    margin-top:12px;
    padding:13px;
    border:1px solid #dce7e1;
    border-radius:12px;
    background:#f9fbfa;
    color:#5e7167;
    line-height:1.6;
    font-size:13px;
}
@media(max-width:720px){
    .account-card{padding:20px}
    .account-grid,.account-profile{grid-template-columns:1fr}
    .account-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Japanese typography — Daily Korean Kit standard */
html[lang="ja"],
html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] a,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea,
.account-shell[data-lang="ja"],
.account-shell[data-lang="ja"] button,
.account-shell[data-lang="ja"] a,
.account-shell[data-lang="ja"] input,
.account-shell[data-lang="ja"] select,
.account-shell[data-lang="ja"] textarea {
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
}
.account-language a[href*="lang=ja"] {
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
.account-shell[data-lang="ja"] h1,
.account-shell[data-lang="ja"] h2 {
  letter-spacing:-0.02em;
  font-weight:800;
}


/* =========================================================
   Daily Korean Kit Account Flow V1.7
   Email verification -> Welcome -> Personal dashboard
   ========================================================= */
:root{
  --dkk-green:#0d5a49;
  --dkk-green-deep:#0b493c;
  --dkk-green-soft:#eaf5ef;
  --dkk-ivory:#fbfaf5;
  --dkk-gold:#d6aa3f;
  --dkk-ink:#0f3328;
  --dkk-muted:#66796f;
  --dkk-line:#d7e3dd;
}

.account-shell{
  max-width:1040px;
  margin:32px auto 64px;
}
.account-card{
  border-radius:26px;
  border-color:var(--dkk-line);
  box-shadow:0 18px 50px rgba(22,65,49,.06);
}
.account-kicker{
  background:var(--dkk-green-soft);
  color:var(--dkk-green-deep);
  letter-spacing:.09em;
}
.account-card h1,
.account-card h2{
  color:var(--dkk-ink);
  letter-spacing:-.035em;
}
.account-primary{
  border-color:var(--dkk-green);
  background:var(--dkk-green);
  color:#fff;
}
.account-primary:hover{
  background:var(--dkk-green-deep);
  border-color:var(--dkk-green-deep);
}
.account-secondary{
  border-color:#a9c3b7;
  color:var(--dkk-green-deep);
}
.account-input:focus,.account-select:focus{
  outline:none;
  border-color:#75a995;
  box-shadow:0 0 0 3px rgba(33,117,88,.10);
}
.account-progress{
  background:#e8efeb;
}
.account-progress span{
  background:linear-gradient(90deg,#0d5a49,#1e765f);
}
.account-stat{
  background:linear-gradient(180deg,#fff,#fbfdfc);
}
.account-stat strong{
  color:var(--dkk-green-deep);
}

/* Verification */
.dkk-verify-card{
  display:grid;
  grid-template-columns:minmax(260px,38%) 1fr;
  gap:34px;
  align-items:center;
}
.dkk-verify-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:380px;
  border-radius:22px;
  background:linear-gradient(180deg,#fcfbf6,#f5f8f4);
  overflow:hidden;
}
.dkk-verify-visual img{
  width:min(100%,340px);
  height:auto;
  display:block;
}
.dkk-verify-copy .account-muted{
  max-width:590px;
}
.dkk-email-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  margin:8px 0 18px;
  border-radius:999px;
  background:#f2f7f4;
  color:#385c4d;
  font-size:13px;
  font-weight:700;
}
.dkk-verify-form{
  max-width:430px;
}
.dkk-verify-form .account-code{
  width:100%;
  max-width:none;
  height:58px;
  border-radius:14px;
}
.dkk-verify-form .account-actions{
  align-items:stretch;
}
.dkk-verify-form .account-primary,
.dkk-verify-form .account-secondary{
  flex:1;
}

/* Welcome */
.dkk-welcome{
  max-width:1040px !important;
  margin:32px auto 64px !important;
}
.dkk-welcome-card{
  border-radius:28px !important;
  border:1px solid var(--dkk-line) !important;
  box-shadow:0 18px 50px rgba(22,65,49,.06);
}
.dkk-welcome-grid{
  grid-template-columns:minmax(280px,40%) 1fr !important;
  gap:38px !important;
}
.dkk-welcome-img{
  border-radius:24px !important;
  background:#fbfaf5;
}
.dkk-welcome h1{
  color:var(--dkk-ink);
  line-height:1.12;
}
.dkk-welcome-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.dkk-welcome-list div{
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:16px !important;
}
.dkk-welcome-actions .account-primary,
.dkk-welcome-actions .account-secondary{
  min-width:190px;
}

/* Dashboard */
.dkk-dashboard-hero{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:26px;
  align-items:center;
}
.dkk-dashboard-hero-copy{
  min-width:0;
}
.dkk-dashboard-milo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:210px;
  border-radius:22px;
  background:linear-gradient(180deg,#fcfbf6,#f5f8f4);
}
.dkk-dashboard-milo img{
  width:220px;
  max-width:100%;
  height:auto;
}
.dkk-dashboard-next{
  margin-top:20px;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--dkk-line);
  background:#f8fbf9;
}
.dkk-dashboard-next small{
  display:block;
  margin-bottom:6px;
  color:#718279;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
}
.dkk-dashboard-next strong{
  display:block;
  color:var(--dkk-ink);
  font-size:20px;
  line-height:1.4;
}
.dkk-dashboard-subrow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.dkk-dashboard-subrow > div{
  padding:14px 16px;
  border:1px solid #e0e9e4;
  border-radius:15px;
  background:#fff;
  color:#586c62;
}
.dkk-dashboard-subrow small{
  display:block;
  margin-bottom:5px;
  font-weight:800;
  color:#799087;
}

@media(max-width:760px){
  .account-shell{
    margin:14px auto 40px;
    padding:0 10px;
  }
  .account-card{
    padding:18px;
    border-radius:20px;
  }
  .dkk-verify-card,
  .dkk-dashboard-hero{
    grid-template-columns:1fr;
  }
  .dkk-verify-visual{
    min-height:auto;
    max-height:260px;
  }
  .dkk-verify-visual img{
    width:min(75%,260px);
  }
  .dkk-welcome{
    margin:14px auto 40px !important;
    padding:0 10px !important;
  }
  .dkk-welcome-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .dkk-welcome-img{
    max-width:280px !important;
  }
  .dkk-welcome-list{
    grid-template-columns:1fr;
  }
  .dkk-dashboard-milo{
    order:-1;
    min-height:180px;
  }
  .dkk-dashboard-milo img{
    width:185px;
  }
  .account-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dkk-dashboard-subrow{
    grid-template-columns:1fr;
  }
}


/* V1.15 — partial progress feedback */
.account-progress span{
    min-width:0;
    transition:width .35s ease;
}
.account-progress-caption{
    margin-top:7px;
    color:#6c7d74;
    font-size:12px;
    line-height:1.5;
    text-align:right;
}