/* SkinU × SUGI demo UI
   - theme: red / green / white (SUGI)
   - design: glassmorphism card on portrait background + big CTA
*/

:root{
  /* brand */
  --sugi-red: #E60020;
  --sugi-green: #01743B;
  --offwhite: #F5F3F1;

  /* neutrals */
  --bg: #ffffff;
  --text: #101213;
  --muted: rgba(16,18,19,.62);
  --line: rgba(16,18,19,.10);

  /* glass */
  --glass: rgba(255,255,255,.70);
  --glass-strong: rgba(255,255,255,.82);
  --shadow: 0 16px 40px rgba(0,0,0,.16);
  --radius: 18px;

  /* sizing */
  --phone-w: 430px;
  --phone-h: 860px;
  --topbar-h: 56px;
  --actionbar-h: 78px;
  --bottomnav-h: 62px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 900px at 20% 10%, rgba(1,116,59,.10), transparent 50%),
              radial-gradient(1000px 700px at 80% 30%, rgba(230,0,32,.10), transparent 55%),
              var(--offwhite);
}

.stage{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: 24px 14px;
}

.phone{
  width:min(100%, var(--phone-w));
  height:min(92vh, var(--phone-h));
  border-radius: 28px;
  overflow:hidden;
  background: var(--bg);
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  border: 1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}

.topbar{
  height: auto;
  min-height: var(--topbar-h);
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  background: linear-gradient(90deg, rgba(1,116,59,.10), rgba(230,0,32,.10));
  border-bottom: 1px solid var(--line);
}

.iconbtn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  color: rgba(16,18,19,.75);
  cursor:pointer;
  flex-shrink: 0;
}
.iconbtn svg{ width: 20px; height: 20px; }

.brand{
  display:flex;
  align-items:baseline;
  gap: 8px;
  min-width: 0;
  flex:1;
}
.brandMark{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--sugi-red), var(--sugi-green));
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
  flex-shrink: 0;
}
.brandName{
  font-weight: 750;
  letter-spacing: .02em;
}
.brandSub{
  font-size: 12px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbarRight{ display:flex; gap:8px; }

.hero{
  position:relative;
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.heroPhoto{
  position:absolute;
  inset:0;
  z-index: 0;
  /* subtle portrait-like background without external assets */
  background:
    radial-gradient(680px 520px at 35% 20%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(780px 620px at 60% 40%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(620px 520px at 52% 18%, rgba(230,0,32,.10), transparent 58%),
    radial-gradient(620px 520px at 46% 65%, rgba(1,116,59,.12), transparent 62%),
    linear-gradient(180deg, #e9e9ea 0%, #d7d8da 100%);
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}

.scrim{
  position:absolute;
  inset:0;
  z-index: 0;
  background: linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.15) 18%,
      rgba(255,255,255,.20) 40%,
      rgba(255,255,255,.32) 70%,
      rgba(245,243,241,.90) 100%);
}

.hero[data-mode="welcome"] .heroPhoto {
  background: url("img/スギ薬局の棚.jpg") center/cover no-repeat;
  filter: brightness(0.85) contrast(1.05);
}

.hero[data-mode="welcome"] .scrim {
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
}

.hero[data-mode="welcome"] #card {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 40px;
}

.welcome-btn-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

.btn-welcome {
  width: 85%;
  height: 64px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  text-decoration: none;
}

.btn-welcome:active {
  transform: scale(0.97);
}

.btn-welcome.green {
  background: linear-gradient(135deg, var(--sugi-green), #02a153);
  color: white;
}

.btn-welcome.red {
  background: linear-gradient(135deg, var(--sugi-red), #ff3a4c);
  color: white;
}

.btn-welcome .main-txt {
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.btn-welcome .sub-txt {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 2px;
}

.welcome-desc {
  color: white;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  line-height: 1.4;
}

.card{
  position:relative;
  z-index: 1;
  flex: 1;
  margin: 16px 16px 12px;
  padding: 16px 16px 12px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow:auto;
}

.card::-webkit-scrollbar{ width: 10px; }
.card::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

.h1{
  font-size: 18px;
  line-height: 1.3;
  margin: 4px 0 8px;
  font-weight: 780;
}
.p{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.fieldTitle{
  font-size: 13px;
  font-weight: 700;
  margin: 14px 0 8px;
}
.list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.choice{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  border-radius: 14px;
  padding: 12px 12px;
  display:flex;
  align-items:flex-start;
  gap: 10px;
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.choice:hover{ transform: translateY(-1px); }
.choice[aria-checked="true"]{
  border-color: rgba(1,116,59,.35);
  background: rgba(1,116,59,.08);
}
.bullet{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(16,18,19,.25);
  margin-top: 2px;
  flex: 0 0 auto;
  display:grid;
  place-items:center;
}
.choice[aria-checked="true"] .bullet{
  border-color: var(--sugi-green);
  background: rgba(1,116,59,.10);
}
.bullet::after{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
.choice[aria-checked="true"] .bullet::after{ background: var(--sugi-green); }

.choiceText{ flex:1; }
.choiceMain{ font-size: 14px; font-weight: 650; }
.choiceSub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.chips{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chip{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.80);
  border-radius: 14px;
  padding: 10px 10px;
  cursor:pointer;
  display:flex;
  gap: 8px;
  align-items:center;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.chip:hover{ transform: translateY(-1px); }
.chip[aria-pressed="true"]{
  border-color: rgba(230,0,32,.35);
  background: rgba(230,0,32,.08);
}
.chipIcon{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.05);
}
.chip[aria-pressed="true"] .chipIcon{
  background: rgba(230,0,32,.12);
}
.chipLabel{
  font-size: 13px;
  font-weight: 650;
}

.inline{
  display:flex;
  gap: 10px;
}
.input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
}
.input:focus{
  border-color: rgba(1,116,59,.45);
  box-shadow: 0 0 0 4px rgba(1,116,59,.10);
}

.notice{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.16);
  padding: 12px 12px;
  background: rgba(255,255,255,.60);
  color: rgba(16,18,19,.70);
  font-size: 12px;
  line-height: 1.55;
}

.badges{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}
.badge{
  flex:1;
  border-radius: 14px;
  padding: 10px 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
}
.badgeTitle{ font-size: 12px; font-weight: 800; }
.badgeSub{ font-size: 11px; color: var(--muted); margin-top: 3px; }

.resultGrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.resultTile{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.80);
  padding: 0;
  overflow:hidden;
}
.resultTile .img{
  height: 46px;
  background:
    radial-gradient(70px 70px at 30% 30%, rgba(230,0,32,.18), transparent 55%),
    radial-gradient(70px 70px at 70% 70%, rgba(1,116,59,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(0,0,0,.05));
}
.resultTile .lbl{
  padding: 8px 8px 9px;
  font-size: 11px;
  color: rgba(16,18,19,.74);
  font-weight: 650;
}

.productsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.pillRow{
  display:flex;
  gap: 8px;
  overflow:auto;
  padding-bottom: 6px;
}
.pill{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space:nowrap;
  cursor:pointer;
}
.pill[aria-pressed="true"]{
  border-color: rgba(1,116,59,.35);
  background: rgba(1,116,59,.10);
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.prodCard{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.prodImg{
  height: 110px;
  background:
    radial-gradient(90px 70px at 30% 30%, rgba(230,0,32,.18), transparent 60%),
    radial-gradient(90px 70px at 70% 70%, rgba(1,116,59,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(0,0,0,.05));
}
.prodBody{ padding: 10px 10px 12px; display:flex; flex-direction:column; gap: 8px; }
.prodName{ font-size: 12.5px; font-weight: 760; line-height: 1.25; }
.prodMeta{ font-size: 11px; color: var(--muted); }
.prodActions{ display:flex; align-items:center; gap: 8px; }
.fav{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  cursor:pointer;
}
.add{
  flex:1;
  height: 34px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--sugi-red), #ff3a4c);
  color: white;
  font-weight: 780;
  cursor:pointer;
}

.progress{
  position:relative;
  z-index: 1;
  display:flex;
  justify-content:center;
  gap: 7px;
  padding: 0 0 10px;
  flex-shrink: 0;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(16,18,19,.16);
}
.dot.isActive{ background: var(--sugi-red); }
.dot.isDone{ background: rgba(1,116,59,.55); }

.actionbar{
  position:relative;
  z-index: 1;
  height: auto;
  min-height: var(--actionbar-h);
  padding: 12px 14px 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  background: rgba(245,243,241,.75);
  border-top: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.btn{
  height: 46px;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 780;
  border: 1px solid rgba(0,0,0,.10);
  cursor:pointer;
}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.btn-ghost{
  background: rgba(255,255,255,.80);
  color: rgba(16,18,19,.75);
  flex: 1;
}
.btn-primary{
  background: linear-gradient(135deg, var(--sugi-red), #ff3a4c);
  color: white;
  border: none;
  flex: 1;
}

.bottomnav{
  height: auto;
  min-height: var(--bottomnav-h);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  flex-shrink: 0;
}
.tab{
  border: none;
  background: transparent;
  padding: 10px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  cursor:pointer;
  color: rgba(16,18,19,.60);
}
.tab[aria-current="page"]{ color: var(--sugi-green); }
.tabIcon{ font-size: 16px; line-height: 1; }
.tabLabel{ font-size: 11px; font-weight: 700; }

.small{
  font-size: 11px;
  color: var(--muted);
}
.hr{
  height:1px;
  background: rgba(0,0,0,.08);
  margin: 12px 0;
}

/* Mobile responsive fix: remove "phone frame" on actual mobile devices */
@media (max-width: 480px) {
  .stage {
    padding: 0;
    display: block;
    height: 100%;
  }
  .phone {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  /* Ensure header/footer stick properly on mobile if needed, or rely on flex layout */
}

.image-source-link,
.modal-image-source-link,
.map-image-source-link {
  font-size: 10px;
  line-height: 1.35;
  color: #777;
  overflow-wrap: anywhere;
}

.modal-image-source-link {
  font-size: 12px;
  margin: -8px 0 16px;
}

.map-image-source-link {
  margin-top: 4px;
}

.image-source-link a,
.modal-image-source-link a,
.map-image-source-link a {
  color: #01743b;
  text-decoration: none;
}

.temp-reference-image-wrap {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
}

.temp-reference-image-wrap > img {
  display: block;
}

.temp-reference-warning {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  background: rgba(214, 0, 28, .72);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
}

.product-img-src-wrap,
.product-card-mini .product-img-src-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
}

.modal-product-img-src-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  margin-bottom: 16px;
}

.cart-item-img-wrap {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}

.map-popup-product-img-wrap {
  width: 80px;
  max-width: 80px;
  aspect-ratio: 1;
  border-radius: 8px;
  margin: 0 auto 8px;
}

.prodImg-wrap {
  height: 110px;
}

.map-popup-product-img,
.cart-item-img-wrap .cart-item-img,
.product-img-src-wrap .product-img-src,
.modal-product-img-src-wrap .modal-product-img-src,
.prodImg-wrap .prodImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}